Search code examples
javascriptjquery-uijquery-dialogjquery-load

('#').dialog is not a function error after using jQuery's .load() function

I have the following code:

<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id'=>'mydialog',
    // additional javascript options for the dialog plugin
    'options'=>array(
        'title'=>'Confirmar',
        'resizable'=>'false',
        'autoOpen'=>false,
        'modal'=>true,      
        'buttons'=>array('Eliminar'=>'js:function(){deleteMessage();$(this).dialog("close");}',
                         'Cancelar'=>'js:function(){$(this).dialog("close");}',),
    ),
));?>
<div style="display:none">Do you confirm you want to delete the item?</div> 
<?php 
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>

<input type="button" onclick="js:openDlg()" value="Open the dialog">
<script language="javascript" type="text/javascript">
    function openDlg(){
        $("#mydialog").dialog("open"); 
    }
</script>

This works PERFECTLY, until i needed to call jQuery's .load() function. For testing purposes, i have a button which calls the .load() method (although supposedly it should be called when the doc is ready). If i hit the open dialog button before clicking this trial button, the dialog opens correctly. Else, it fails with the following error:

$("#mydialog").dialog is not a function $("#mydialog").dialog("open");

Trial button:

<input type="button" onclick="js:load_wall()" value="Load Messages">
function load_wall(){
        var liga = $("#liga_id").val();
        $('#div_wall_messages').load('displayMessages',{liga_id: liga}, function(){

        });

Please, any help is more than welcome. This error is driving me crazy. thank you!!

Solution

  • What's displayMessages? Is it a page with scripts in it? Is it a page that includes another copy of jQuery? If you include a second copy of jQuery you will be overwriting your existing copy—possibly you are overwriting a jQuery that has the Dialog plugin loaded into it with a new one that doesn't.

    If you want to load into a div and what you've got in the file being loaded is a full page of HTML (including <head>, <script>s et al), then you should only load the fragment of content (by id) that you want into your target. In all cases avoid load()ing HTML content that contains <script>; the results are, depending on circumstance, either nothing, or nothing sensible.

    Also js: in all your code above does nothing and should be omitted.