Can I change Jquery-ui active tab on button click from code behind?

StackOverflow https://stackoverflow.com/questions/20323857

Вопрос

I have implemented Jquery tab like this article as I want this functionality. But I also want to change active tab on button click (say 'save') from code behind when my records are saved successfully.

How can i do this on server click something like,

onclick='$("#tabs").tabs("option", "active", 2);'

Sample HTML Code : 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <script src="http://code.jquery.com/jquery-1.10.0.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $('#tabs').tabs({
                activate: function () {
                    var newIdx = $('#tabs').tabs('option', 'active');
                    $('#<%=hidLastTab.ClientID%>').val(newIdx);

                }, heightStyle: "auto",
                active: previouslySelectedTab,
                show: { effect: "fadeIn", duration: 1000 }
            });

        });
 </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:900px; margin:0 auto">
    <div id="tabs" style="margin:0 auto;  margin-bottom:2px;">
    <ul>
        <li><a href="#tabs-1">STATE TRACKING</a></li>
        <li><a href="#tabs-2">ICONS</a></li>
        <li><a href="#tabs-3">Effects</a></li>

    </ul>
    <div id="tabs-1">
    <strong>STATE TRACKING</strong>
        <p>This is first tab.</p>
    </div>
     <div id="tabs-2">
     <strong>ICONS</strong><p>
     Note : Remains on same tab after postback if I check/uncheck checkbox.
    </p>
    <asp:CheckBox ID="CheckBox1" runat="server"  AutoPostBack="true" Text="Hi"/>
    <br />
    <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
    </div>

      <div id="tabs-3">
    <strong> The jQuery UI effects</strong><p>
    This is third tab.
    </p>
    </div>

  </div>
  <asp:HiddenField ID="hidLastTab" Value="0" runat="server" />
  </div>

    </form>
</body>
</html>

My Sample Code behind :

protected void Page_Load(object sender, EventArgs e)
{
    String hiddenFieldValue = hidLastTab.Value;
    StringBuilder js = new StringBuilder();
    js.Append("<script type='text/javascript'>");
    js.Append("var previouslySelectedTab = ");
    js.Append(hiddenFieldValue);
    js.Append(";</script>");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "acttab", js.ToString());
}

protected void btnSave_Click(object sender, EventArgs e)
{
    // Code goes here for Insert/Update on btnSave_Click()
    // After Insert/Update successfully, I have to select next tab (i.e. 3rd tab)
}
Это было полезно?

Решение

You simply need to run the same script you're using on client side, injecting it from server side.

To do this, simply use Page.RegisterStartupScript Method. This will execute the injected script after the page has been completely loaded in client side.

If you're using a recent version of the framework, use ClientScriptManager.RegisterStartupScript.

As you can see in the linked reference pages, it's very easy to use: simply call the method passing the script as an string parameter, and it will be executed on the client side.

Please, note that there are overloads that allow to introduce the <script> tags automatically, and others where you need to type the script tags.

For example, if you use this code on server side, the alert will be executed on the client side (you'll see the "Hello World!" dialog on your browser):

string script = "<script type=text/javascript> alert('Hello World!'); <script>");
ClientScriptManager cs = Page.ClientScript;
cs.RegisterStartupScript(cstype, csname1, cstext1.ToString());

NOTE: cstype and csname are used to allow to register more than one script on the page. If you register more than one script the combination of both should be different for each script. If not, you'll overwrite the same script. You can set this values to whatever you want, but you'll usualy do this:

cstype = this.GeType(); // the type of the current page or user control
csname = "MyKey"; // a key defined by you, specific to this particular script

To adapt it for your cas, simply set the 'script' var value to the tabs script that you want to run on the client side, i.e.:

string script = "<script type=text/javascript>$('#tabs').tabs('option', 'active', 2);</script>";

Note that you can use single quotes on the javaScript code to make it easier to include them in the server side string.

Natyurally, you'll have to include this code in your button clicked handler btnSave_Click(...)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top