CODEWITHSUNDEEP
javascriptjquerymobilejquery-mobile
Abel Jojo
Abel Jojo

Reputation: 758

Auto populate in jQueryMobile select

I wonder i couldn't get any valuable resource from the web ob this. I codded the below select options and stuck to rebuild with new options for the second select in Jquery mobile. I believe some one can help to do this. I highly thank you all,wished to help me.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.css" />
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<link rel="stylesheet" href="custom.css" />

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

the script

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#cat").selectmenu(); // Initializes
        $("#cat").selectmenu('refresh', true);
        $("#cat").change(function() {
            //document.write("asd");.selectmenu('refresh', true);
        $("#subcat").load("datadmin/getsub.php?cat="+ $("#cat").val());
        var myselect = $("#subcat");
        myselect[0].selectedIndex = 3;
        myselect.selectmenu("refresh");
        //$("#subcat").selectmenu('refresh', true);
        });         
    })
</script>

the selects

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="cat" class="select">Category:</label>
<select name="cat" id="cat" data-mini="true">
<?php
    $q="select * from cat";
    $res=mysql_query($q);
    if(mysql_num_rows($res)>=1)
    {
        while ($info=mysql_fetch_array($res)) 
            {
        echo '<option value="'.$info['cid'].'">'.$info['cat'].'</option>';
        }
    }
    ?>
</select>
</div>

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="subcat" class="select">Sub Category:</label>
<select name="subcat" id="subcat" data-mini="true">
<?php
    $q="select * from subcat";
    $res=mysql_query($q);
    if(mysql_num_rows($res)>=1)
    {
        while ($info=mysql_fetch_array($res)) 
            {
        echo '<option value="'.$info['sid'].'">'.$info['subcat'].'</option>';
    }
    }   
?>
</select>
</div>

this is the jsfiddle link to this code jsfiddle.net/abelkbil/wLC65

Upvotes: 1

Views: 1131

Answers (1)

krishwader
krishwader

Reputation: 11381

Unfortunately, the load method in your code doesnt work because the URL is not in your domain. This is called a crossdomain call and its not allowed by XMLHttpRequest (which is what load does in the back). A way to bypass this is by making an ajax request to a method in your server which will in turn talk to this URL and get the data from there. so in your change function, 

 $("#cat").bind("change", function () {
        alert("change");
        //$("#subcat").load("http://fortunebitsolutions.com/olx/dataadmin/getsub.php?cat=" + $("#cat").val());<--This wont work.ajax doesnt allow cross domain requests

        //get a response from this url from your server, and make an ajax request to your server to get it from there.
       /* $.ajax({
                url: url to server method,
                data: { "cat": this.value },
                jsonp: true,
                success: function (s) {
                    //now s will contain options.
                    $options = s;
                },
                error: function (s) {
                    alert("error");
                }
            }); */

         //now add the options to second select
        $("#subcat").html($options).selectmenu().selectmenu('refresh', true);
    });

Here's a demo for an offline example : http://jsfiddle.net/hungerpain/wLC65/1/

PS : if you're from a .net background please feel free to ask for my help in making that server side code :)

Upvotes: 1

Related Questions