CODEWITHSUNDEEP
javascriptphpjqueryhtml
Dixon Chaudhary
Dixon Chaudhary

Reputation: 321

Displaying the content dynamically from the dynamic id of the button using jquery

Scenario:

I have a bit tricky case here:

Upon cicking the button inside the first div block (I have named it as DIV Block A for readability), I want to display the channels which is inside the second DIV Block (I have named it as DIV Block B for readability).

The id of button from DIV Block A is:

id="sub_category_dc_button_<?=$category['category_id'];?>"

Upon clicking this button, the content inside the DIV Block B should be displayed.

Attempt 1:

For this, I have followed this approach:

$(".sub_dc_channels").on("click", function(){ 
    $($(this).attr("data-target")).show(); 
  });

Here is my DIV Block A:

<div class="sub_cat_buttons channel" id="dc_subcategory_button_tab">
       <div class="sub_dc_channels" id="sub_dc_button"> 
           <?php foreach ($output as $category) {                                                                       
               <button type="button" data-toggle="collapse" 
                  id="sub_category_dc_button_<?=$category['category_id'];?>"      
                  class="btn btn-primary sub_digitalchannel_button"
                  data-target="#Category_<?= $category['category_id'];?>">                                                   
                  <?= $category['category_title']?> 
               </button>                                                          
        </div> 
    </div>

Here is my DIV Block B:

<?php  foreach ($output as $category) {?>                  
     <div class="channel" id="Category_<?= $category['category_id'];?>"> 
    <div id="subchannel_list_tab"> 
           <?php  foreach ($output as $category) {?>  
           <?php foreach ($category['channels'] as $channels) { ?>                                                                                                                                          
         <img src="<?= $channels['channel_logo']; ?>" 
         alt="<?= $channels['channel_name']; ?>"
         title="<?= $channels['channel_name']; ?>"
         style="width: 100px; height: 60px;" />                                
       <?php } ?>
       <?php } ?> 
    </div>                          
     </div>
 <?php } ?>

Attempt 2:

I have also used this approach with the same DIV Blocks but it fails too.

$('div[id^="Category_"]').click(function() {  
    $(".channel").hide();   
    $("#subchannel_list_tab").show();
});

Issue Faced:

When I clicked the button from DIV Block A then it targets the contents inside the DIV Block B but the contents inside the DIV Block B are not shown.

What am I missing here? Or am I following the wrong approach? Suggestions are highly appreciated.

Upvotes: 0

Views: 717

Answers (2)

Harry baldaniya
Harry baldaniya

Reputation: 167

You want to show dynamic data as per id of button click.You missed a target button class in selector.your issue is solved.

$(document).on("click",".sub_dc_channels .sub_digitalchannel_button",function(){ 
    alert();
    $($(this).attr("data-target")).show(); 
});

for reference you can click here.

Upvotes: 1

martinho
martinho

Reputation: 1016

your click is going to be triggered in the div and not in the button, it is likely that this is the problem.

Here's a dummy example of what I think you're up to.

$('.showDiv').click( function () {
   let div = $(this).attr('data-target');
   $(`#${div}`).show();
});
#divB {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">
  <button class="showDiv" data-target="divB">show div</button>
</div>
<div id="divB">
  info divB
</div>

Upvotes: 1

Related Questions