asked on

Jquery onchange() with Dynamic Drop Down Query

Howdy Experts,

i'm having some weird issue trying to get the jquery onchange() to work with a dynamically created drop down list.

i'm grabbing the json data like below and creating the drop down
JSON String

 ["Ross Turner","Ray Paseur","Andrew Hancock","Simon Butler"]

Open in new window

However when i select an option in the list it's not hitting my alert. Is this a order of load issue ?

i've set up a non dynamic drop down and it fires the function fine.

Stumped, it must be monday!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<title>User Targets</title>
<script>
$.getJSON( 'api.php?Query=10', function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<option id='" + key + "'>" + val + "</option>" );
  });
 
  $( "<select>", {
    "id":"target",
    html: items.join( "" )
  }).appendTo( "#UserSelect" );
  
});
</script>

</head>
<body>
<div id ="UserSelect"></div>
<script>
 $("select").change(function(){
    alert("changed!");
  });
</script>
</body>
</html>

Open in new window

PatelRitesh

Here i have created dynamic drop down list using jquery and also fired OnChange() event of dynamically drop down list :

HTML Code :

<body>

    <form id="form1" runat="server">
           <div id ="UserSelect">
               

           </div>s
    </form>
</body>

Open in new window

Javascript/Jquery code :

<script type="text/javascript">

var jsonArr = ["Ross Turner", "Ray Paseur", "Andrew Hancock", "Simon Butler"];

$(document).ready(function() {

 var ddl = $("<select></select>");

            $.each(jsonArr, function (index, item) {

                var opt = $("<option></option>");
                opt.text(item);
                opt.val(item);

                ddl.append(opt);

            });

            $("#UserSelect").append(ddl);


            ddl.change(function () {

                alert($(this).val());

            });
});
</script>

Open in new window

Ray Paseur

...order of load issue ?

Probably. Why not wrap it in the document-ready function? If you don't wrap JavaScript into some kind of function call, the browser will start to run it as soon as it is encountered in the input stream, making the exact time of execution unpredictable.

Refs:
http://learn.jquery.com/about-jquery/how-jquery-works/
http://api.jquery.com/category/events/document-loading/
http://api.jquery.com/ready/

SOLUTION

PatelRitesh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial