dialog is not a function error

Question

I have this JavaScript code which I use for question dialog:

// Question Dialog
function deletedialog(button, a){      
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $(button).closest("form").find("[id$=deleterow]").click();
                $(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}

But for some reason that I cannot find I get this error in Firebug:

TypeError: $(...).dialog is not a function  

and this row is highlighted

"Cancel": function(event) {

This problem occurs when I added this in the JSF head in order to prevent JQuery and Primefaces conflict:

<script type="text/javascript">
    $.noConflict();
</script>

How I can solve this problem?

Answer 1

The problem

The problem is that the $ symbol has been removed by using $.noConflict() function. Use jQuery instead.

Two solutions

This basically means you should write function calls like jQuery(this).dialog("close"); instead of $(this).dialog("close");.

To implement the change for the bigger piece of code, you can do it like that:

(function($){
    // ... old code using "$" instead of "jQuery"
})(jQuery);

Solution no. 1 - multiple replacements - example

The solution with replacing $(...) calls with jQuery(...) could look like this:

// Question Dialog
function deletedialog(button, a){      
    jQuery("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                jQuery(button).closest("form").find("[id$=deleterow]").click();
                jQuery(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                jQuery(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}

Solution no. 2 - enclosing code in anonymous function - example

This is based on the fact you can create anonymous function and pass jQuery to it, but assign it to the argument called $ - which will result in $ symbol available within the function as if it would happen before $.noConflict() call:

(function($){
    // Question Dialog
    function deletedialog(button, a){      
        $("<div />", {
            text: a
        }).dialog({        
            width: 600,
            buttons: {
                "Ok": function() { 
                    $(button).closest("form").find("[id$=deleterow]").click();
                    $(this).dialog("close");
                    button.value = "Processing...";
                    button.disabled = true;                  
                }, 
                "Cancel": function(event) { 
                    $(this).dialog("close");
                    event.preventDefault();
                    button.value = "Delete";
                    button.disabled = false;
                } 
            }
        });         
    }
})(jQuery);

Answer 2

Before $.noConflict();, $ is equal to jQuery.

After $.noConflict();, $ is equal to undefined.

This removes the $ shortcut to jQuery, and that is why it is not a function anymore. You typically only use $.noConflict(); when you add another javascript library that uses $. Your options are:

1. Don't use $.noConflict();.
2. Use $.noConflict(); and replace every $ with jQuery.
3. Use $.noConflict(); and wrap your code with (function($){ ... })(jQuery)

If you need to use $.noConflict();, I suggest using the third one. It remaps $ to jQuery by passing jQuery as a parameter. Using the code you posted, it may look something like...

(function($){

    // Question Dialog
    function deletedialog(button, a){      
        $("<div />", {
            text: a
        }).dialog({        
            width: 600,
            buttons: {
                "Ok": function() { 
                    $(button).closest("form").find("[id$=deleterow]").click();
                    $(this).dialog("close");
                    button.value = "Processing...";
                    button.disabled = true;                  
                }, 
                "Cancel": function(event) { 
                    $(this).dialog("close");
                    event.preventDefault();
                    button.value = "Delete";
                    button.disabled = false;
                } 
            }
        });         
    }

})(jQuery)