How to fix this jQuery Scope mistake?

Something I'm not able to figure out in this code, I think it's a scoping issue.

I have the following javascript snippet

<javascript language="javascript>
    $(function() {
        $("#dialog").dialog({
            autoOpen: false
        });

        function getMessage(direction, msgId) {
            re开发者_C百科turn "This is an " + direction + " message with ID: " + msgId;
        }

        function showMessage(direction, msgId) {
            $("#dialog").text(getMessage(direction, msgId));
            $("#dialog").dialog('open');
        }
    });
</script>

That I want to call it like the following

<div id="dialog" title="Message Info"></div>
<input type="button" id="btnCommand1" value="Command 1" onclick="javascript: showMessage('Outgoing', 1000487874')" />
<input type="button" id="btnCommand2" value="Command 2" onclick="javascript: showMessage('Incoming', 2000237851')" />

I understand that I can bind the click event through jQuery also but because I create those buttons dynamically I need to call it like mentioned above. The problem I get an error that showMessage() is not defined. I found that, in general, methods defined within jQuery scope $(function(){}) are not accessible from outside this scope! how to solve this?

javascript:

That is a label and doesn't mean "This is JavaScript code". You specify that onclick attributes contain JavaScript with meta data.

because I create those buttons dynamically I need to call it like mentioned above.

That is a false premise.

I found that in general methods defined within jQuery scope $(function(){}) are not accessible from outside this scope! how to solve this?

Move the functions outside that anonymous function

You needn't put everything inside the the $() ready handler. The is really just for stuff essential for knowing the page is ready.

Late-binding is good, however, so let's get it working. How would we solve this?

Bind in the jQuery $() function using live():

$(function(){
    ....
    function showMessage(direction, msgId) {
        $("#dialog").text(getMessage(direction, msgId));
        $("#dialog").dialog('open');
    }

    $("#button1").live("click", function(){
        showMessage('Outgoing', 1000487874);
    });
});

If the parameters are dynamic, you can include them as data attributes:

<input type="button" id="btnCommand1" value="Command 1" data-param1="Outgoing" data-param2="1000487874" />

And access them like so:

    $("#button1").live("click", function(){
        showMessage($(this).attr("data-param1"), $(this).attr("data-param2"));
    });

I've also noticed a small error in your HTML onlick attribute, with one extra quote at the end of the number:

onclick="javascript: showMessage('Outgoing', 1000487874')"
//should be:
onclick="javascript: showMessage('Outgoing', 1000487874)"
//or:
onclick="javascript: showMessage('Outgoing', '1000487874')"

Since you're calling from the global scope, the JS method needs to be in th same scope as well.

You have two options.

1. You can use jquery binding using .live so it doesn't matter whether it's dynamically created or not.

2. You can move the methods out of the $(function(){}) and into the global scope.