jQuery UI dialog box - uncaught exception -

jQuery UI dialog box - uncaught exception -

i have next jquery methods in page

<script type="text/javascript"> jquery.noconflict(); jquery.validator.setdefaults({ submithandler: function () { var usin = jquery('#usin').val(); var user = jquery('#user').val(); var ph = jquery('#ph').val(); var conductivity = jquery('#conductivity').val(); var hardness = jquery('#hardness').val(); var tds = jquery('#tds').val(); var turbidity = jquery('#turbidity').val(); var alkalinity = jquery('#alkalinity').val(); var chloride = jquery('#chloride').val(); jquery.post("scripts/water_qual_add.php", { "usin": usin, "user": user, "ph": ph, "conductivity": conductivity, "hardness": hardness, "tds": tds, "turbidity": turbidity, "alkalinity": alkalinity, "chloride": chloride }, function (data) { jquery('#dialog').dialog('open'); homecoming false; jquery('#eff_entry').each(function () { this.reset(); }); //jquery('#usin').focus(); }); } }); jquery(document).ready(function () { jquery("#dialog-message").dialog({ autoopen: false, modal: true, buttons: { ok: function () { jquery(this).dialog("close"); jquery('#usin').focus(); } } }); jquery("#datepicker").datepicker({ changemonth: true, changeyear: true, dateformat: "dd-mm-yy", altformat: "yy-mm-dd", altfield: "#stddate" }); jquery('#usin').focus(); jquery("#eff_entry").validate(); jquery("#usin").change(function () { var usin = jquery('[name="usin"]').val(); jquery.post("get_sample_details.php", { "usin": usin }, function (data) { if (data.msg) { // message_box.show_message(data.msg,'please come in valid no.'); alert(data.msg); jquery('#usin').focus(); } else { jquery('#submit_btn').show(); jquery('#comment').hide(); jquery('#doc').val(data.date); jquery('#desc').val(data.description); jquery('#loc').val(data.location); } }); }); }); </script>

and in body of page

<div id="content"> <div id="welcome">welcome&nbsp;&nbsp; <?php echo $_session[ 'empname']; ?> </div> <div id="dialog" class="dialog" title="water quality info entry"> <hr class="noscreen" /> <form id="eff_entry" name="eff_entry" action=""> <fieldset> <div id="rawdata"> <legend>water quality parameters</legend> <label for="usin">usin</label> <input name="usin" id="usin" type="text" class="usin" required/> <br /> <br/> <label for="ph">ph</label> <input name="ph" id="ph" value='0.0' required /> <label for="conductivity">conductivity</label> <input name="conductivity" id="conductivity" value='0.0' required /> <br /> <label for="tds">tds</label> <input name="tds" id="tds" value='0.0' required/> <br/> <label for="turbidity">turbidity</label> <input name="turbidity" id="turbidity" value='0.0' required /> <br/> <label for="chloride">chloride</label> <input name="chloride" id="chloride" value='0.0' required /> <br/> <label for="alkalinity">alkalinity</label> <input name="alkalinity" id="alkalinity" value='0.0' required /> <br /> <label for="hardness">hardness</label> <input name="hardness" id="hardness" value='0.0' required/> <label for="user">data entered by</label> <input id="user" name="user" style="color:#ff0000; background-color:#ffff33; font-weight:bold" onfocus="this.blur();" onselectstart="event.returnvalue=false;" value="<?php echo $_session['empno']; ?>" /> <br/> <br/> <div align="center"> <input id="submit_btn" type="submit" name="submit" value="submit" /> </div> </div> <div id="calculated"> <label for="loc">location</label> <input readonly="readonly" name="loc" id="loc" /> <br/> <label for="desc">type</label> <br/> <input readonly="readonly" name="desc" id="desc" /> <br/> <label for="doc">date of collection</label> <br/> <input readonly="readonly" name="doc" id="doc" /> <br/> </div> </fieldset> </form> <div id="type2"></div> </div> </div> <!--end content --> <!--end navbar --> <div id="siteinfo"> <?php include( 'footer.php');?> </div> <br /> </div>

but after clicking submit button, dialog box not opening. error console gives message "uncaught exception: cannot phone call methods on dialog prior initialization; attempted phone call method 'open'".

also unable focus cursor in usin input box. before trying simple alert() method in jquery post instead of modal dialog. alert working, focus not working @ time also. hence thought using modal help.

either way, (using jqueryui modal or alert) want cursor in usin input box after submitting form. rest of parts working including info update

if finish html within body, don't have element of id dialog-message , perchance initialised dialog on wrong selector , hence error when seek open dialog.

as per code:

jquery("#dialog-message").dialog({ autoopen: false, modal: true, buttons: { ok: function () { jquery(this).dialog("close"); jquery('#usin').focus(); } } });

you should replace selector:

jquery("#dialog").dialog({ autoopen: false, modal: true, buttons: { ok: function () { jquery(this).dialog("close"); jquery('#usin').focus(); } } });

doing not throw error when open dialog using:

jquery('#dialog').dialog('open');

here working demo: http://jsfiddle.net/lotusgodkk/gcu2d/193/

modifications:

i changed selector in jquery('#dialog-message').dialog('open');

added temporary dialog div seemed missing:

<div id="dialog-message">hello</div>

and worked fine.

jquery jquery-ui uncaught-exception