CODEWITHSUNDEEP
phpjquerytwitter-bootstrap
David
David

Reputation: 524

why the data-target is not working in bootstrap if I use php to generate the id?

I am using bootstrap to list some of the speakers details. Let say for example my code is the following:

    <?php

        global $wpdb;
        $result = $wpdb->get_results("SELECT * FROM  `Invited_Speakers_auto`   ORDER BY `Last_Name` ASC;");
        foreach ( $result as $print)   { ?>


<div class="DemoBS2" > 


  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-warning" id="toggle-btn"
  data-toggle="collapse" data-target="#<?php echo $print->Unique_Id;?>" >Click to Toogle</button>

    <div id="<?php echo $print->Unique_Id;?>" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>


</div>


 <?php } ?>

It gives my only the toggle buttons but its not working as such.

What is the mistake. click here to see the error.

thanks in advance.

Edit:

When I run the above query and php code, I get the following for the first entry.

<button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#17ICLAA501
">Click to Toogle</button>

    <div id="17ICLAA501
" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>


</div>

I dont know, why the space is coming after the $Unique_Id in both data-target and id.

Is that the thing does not allow the boostrap not to work?

Note:

I have checked that unique id is not repeating anywhere.

Upvotes: 0

Views: 1257

Answers (2)

Dasma
Dasma

Reputation: 1263

Your problem is that the data-target use jQuery to select the item. Spaces here and new lines is not a part of the ID. But the attribute ID contains spaces and new line as part of the ID. So data-target looks after ID 17ICLAA501 but it doesn't exist as ID equals 17ICLAA501\n

In your new example you forgot to truncate your id for spaces and new lines (http://iclaa2017.com/test-template/):

This is your html result:

<div class="DemoBS2"> 
  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#17ICLAA501
">Click to Toogle</button>

    <div id="17ICLAA501
" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>
</div>

That means that you don't have a clean ID.

The result should be:

<div class="DemoBS2"> 
  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#17ICLAA501">Click to Toogle</button>

   <div id="17ICLAA501" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>
</div>

I will recommend you too use chrome developer tool, where you easily can live edit and see your result. Please vote my answers as well ;)

try to replace $print->Unique_Id with preg_replace("/\s+/", "", $print->Unique_Id);

So your code should be like this:

<?php

        global $wpdb;
        $result = $wpdb->get_results("SELECT * FROM  `Invited_Speakers_auto`   ORDER BY `Last_Name` ASC;");
        foreach ( $result as $print)   { ?>


<div class="DemoBS2" > 


  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-warning" id="toggle-btn"
  data-toggle="collapse" data-target="#<?php echo preg_replace("/\s+/", "", $print->Unique_Id);?>" >Click to Toogle</button>

    <div id="<?php echo preg_replace("/\s+/", "", $print->Unique_Id);?>" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>


</div>


<?php } ?>

Upvotes: 1

Dasma
Dasma

Reputation: 1263

By investigating your online example, I can see that the Unique_Id doesn't get set to the DOM element. So that data-target get set too # and id empty string. You need to investigate $print->Unique_Id which return empty string. It works when you set data-target and id.

<?php echo $print->Unique_Id;?> gives a empty string in your example page.

The html result of your working example:

<div class="DemoBS2">
  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#toggle-example">Click to Toogle</button>

    <div id="toggle-example" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>

  <button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#toggle-example1">Click to Toogle</button>

    <div id="toggle-example1" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>
</div>

The html result of your NOT working example:

<div class="DemoBS2"> 


  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#">Click to Toogle</button>

    <div id="" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>


</div>

Maybe try this:

<?php $uuid = uniqid(); ?>
<div class="DemoBS2">
  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-warning" id="toggle-btn"
  data-toggle="collapse" data-target="#<?php echo $uuid;?>">Click to Toogle</button>

    <div id="<?php echo $uuid;?>" class="collapse in">
      <p>If you don't like something, <b>change it</b>. 
      If you can't change it, change your <b>attitude</b>.</p></div>
</div>

Upvotes: 1

Related Questions