[jQuery] [ajaxForm] Loading Dynamic Data Best Practices
RIght now I have a page that has a search box that uses the
autocomplete plugin. When the form is submitted using the ajaxForm
plugin, the server sends back HTML code with jQuery mixed in. This
seems to work alright in Firefox, but in IE the javascript goes
unnoticed. The results are sometimes unpredictable in FF as well.
Is it bad practice to load javascript this way? I tried putting the
javascript in the ajaxForm's 'success:' method so that it would be
called after the post was made, but this doesn't make IE recognize it
either.
Here is the server response that get's directly loaded in a tab via
the ajaxForm plugin's 'target:' method.
I have nearly identical code in another tab that inserts new objects
into the database. The particular code below allows you to edit
entries. The tab that let's you add is hardcoded when the page loads
initially, however, instead of being loaded dynamically like this
below.
--------------------------
mypage.php
--------------------------
<script type="text/javascript">
$(document).ready(function(){
$('#update_inventory').validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
target: '#inventory_system_details',
success: parseDbResponse
});
},
debug: true,
errorElement: "em",
errorContainer: $("#warning2, #summary2"),
errorPlacement: function(error, element) {
error.appendTo( element.parent("span").next("span") );
},
success: function(label) {
label.text("ok!").addClass("success");
}
});
$('#prop_no2').blur( function(){
$('#prop_no_status2').load("system/test_prop_no", {prop_no: $
('#prop_no2').val()} );
});
$('#hostname2').blur( function(){
$('#hostname_status2').load("system/test_hostname", {hostname: $
('#hostname2').val()} );
});
$('#frmClearButton2').click( function(){
//reset model numbers
$('#model2').attr("disabled", "disabled");
$('#model2 option:selected').text("select model");
//clear status messages
$('#prop_no_validation_msg2').html('');
$('#hostname_validation_msg2').html('');
$('#vendor_validation_msg2').html('');
});
});
function parseDbResponse(responseText, statusText){
$("#inventory_system_details").html(responseText);
$('#frmClearButton2').click();
}
function addEditHandlers()
{
$("input[name='edit']").click(
function()
{
$(".readclass").removeClass("readclass").addClass
("editclass").removeAttr("disabled");
$("input[name='edit'] , input[name='done']").toggle
();
}
);
}
function addDoneHandlers()
{
$("input[name='done']").click(
function()
{
$(".editclass").removeClass("editclass").addClass("readclass").attr
("disabled","true");
$("input[name='edit'] , input[name='done']").toggle
();
}
);
}
$(function()
{
addEditHandlers();
addDoneHandlers();
});
</script>
<div class="sampleTabContent ui-tabs-panel"
id="inventory_system_details">
<style type="text/css">.dp_embed + img { position: relative; left:
-21px; top: -1px; }</style>
<style>
input.readclass {
border-width:0px;
background-color: white;
color: black;
}
input.editclass {
border-width:1px;
}
</style>
<span>
<form id="update_inventory" method="post" action="index.php/system/
update">
<div>
<div class="leftcol">property number*</div>
<span>
<input type="text" readonly="readonly" class="readclass"
id="prop_no2" validate="required:true" value="20043005345"
name="prop_no"/> </span>
<span id="prop_no_validation_msg2"/>
<span id="prop_no_status2"/>
</div>
<div>
<div class="leftcol">barcode*</div>
<span>
<input type="text" readonly="readonly" class="readclass"
id="barcode2" validate="required:true, digits:true" value=""
name="barcode"/> </span>
<span id="barcode_validation_msg2"/>
<span id="barcode_status2"/>
</div>
<div>
<div class="leftcol">hostname*</div>
<span>
<input type="text" readonly="readonly" class="readclass"
id="hostname2" validate="required:true" value="hank" name="hostname"/