1

I am building a website using jQuery mobile which involves a form.

I have been trying to implement this method to dynamically change a select menu: Link

While I have been able to do this outside of my jQuery mobile website, it does not seem to work together with jQuery mobile. I have set data-ajax="false" and tried a bunch of things, but I cannot find a solution. Is this because of jQuery mobile or not?

Below you can find the code.

For the main page:

<?php require('config_db.php');?>

...

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

...

<div data-role="fieldcontain">
    <label for="course">Course:</label>
    <select id="course" name="course" data-native-menu="false">
        <option value="0">0</option>
        <option value="1">1</option>
    </select>
</div>  
<div data-role="fieldcontain">
    <label for="student">Student:</label>
    <select id="student" name="Student" data-native-menu="false">
    </select>
</div>

...

<script type="text/javascript">
$(function() {
 $("#course").bind("change", function() {
     $.ajax({
         type: "GET", 
         url: "get_students.php",
         data: "course="+$("#course").val(),
         success: function(html) {
             $("#student").html(html);
         }
     });
 });
});
</script>

Config_db.php has been tested and works like a charm.

Get_students.php works as well and will generate the following output from the test database:

<option value='1'>John Doe</option><option value='2'>Jane Doe</option>

I have done a test and removing the jQuery mobile line at the beginning solves the problem. Unfortunately, I do need jQuery mobile.

Omar
  • 32,302
  • 9
  • 69
  • 112
MacBryce
  • 133
  • 1
  • 3
  • 14
  • You'll have to give some more information. Your code would help particularly. – SharkofMirkwood Jul 13 '13 at 17:00
  • Interesting, it must be something JQuery mobile itself is doing. Have you checked the Javascript console to see if it's reporting anything? – SharkofMirkwood Jul 13 '13 at 17:20
  • There's nothing in the console and nothing in the XHR resource panel. I checked on both Chrome and Firebug. (Getting desperate.) – MacBryce Jul 13 '13 at 17:49
  • If someone has a better way of doing those (e.g., by actually using jQuery mobile) then that would be helpful as well. The documentation is very limited on this while it should be easy to do so. – MacBryce Jul 13 '13 at 17:50

1 Answers1

5

JQuery mobile doesn't just retheme a select box, it adds it's own complex markup. You need to tell jQuery Mobile to update it (the mobile display).

<script type="text/javascript">
$(function() {
 $("#course").bind("change", function() {
     $.ajax({
         type: "GET", 
         url: "get_students.php",
         data: "course="+$("#course").val(),
         success: function(html) {
             $("#student").html(html).selectmenu('refresh', true);
         }
     });
 });
});
</script>
EPB
  • 3,939
  • 1
  • 24
  • 26
  • Why isn't this selected as the answer? – Alkis Kalogeris Jul 13 '13 at 18:46
  • This should work, but refrain from using `.ready` with jQuery Mobile. – Omar Jul 14 '13 at 00:47
  • Thank you very much. That solves it, and it gives me a much better idea of how jQuery mobile actually works. :-) – MacBryce Jul 14 '13 at 09:19
  • Omar, is there an alternative to using .ready to achieving what I am trying to do? – MacBryce Jul 14 '13 at 09:21
  • 1
    @Omar, thank you as well. I found what you meant and I have now changed "$(function()" to "$(document).on('pageinit', function(){" after I learned about what you meant here: [link](http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events) – MacBryce Jul 14 '13 at 09:27