jQuery Ajax replaces the div by whole .php page -
i'm using jquery ajax function populating select box. here code:
$(function(){ $("#maker").change(function(){ var selected_value = $("#maker").val(); $.ajax({ type: "post", url: "search.php", data: ({_maker: selected_value}), success: function(response){ $("#models").html(response); } }); }); });
the problem replaces div "models" whole search.php page!!! want populate option values within "models".
here html:
<div id="models"> <select id="model" name="model" style="width:170px"> <option value="any">any</option> <?php foreach($current_models $model) { ?> <option value="<?php echo $model; ?>"><?php echo $model; ?></option> <?php } ?> </select></div>
any appreciated. in advance.
so looks you're returning entire html page, , not searching through find specific part of page. try this:
$(function(){ $("#maker").change(function(){ var selected_value = $("#maker").val(); $.ajax({ type: "post", datatype: "html", url: "search.php", data: ({_maker: selected_value}), success: function(response){ $("#models").html($(response).find('#somediv').html()); } error: function(){ $("#models").html('uh oh! went wrong , weren't able process request correctly.'); } }); }); });
you'll notice 2 things:
i specified
datatype
property. tell jquery expect. additionallyhtml
data type, tells jquery execute javascript on loaded page before rendering page response object.i'm creating jquery object using response, , using jquery's
.find()
method inner html of specificdiv
in response.
here example js fiddle, slight modifications proof of concept: http://jsfiddle.net/rvk44/1/
i wanted note may want add error property if page ever comes error, user knows , isn't sitting there staring @ blank screen expecting happen. (i've added basic error message in example, see jquery docs further info on error property returned).
Comments
Post a Comment