CMS Development

PrasadKD
Participant

Probelm with Hubdb

SOLVE

Hi all,

I am new to hubspot.I figured out basic functionality of hubdb. I created a table. I am creating a module which display all table rows as cards and when some one click button, it will open a modal class and show only values of respective column. but how much I tried every time, I'm getting only first column in modal class.

 

Please tell me where I did wrong.

 

There

.diversityWrapper{
  display:flex; 
  flex-direction:row; 
  flex-wrap:wrap; 
  justify-content:center;
}
.diversityTable{
  flex-basis:30%; 
  margin:20px 1.5%;
  border:1px solid rgb(220,220,220);
  border-radius:5px;
}

.bodyContainer{
  float:none!important; 
  margin:0px auto!important; 
  max-width:1200px!important;
}

.image{
  display:inline-block; 
  margin:0px auto 10px; 
  width:250px;
}

.diversityPadd{
  padding:20px; 
}

.description{
  min-height:255px;
}

.bioLink{
  display:block; 
  margin:30px auto; 
  background-color:black; 
  color:white; !important
  text-align:center; 
  text-decoration:none;
  padding:5px 30px;
}

.bioLink:hover{
  background-color: #c89c5c; 
  color:white;
}

.fileContainer{
  text-align:center; 
}

@media screen and (max-width:1200px){
  
  .teamMember{
    flex-basis:46%; 
    margin:20px 1.5%;
    border:1px solid rgb(220,220,220);
    border-radius:5px;
  }
  
}


@media screen and (max-width:800px){
  
  .teamMember{
    flex-basis:100%; 
    margin:20px 0%;
    border:1px solid rgb(220,220,220);
    border-radius:5px;
  }
  
}

@media screen and (max-width:767px){
 .teamContent p{
  min-height:0px;
} 
}





















.modal {
  display:none ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
{% set queryParam="orderBy=order" %}
{% set table = hubdb_table_rows(5341235,queryParam) %}   

<div class="bodyContainer">
  
  <div class="diversityWrapper">

    {% for row in table %}
      <div class="diversityTable">
        <div class="diversityPadd">
          <img class="image" src="{{ row.image.url }}">
      
         <button class="bioLink" id="modal_button_{{row.id}}" style="height:30px;" onclick="document.getElementById('myModal').style.display='block'">
           Read more
          </button> 
          <div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
    <p>{{row.description}}</p>
  </div>

</div>
        </div>
      </div>
    
<!-- The Modal -->
<script>
// Get the modal

var modal = document.getElementById("myModal");

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
    {% endfor %} 
    

    

  </div>
  
  

I know there are some unnecessary things also in coding, but please let me know how to row.description based on column

 

0 Upvotes
1 Accepted solution
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Probelm with Hubdb

SOLVE

Hi @PrasadKD ,

 

Currently, you are targeting the first element that has the ID 'myModal'. But every row from HubDB will have the same ID with your current code, so it will pick the first element. 
Try this:

{% set queryParam="orderBy=order" %}
{% set table = hubdb_table_rows(5341235,queryParam) %}   

<div class="bodyContainer">
  
  <div class="diversityWrapper">

    {% for row in table %}
      <div class="diversityTable">
        <div class="diversityPadd">
          <img class="image" src="{{ row.image.url }}">
      
         <button class="bioLink" id="modal_button_{{row.id}}" style="height:30px;" onclick="document.getElementById('myModal-{{loop.index}}').style.display='block'">
           Read more
          </button> 
          <div id="myModal-{{loop.index}}" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" onclick="document.getElementById('myModal-{{loop.index}}').style.display='none'">&times;</span>
    <p>{{row.description}}</p>
  </div>

</div>
        </div>
      </div>
    
<!-- The Modal -->
<script>
// Get the modal

var modal = document.getElementById("myModal-{{loop.index}}");

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
    {% endfor %} 
    

    

  </div>


Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

2 Replies 2
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Probelm with Hubdb

SOLVE

Hi @PrasadKD ,

 

Currently, you are targeting the first element that has the ID 'myModal'. But every row from HubDB will have the same ID with your current code, so it will pick the first element. 
Try this:

{% set queryParam="orderBy=order" %}
{% set table = hubdb_table_rows(5341235,queryParam) %}   

<div class="bodyContainer">
  
  <div class="diversityWrapper">

    {% for row in table %}
      <div class="diversityTable">
        <div class="diversityPadd">
          <img class="image" src="{{ row.image.url }}">
      
         <button class="bioLink" id="modal_button_{{row.id}}" style="height:30px;" onclick="document.getElementById('myModal-{{loop.index}}').style.display='block'">
           Read more
          </button> 
          <div id="myModal-{{loop.index}}" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" onclick="document.getElementById('myModal-{{loop.index}}').style.display='none'">&times;</span>
    <p>{{row.description}}</p>
  </div>

</div>
        </div>
      </div>
    
<!-- The Modal -->
<script>
// Get the modal

var modal = document.getElementById("myModal-{{loop.index}}");

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
    {% endfor %} 
    

    

  </div>


Did my answer solve your issue? Help the community by marking it as the solution.
PrasadKD
Participant

Probelm with Hubdb

SOLVE

Hi Teun

 

Thank you so much, It really helpedme. It worked. Thank you