Can't find Variable when called function from onClick

Question

I'm trying to call a function with an onClick command, but I get the error "Can't find variable" in the Safari console and no action is taken. I can't see any errors, but I must be missing something that is causing this to fail.

The link

<a href="JavaScript:void(0);" onclick="controlWallMonitor('layout','Playback');">Show playback layout</a>

The Javascript

<script type="text/javascript">
$(document).ready(function() {
    function controlWallMonitor(variable, option) {
        var WallMonitor = "10.0.50.163:9000";
        $.ajax({
            url: 'changelayout.php?target=' + WallMonitor + '&variable=' + variable + '&option=' + option,
        });
        return false;
    };
});

I'm sure it'll end up being incredibly obvious, but I have been googling and trying things for about 2 hours now and can't for the life of me see the problem.

Cheers.

Solution

Remove the $(document).ready call from around the function, all you have to do is put it after the jQuery script inclusion.

EDIT: Also, instead of using onclick, use a jQuery event handler:

HTML:

<a href="JavaScript:void(0);" class="playback">Show playback layout</a>

JS:

$(document).ready(function(){
    $("a.playback").click(function(){ controlWallMonitor('layout', 'Playback'); });
});

Comments

[teknetia]

That worked perfectly. Excuse me while I go die of embarrassment in the corner for not trying that!

[PitaJ]

@teknetia - No problem. See the edit, it's a better way to do things.