jQuery Forum

Hi,

I have the following code which causes the buttonclick "next" to affect the dropdown menu "page_num" and effectively loops to the next option in the dropdown on each button click. I can get it to work using the jquery ui $("#next").button(); however getting the jquery ui dropdown menu to work is proving more difficult. Can anyone offer some assistance in how to integrate the ("#page_num").selectmenu(); into this script please? I've tried various different arrangements and have had no luck so far.

1. $(document).ready(function() {
2.     $("#next").button();
3.     $('#next').click(function() {  
4.         $('#page_num :selected').each(function() {           
5.             var curElement = $(this).text();
6.             var nextElement = $(this).next();
7.             var nextElementText = $.trim(nextElement.text());
8.             if(nextElementText!=''){
9.             $(curElement).removeAttr('selected');
10.             $(nextElement).attr('selected',true);
11.             }else{
12.                 $(this).removeAttr('selected');
13.                 $('#page_num:first-child').attr("selected", "selected");
14.             }
15.         });    
16.     });      
17. });

1. <label>Page
2.       <select size="1" name="page_num" id="page_num">
3.             <option value="1" selected="selected">1</option>
4.             <option value="2">2</option>
5.             <option value="3">3</option>
6.             <option value="4">4</option>
7.       </select>
8. </label>
9. <button type="button" id="next">Next</button>
10. 
    
11. <script type="text/javascript" src="../jquery.js"></script>
12. <script type="text/javascript" src="../jquery-ui-1.11.1.custom/jquery-ui.js"></script>

Many thanks!

Hey,

Presumably due to my amateur abilities I'm having trouble with getting the JQuery UI selectmenu to work with my jquery script for passing a variable from the selected option of the dropdown menu to my php file.

It all works fine until I add the $( "#users" ).selectmenu () then the jquery UI works and the passing of the variable and ajax doesn't. I have no doubt that I'm inserting it into my jquery wrong but I have been through the documentation and it does not seem to clear anything up for me.

I've tried lots of variations but the ajax/variable are not working. Can someone give me a bit of help integrating this into my code please? :)

I used a basic template from w3schools originally for the dropdown and converted the javascript to jquery so it was easier to work with:

1. $(document).ready(function() {
       var q = $('#users').val();
       $('#users').on("change", function () {
           q = $(this).val();
   
           $.ajax({
               url: 'searchtestphp.php',
               data: 'q='+q,
               success: function (data) {
                   $('#txtHint').html(data);
               }
           }).error(function() {
               alert ('An error occured');
           });
       });
   });

The php is:

1. <?php
   
   if (isset($_GET['q'])) {
       $q = $_GET['q'];
   }
   $con = mysqli_connect(host','user','password','database');
   if (!$con) {
     die('Could not connect: ' . mysqli_error($con));
   }
   
   mysqli_select_db($con);
   
   $sql="SELECT * FROM user WHERE firstname LIKE \"%".$q."%\" ";
   
   $result = mysqli_query($con,$sql);
   
   echo "<table border='1'>
   <tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
   <th>Hometown</th>
   <th>Job</th>
   </tr>";
   
   while($row = mysqli_fetch_array($result)) {
     echo "<tr>";
     echo "<td>" . $row['firstname'] . "</td>";
     echo "<td>" . $row['lastname'] . "</td>";
     echo "<td>" . $row['age'] . "</td>";
     echo "<td>" . $row['hometown'] . "</td>";
     echo "<td>" . $row['job'] . "</td>";
     echo "<td>" .$q. "</td>";
     echo "</tr>";
   }
   echo "</table>";
   
   mysqli_close($con);
   ?>
   

The html:

1. <form>
   <select id="users" name="users">
   <option value="">Select a person:</option>
   <option value="peter">Peter Griffin</option>
   <option value="lois">Lois Griffin</option>
   <option value="joe">Joseph Swanson</option>
   <option value="glenn">Glenn Quagmire</option>
   </select>
   </form>
   <br />
   <div id="txtHint"><b>Person info will be listed here.</b></div>
   
   
   <script src="../jquery.js"></script>
   <script type="text/javascript" src="../jquery-ui-1.11.1.custom/jquery-ui.js"></script>

This is probably extremely basic but thanks in advance!