Jquery Ajax with GET not working

I have this peace of HTML code

<select id="country" name="country" onchange="updateState()">
    <option value="1">Country 1</option>
    <option value="2">Country 2</option>
    <option value="3">Country 3</option>
</select>
<select id="state" name="state">
    <option value="1">State 1</option>
    <option value="2">State 2</option>
    <option value="3">State 3</option>
</select>

and im trying to update state select with JQuery ajax

<script type="text/javascript">
function updateState(){
    var state = $('#country').val();
    alert(state);
    $.ajax(
    {
        type: "GET",
        url: "../functions/selectstate.php",
        data: { sta : state }
    }).done(function( html )
    {
            $('#state').empty();
            $('#state').append(html);

    })
    }
}
</script>

selectstate.php have this php code, i tested it and work fine

include_once('select.php');
include_once('cndb.php');
$sDB = new SelectDb();
$data = $sDB->selectStatesById($_GET['sta']);
foreach($data as $row)
{
    echo "<option value=" . $row->state . ">" . $row->name . "</option>";
}

I just can't see where is the problem. Thanks in advance

Answers


HTML

<select id="country" name="country">
    <option value="1">Country 1</option>
    <option value="2">Country 2</option>
    <option value="3">Country 3</option>
</select>
<select id="state" name="state">
    <option value="1">State 1</option>
    <option value="2">State 2</option>
    <option value="3">State 3</option>
</select>

SCRIPT

<script type="text/javascript">
    $(document).on('change','#country',function (){
        var state = $('#country').val();
        alert(state);
        $.ajax(
        {
            type: "GET",
            url: "../functions/selectstate.php",
            data: { sta : state }
        }).done(function( html )
        {
            //$('#state').empty();
            //$('#state').append(html);
            $('#state').html(html);
            // you can use it insetead of the above two lines
        })
        //}<-- here is th problem remove this extra bracket
    });
</script>

Try using the below approach. It might help HTML Code:

<select id="country" name="country" onchange="updateState()">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<div id="stateDiv">
   <select id="state" name="state">
   <option value="1">State 1</option>
   <option value="2">State 2</option>
   <option value="3">State 3</option>
   </select>
</div>

JavaScript Code:

...
...
.done(function( result )
 {
   $('#stateDiv').html(result);
})
...
...

PHP Code:

...
...
echo '<select id="state" name="state">';
foreach($data as $row)
{
 echo "<option value=" . $row->state . ">" . $row->name . "</option>";
}
echo '</select>';
...
...

Need Your Help


About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.