CODEWITHSUNDEEP
ajaxjquery
aya
aya

Reputation: 1613

how use jquery in response of ajax

i use jquery-ajax and have three file. my file is :

jquery-1.8.3.min.js

index.html

res.html

jquery-1.8.3.min.js file is main of jquery file.
index.html code is : 

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({url:'res.html',type:"POST",data:'',success:function(result){
                        $("#responsediv").html(result);
                    }
                });
            });
            $(document).ready(function(){
                $('#state_id').change(function(){
                    alert($(this).val());
                });
            });
        </script>
    </head>
    <body>
        <div id="responsediv">

        </div>
    </body>
</html>

and res.html code is : 

<select id="state_id" name="state_id">
    <option value="1">first</option>
    <option value="2">second</option>
    <option value="3">third</option>
    <option value="4">forth</option>
</select>

i don't know why this code not runnig.

$(document).ready(function(){
    $('#state_id').change(function(){
        alert($(this).val());
    });
});

this is sample and simple code . i check this on another project and face this problem. thanks.

Upvotes: 0

Views: 281

Answers (3)

Blazanor
Blazanor

Reputation: 175

You are missing the select box for countries in your HTML. Try modifying as follows:

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({url:'res.html',type:"POST",data:'',success:function(result){
                        $("#responsediv").html(result);
                    }
                });

                $('#country_id').change(function(){
                    alert($(this).val());
                });
            });
        </script>
    </head>
    <body>
        <select id="country_id">
            <option value="0">Select Country...</option>
            <option value="1">Country One</option>
            <option value="2">Country Two</option>
        </select>
        <div id="responsediv">

        </div>
    </body>
</html>

Upvotes: 0

Jai
Jai

Reputation: 74738

I think this should be here:

<script type="text/javascript">
        $(document).ready(function(){
            $.ajax({url:'res.html',type:"POST",data:'',success:function(result){
                    $("#responsediv").html(result);
                }
            });
            $(document).on('change', '#country_id', function(){
                alert($(this).val());
            });
        });
</script>

note:

you don't need two doc ready handlers.

try this and see if this helps.

Upvotes: 1

qooplmao
qooplmao

Reputation: 17759

There doesn't seem to be an element in your html that $('#country_id') would reference.

Upvotes: 0

Related Questions