Question

I have the following piece of code

<a onclick="$('#result').load('codes/test.html');$('#result').show();" >XHTML code</a>

it loads perfectly the content of test.html in the result div and also make it visible. Until this point all are good. When I try to add a function prettyPrint() which apply some modifications on the text and change the code to the following:

<a onclick="$('#result').load('codes/test.html');$('#result').show();prettyPrint();" >XHTML code</a>

I can’t make the prettyPrint() to work, instead if I add onmouseout="prettyPrint(); it works when I take off my cursor. I don’t have experience with javascript and jquery so I don’t know what is the real problem, so I would appreciate any help on how to make prettyPrint to work onclick.

Answer 1

If you are using jQuery why do you bother with inline Javascript? Why not:

<script type="text/javascript">
$(function(){
    $('#myLink').click(function(){
        $('#result').load('codes/test.html', function() {
            $('#result').show();
            prettyPrint();
        });

        return false;
    });
}):
</script>

<a id="myLink" href="#">XHTML code</a>

Edit:

Fixed code so it calls prettyPrint() when load callback is called.