Probelm with Hubdb

Develop, Build & Integrate CMS Development
, , , , , , , , ,
1

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'">×</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

2

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'">×</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>
3

Hi Teun

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