Ajax load from PHP/MySQL generated Bootstrap drop down with variable pass

Question

I have two problems with my code, but because I am not quite sure that they are not related, I'll ask them together.

Question one: My button group, static + dynamically generated (by a PHP while loop of a MySQL query) drop down loads on the first page load. However, after loading content with Ajax the drop down menu does not work anymore (no drop down) and buttons don't react anymore. How come?

Question two: How can I pass a variable from my PHP generated drop down to the Ajax load call? The first link (ID=1) works, all others do nothing (not even an error). If I make the ID static (make Ajax calls for every different link ID with their own IDNR) they all work.

Code: HTML/PHP:

<ul class="dropdown-menu" role="menu">
   <?php
      $querygenre = "SELECT lib_genre.genre_name as name,
      lib_genre.genre_id as id from lib_edition
      join lib_editionrelatestowork on lib_editionrelatestowork.edition_id = lib_edition.edition_id
      join lib_workhasgenre on lib_workhasgenre.work_id = lib_editionrelatestowork.work_id
      inner join lib_genre on lib_genre.genre_id = lib_workhasgenre.genre_id
      group by lib_genre.genre_id order by name asc";
      $resultgenre = $db->query($querygenre);

      while ($result_row = $resultgenre->fetch(PDO::FETCH_ASSOC))
      {
         $genrename = $result_row['name'];
         $genreid = $result_row['id'];
   ?>
   <li>
      <a href="#" id="genre" idnr="<?php echo $genreid?>">
          <?php echo $genrename?>
      </a>
   </li>
   <?php
      }
   ?>
 </ul>

...

<div class="row" id="content">
</div>

At the end of the HTMP/PHP file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){
        $('#genre').click(function(){
            var idnr = $(this).attr('idnr');
            url = "getbygenretest.php?genre_id=" + idnr;
            $('#content').load(url);
        });

        $('#test').click(function(){
            $('#content').load('getbygenretest.php?genre_id=3');
        });
    })
</script>

Pang · Accepted Answer · 2014-07-23 01:51:56Z

3

I'm not sure but try this:

Change id="genre" to class="genre" and $('#genre') to $('.genre').

Your HTML attribute is duplicated.

edited Jul 23, 2014 at 1:51

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jul 22, 2014 at 20:13

baxri

3071 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sara Raap - van Bussel Over a year ago

Ah yes, that did it for my second question. Do you have any idea why my drop down does not work after loading the ajax content?

Sara Raap - van Bussel Over a year ago

Nevermind, I found it. It seems some (standard) JS includes on the loaded pages were conflicting. As they were unnecessary anyway, I removed them, and now everything works.

Collectives™ on Stack Overflow

Ajax load from PHP/MySQL generated Bootstrap drop down with variable pass

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related