jQuery UI dialog bo uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Vote count:

0

I have the following jQuery methods in a 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');
                    return 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 Enter a 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);}

});


    });



});

And in the body of the page

<div id="content">

<div id="welcome">Welcome&nbsp;&nbsp;<?php echo $_SESSION['EMPNAME']; ?></div>
 <div id="dialog" class="dialog" title="Water Quality Data 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, the dialog box not opening. Error console gives this message "uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'open'".

Also I am unable to focus cursor in the USIN input box. Earlier I was trying simple alert() method in jquery post instead of modal dialog. This alert was working, but focus was not working at that time also. Hence I thought using a modal will help.

Either way, (using jQueryUI modal or alert) I want the cursor to be in the USIN input box after submitting the form. Rest of the parts are working properly including data update

asked 1 min ago

mansoondreamz

42