Call JQuery function from code behind (aside) ASP.Net and C#

Question

I need to disable JQuery tabs programmatically. The tabs are inside an update panel (Ajax) and the update panel is in an ASP.NET page. Code:

<link type="text/css" rel="stylesheet" href="http://ui.jquery.com/testing/themes/base/ui.all.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.core.js"&gt;&lt;/script&gt;

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.tabs.js"&gt;&lt;/script&gt;

<script type="text/javascript">

    $(document).ready(function(){
        $("#example").tabs();
    });


    function hidetabs(){
        $(document).ready(function(){
        $("#example").tabs();
        $('#example').data('disabled.tabs', [1, 2]);});
    }
</script>


<%@ Page Language="C#" MasterPageFile="~/any.Master" AutoEventWireup="true" Codebehind="anycode.aspx.cs"
    Inherits="anycode" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:UpdatePanel ID="UpdatePanel_Deal_Import" runat="server">
<ContentTemplate>
<div id="example">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>
First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre>

<asp:Button ID="btn_Save" OnClick="btn_Save_Click" runat="server" Text="Save" Visible="False" CommandName="Save">
</div>

<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer 
ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer 
aliquam erat volutpat.
</div>
</div>

      </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>


Code behind:

protected void btn_Save_Click(object sender, EventArgs e)
{
//here I need to diable the panels.

}

The function btn_Save_Click doesn’t post the page so it doesn’t call the Javascript/jquery hidetabs function. Thanks for any help!!!

Answer 1

Sounds like you need a button that has a client-side action instead of one that posts back.

<asp:Button ID="Clickable" runat="server" text="Click me" OnClientClick="JavascriptCall();" />

Additionally, while jQuery is generally backward compatible, it's not a good idea to reference jQuery's latest .js file directly. Instead I would download a version of it that you want, and place it statically on your site for direct reference of a known version. It is not good to add a dependency on the state or availability of a resource on an external site when not necessary.

Answer 2

Thanks Chris,

Actually yes, part of the solution is to call directly the javascript function, but instead of using a client-side control I called the Javascript once my UpdatePanel request is over as is explained in the following blog:

http://blog.jeromeparadis.com/archive/2007/03/01/1501.aspx

Now my code looks like:

<link type="text/css" rel="stylesheet" href="css/ui.all.css" />

    <script type="text/javascript" src="jquery-latest.js"></script>

    <script type="text/javascript" src="ui.core.js"></script>

    <script type="text/javascript" src="ui.tabs.js"></script>

    <script type="text/javascript">

    //enable tabs if a deal is selcted or saved.
    function EndRequestHandler(sender, args) {
        var rec_id = document.getElementById('<%=hidden_value.UniqueID %>').value;

        if (rec_id=="")
            hidetabs();
        else
            showtabs();
    }

    hidetabs();

    $(document).ready(function(){
        $("#rec_entry").tabs();
    });

    function hidetabs(){
        $(document).ready(function(){
        $("#rec_entry").tabs();
        $('#rec_entry').data('disabled.tabs', [1, 2, 3, 4, 5]);});
    }

    function showtabs(){
        $(document).ready(function(){
        $("#rec_entry").tabs();
        $('#rec_entry').data('disabled.tabs', []);});
    }

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    </script>

    ...html code add the tabs...

Code behind:

protected void btn_Save_Click(object sender, EventArgs e) {

        .... code to save the new record ........  

        UpdatePanel_mypanel.Update();
    }

after the panel is updated the EndRequestHandler evalues a flag (in this case a hiddenfield) and calls the Javascript function that enable or disable the tabs.

The endrequesthandler is controlled thanks to this sentence included in my javascript:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

I followed your advice of including the javascript files into my project. Thanks again!

Ixtlan