I am reading about AJAX in jQuery in the book jQuery in Action. There is some code which loads html into a div with an onchange event in a select dropdown. Using $.get
looks like this:
$(function() {
$('#bootChooserControl').change(function(event){
$.get(
'/fetch_product_details',
$(this).serialize()
);
});
});
I have my controller respond to JavaScript:
fetch_product_details.js.erb
$('#productDetailPane').html('<%= j render "product_details" %>');
Now the next example switches to $.load
and looks like this:
$('#bootChooserControl').change(function(event){
$('#productDetailPane').load(
'/fetch_product_details',
$(this).serialize()
});
But for some reason the #productDetailPane
is now filled with the following text:
$('#productDetailPane').html('
Item name:<\/label> Chippewa 17-inch Engineer Boot
<\/div>
SKU:<\/label> 7141832
<\/div>
Height:<\/label> 17 inches
<\/div>
Colors:<\/label> Black Oi
...
Just curious why the $.load
function does not interpret the JavaScript?