tags:

views:

862

answers:

2

I'm very new to jQuery and trying to run a pretty simple jQueryUI dialog box in my PHP application. In firebug console I get the error:

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

Here is my code:

$(function() {
$( "#dialog" ).dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode"
});

$( "#opener" ).live('click',function() {
    $( "#dialog" ).dialog( "open" );
    return false;
});
});

I did some googling on the error and not much turned up, except that jquery.ui.js is generating the error with:

if ( isMethodCall ) {
this.each(function() {
var instance = $.data( this, name );
if ( !instance ) {
throw "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'";
                                    } ...
...

Any ideas? I appreciate any help on what this error message is and how to resolve it.

UPDATE: I tried commenting out the show/hide options and that did not have any effect on my problem. Below is the HTML:

 <div class="demo">

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>

</div><!-- End demo -->

This HTML is included in a PHP file, which is INCLUDEd in another PHP file :).

A: 

OK, it had to do with the fact that I was putting the dialog DIV on a PHP file that hadn't been loaded yet at the time my JS was loaded. So I moved the DIV for the dialog box up to a higher page, and the button works on any page throughout my app now. I hope this helps someone else.

@user410341 - Glad you figured it out (and happy I could help with the other problem). If you want, you can accept your own answer to this question to help people in the future quickly find answers. :-)
JasCav
A: 

Problem Solved

Look at my file arranement in master page

JQuery Auto Compelete

' type="text/javascript">
<script src='<%= Page.ResolveClientUrl("~/Admin/jsLib/jqueryAutocomplete/jquery.autocomplete.js") %>'  type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/Admin/jsLib/jqueryAutocomplete/lib/thickbox-compressed.js") %>' type="text/javascript"></script>

JQuery Datepicker

<script src='<%= Page.ResolveClientUrl("~/Admin/jscalender/jquery-ui.min.js") %>' type="text/javascript"></script>

Basically , I am using JQuery AutoComplete & Date Picker

Exception is coming in mozilla fire bug uncaught exception: cannot call methods on autocomplete prior to initialization; attempted to call method

It Will occur because of file conflict.

To Solve this problem, change the arragement of file like below

JQuery Datepicker

<script src='<%= Page.ResolveClientUrl("~/Admin/jscalender/jquery-ui.min.js") %>' type="text/javascript"></script>

JQuery Auto Compelete

' type="text/javascript">
<script src='<%= Page.ResolveClientUrl("~/Admin/jsLib/jqueryAutocomplete/jquery.autocomplete.js") %>'  type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/Admin/jsLib/jqueryAutocomplete/lib/thickbox-compressed.js") %>' type="text/javascript"></script>
sayyad khalid