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"/
> </span>
<span id="hostname_validation_msg2"/>
<span id="hostname_status2"/>
</div>
<div>
<div class="leftcol">alias</div>
<span><input type="text" value="" name="alias"/></span>
</div>
<div>
<div class="leftcol">vendor*</div>
<span><select title="You Must Select a Vendor."
validate="required:true, min:1" id="vendor2" name="fk_vendor_id">
<option value="0">select vendor</option>
<option value="4">3com</option>
<option value="68">Acordex Imaging Systems</option>
<option value="64">Addonics</option>
<option value="37">Amer Power</option>
<option value="52">Andatco</option>
<option value="15">APC</option>
<option value="48">Apex</option>
<option value="11">Apple</option>
<option value="58">aViV</option>
<option value="19">Avocent</option>
<option value="63">Bask Computers</option>
<option value="45">Bell</option>
<option value="25">Boost</option>
<option value="66">Brocade</option>
<option value="61">Brooktrout</option>
<option value="53">Canon</option>
<option value="51">Castelle</option>
<option value="10">Compaq</option>
<option value="18">COMPOSERPRO</option>
<option value="67">Corsa</option>
<option value="1">CWI</option>
<option value="33">DEC</option>
<option value="6">Dell</option>
<option value="12">Dell Inspiron</option>
<option value="44">Deskpro</option>
<option value="43">Digital</option>
<option value="62">Dolch</option>
<option value="72">Epson</option>
<option value="60">FLUKE</option>
<option value="30">Foundry</option>
<option value="20">Gateway</option>
<option value="3">Gateway 2000</option>
<option value="27">Hewlett Packard</option>
<option value="8">HP</option>
<option value="26">HPC</option>
<option selected="selected" value="22">IBM</option>
<option value="28">identity engines</option>
<option value="46">InFocus</option>
<option value="47">Juniper</option>
<option value="56">Kodak</option>
<option value="41">Lanier</option>
<option value="16">Lantronix</option>
<option value="69">McData</option>
<option value="34">NCD</option>
<option value="65">NETOPTICS</option>
<option value="29">Nexsan</option>
<option value="9">PENDING</option>
<option value="50">Penguin Computing</option>
<option value="31">Peripheral Land</option>
<option value="23">Power Connect</option>
<option value="57">Primera</option>
<option value="14">Qualstar</option>
<option value="49">R Squared</option>
<option value="17">Relion</option>
<option value="42">SGI</option>
<option value="55">Sharp</option>
<option value="54">Shart</option>
<option value="32">Shiva</option>
<option value="71">Siemens</option>
<option value="59">SIForce</option>
<option value="39">Silicon Graphics</option>
<option value="24">Sonicwall</option>
<option value="5">Sony</option>
<option value="2">Sun</option>
<option value="13">Tally</option>
<option value="38">Telcom Tech</option>
<option value="35">Telcom Technology</option>
<option value="36">Texas Instruments</option>
<option value="40">Toshiba</option>
<option value="7">unknown</option>
<option value="70">Wrightline</option>
<option value="21">Zire</option>
</select></span>
<span id="vendor_validation_msg2"/>
</div>
<div>
<div class="leftcol">model</div>
<span><select id="model2" name="fk_model_no">
<option value="0">select model</option>
<option value="3551">DS3200</option>
<option value="3382">e Server x Series 346</option>
<option value="3374">E326</option>
<option value="3554">P550</option>
<option value="3367">ThinkPad 600E</option>
<option value="3361">X SERIES 346</option>
<option value="3385">x206</option>
<option value="3561">x3350</option>
<option value="3341">X345</option>
<option value="3549">X3455</option>
<option value="3339">X365</option>
<option value="3550">X3755</option>
<option value="3335">xSERIES 335</option>
</select><span/></span>
</div>
<div>
<div class="leftcol">tracking number</div>
<span><input type="text" value="0500491"
name="tracking_no"/></span>
</div>
<div>
<div class="leftcol">date installed</div>
<span>
<input type="text"
readonly="true" id="date_installed2" value=""
name="date_installed" class="hasDatepicker dp_embed"/><img class="ui-
datepicker-trigger" src="/inventory/img/calendar.gif" alt="..."
title="..."/> </span>
</div>
<div>
<div class="leftcol">group</div>
<span><select disabled="" id="group2" name="fk_group_id">
<option value="0">select group</option>
</select></span>
</div>
<div>
<div class="leftcol">date purchased</div>
<span>
<input type="text"
readonly="true" id="date_purchased2"
value="03/17/2009" name="date_purchased" class="hasDatepicker
dp_embed"/><img class="ui-datepicker-trigger" src="/inventory/img/
calendar.gif" alt="..." title="..."/> </span>
</div>
<div>
<div class="leftcol">date received</div>
<span>
<input type="text"
readonly="true" id="date_received2"
value="08/10/2004" name="date_received" class="hasDatepicker dp_embed"/
><img class="ui-datepicker-trigger" src="/inventory/img/calendar.gif"
alt="..." title="..."/> </span>
</div>
<div>
<div class="leftcol"/>
<span>
<input type="button" value="Edit" name="edit"/>
<input type="button" style="display: none;" value="Done"
name="done"/
>
<span><input type="reset" id="frmClearButton2" value="clear"
name=""/
></span>
</span></div>
</form></span>
</div>
