JQuery UI dialog not open by clicking

Yii 1.1 General Discussion
1

Please help, I have 2 JavaScritpt

Script#1

[b]$(’#helpDialog’).dialog({autoOpen:false});

$(’#helpIcon’).click(function(){

  $('#helpDialog').dialog('open');

});[/b]

This does not work.

Script#2

[b]$(’#helpDialog’).dialog({autoOpen:false});

$(’#helpDialog’).dialog(‘open’);[/b]

This does work

For Script#1 running,I have monitor the console of Google Chrome.

It shows error message

Uncaught TypeError: Object [object Object] has no method ‘dialog’

This error has occur even-through use dialog widget

Why? please help.

2

Hi Berzerk,

You need to check that jQuery and jQuery UI are being included in your page - you can do this by checking your source code for the following files:

jquery-ui.min.js

jquery.js

If they aren’t present, the dialog will not function.

3

I have attempt to open Help dialog after click the Help icon.

At first, I’ve use Yii widget for creating the dialog and compose the Jquery script for the Help icon clicked, to open dialog. I notice that all other Jquery script is working fine, except this. For investigating what happen, I use Jquery UI dialog method the create the dialog


$('#helpDialog').dialog({autoOpen:false}); 

$('#helpIcon').click(function(){ 

          $('#helpDialog').dialog('open'); 

});

Second, I change the dialog open method in the click function to the basic Javascript like alert(), It works.


$('#helpDialog').dialog({autoOpen:false}); 

$('#helpIcon').click(function(){ 

          alert('Help Message'); 

});

Third, I move the dialog open method out of the click function. The dialog shows after page load, that mean the Jquery UI works.


$('#helpDialog').dialog({autoOpen:false}); 

$('#helpDialog').dialog('open');

Why the dialog open method does not work in the click function?

I use Google Chrome Console to monitor the running result. It shows error message after click the Help icon.

[color="#FF0000"]Uncaught TypeError: Object [object Object] has no method ‘dialog’ [/color]

It’s wired. Please help

4

Sometimes the widget that you display in the dialog, overrides the dialog’s own scripts and then the dialog will not work and you get errors such as ‘dialog is not a function’.

One way of dealing with it is to ensure that the correct files are loaded - as georgebuckingham explained.

Another way is to insert an iframe between the dialog and the widget in the dialog. Iframes are treated by the browser as a separate page with its own scripts. So the scripts of the widget on top of the iframe, will be separate from the scripts of the dialog under the iframe. Check this wiki.