Javascript and Jquery No Conflict function on Link Click

Question

I am needing to run jQuery in no conflict mode. I have a link that when clicked opens a dialog function. In the console I receive an error which states - 'Uncaught ReferenceError: show_appeal_dialog is not defined'

Here is the link:

<a style='color:blue;' href='javascript:void(0)' onclick='show_appeal_dialog(33558)'>Denied</a>

Here is the jquery:

var $j = jQuery.noConflict();

$j(function(){
function show_appeal_dialog(ponumber){
$j("#appeal_dialog").dialog({
        title: 'Appeal Notes',
        modal: true,
        width: 660,
        height:250,
        open: function() {
            $j(this).html(ponumber);
        },
        buttons: {
            Ok: function() {
            $j(this).dialog("close");
            }
        }
});
}
});

I have tried to replace the $j with just jQuery and also changed the var $j(function) and also removing the $j(function) and just using javascript.

Answer 1

Your issue is that you have defined the show_appeal_dialog in document ready handler scope.

You should get rid of ugly inline click handler like

 var $j = jQuery.noConflict(); $j(function() { function show_appeal_dialog(ponumber) { $j("#appeal_dialog") .html(ponumber) .dialog({ title: 'Appeal Notes', modal: true, width: 660, height: 250, autoOpen: true, buttons: { Ok: function() { $j(this).dialog("close"); } } }); } $j(".anchor").click(function() { show_appeal_dialog($j(this).data("popnumber")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <a class="anchor" data-popnumber="33558" style='color:blue;' href='#' >Denied</a> <div id="appeal_dialog" style="display:none;"></div> 

Answer 2

Because scoping is the issue. You wrap it in a document ready call and that makes the function not available in global scope. It has nothing to do with no conflict mode.

Either get rid of the $j(function(){ wrapping the function or hook up events wthout the inline onclick attribute.