Wednesday, June 16, 2010

Call jQuery from Javascript function

Have you ever come accross a situation where you need to call Jquery from or within a Javascript function? Well, it's not that tough either. You can directly write your jQuery code within a JavaScript function. See below code.

I have placed a button on my page which makes a call to a Javascript function "Test()".
<asp:Button ID="btnName" runat="server" Text="Change CSS" 
OnClientClick="return Test();" />
Here is Javascript.
<script type="text/javascript" language="javascript">  
function Test()
    {
        $(document).ready(function(){
            $("#btnName").css("color","red");
        });
        return false;
    }
   
</script>
In the function Test, we can directly write "$("#btnName").css("color","red");", Instead of putting this in document.ready function. It will work in case of a small page but when the page is heavy and it's not completely loaded and you click on button, then it's quite possible that you can get an error of undefined object.

It's a best practice to always put your jQuery code in $(document).ready() function as this gives the assurance that DOM is fully loaded.

Feel free to contact me for any help related to jQuery, I will gladly help you.