tab control postback using javascript

Question

0.00/5 (No votes)

See more:

I am using AjaxTabControl.

In first tab, I need to fill some data in TextBox.
If user clicks on second tab, he/she must remain in first tab until he/she completes filling the data in first tab.

For this, I am using a JavaScript.

HTML

<script type="text/javascript">
    $(document).ready(function () {
      $("#__tab_ctl02_TabPanel1").click(function (e) {
          e.preventDefault();
            if ($("#ctl02_Tab1_Txt1").val() == "" && $("#ctl02_Tab1_TextBox1").val() == "" && $("#ctl02_Tab1_TextBox2").val() == "") {
    
                $("#__tab_ctl02_TabPanel1").attr('disabled', 'disabled');
    //i tried by .attr method and below .disabled method non of it work for me
    //                    $("#__tab_ctl02_TabPanel1").disabled = true;
    
                alert("Empty..");
               
            }
            else {
                $("#__tab_ctl02_TabPanel1").removeAttr('disabled');
    //                    $("#__tab_ctl02_TabPanel1").disabled = false;
            }
        });
    });
</script>

Please any one help me ~~its urgent~~....

Posted 20-Sep-13 1:06am

Usha Sanjee

Updated 20-Sep-13 1:35am

v3

Add a Solution

Comments

Thanks7872 20-Sep-13 7:18am

At least format your code so that some one can understand it otherwise there won't be any suggestions.

Ashutosh Mahto 20-Sep-13 7:41am

Either you are not getting the correct element (due to changed values while rendering to browser) or there would be some exception occurring during execution. Please check firebug, chrome or IE Dev tools console for details.

Usha Sanjee 20-Sep-13 7:55am

no I'm geeting the alert which is in the click function but I'm not able to disable the tab.here I'm already clicking tabpanel1 so is this the reason I'm not able to disable this tab

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Sep-13 8:04am

Yes, that may be the case. Please do one thing.

Start FireBug in FireFox or any other developer tool. After clicking, check the FireBug Console Window. Is there any error?

Usha Sanjee 20-Sep-13 8:19am

No there were no errors in it

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Sep-13 9:33am

Okay. Can you create a jsFiddle for us? Just use the rendered HTML of page and the javaScript.

We can check that.

Ashutosh Mahto 20-Sep-13 11:00am

I am not sure about postback in your question. If its about restricting or controlling the tab changes from Client Side please refer to my answer.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ashutosh Mahto · Answer 1 · 2013-09-20T05:14:00

Hi Usha,

For restricting the tab changes in Ajax Tab Panel you can use the following code -

ASP.NET

<asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server" xmlns:asp="#unknown"></asp:toolkitscriptmanager>

    <div>
        <!-- OnClientActiveTabChanged attribute can be used to include client side interaction to tab changes -->
        <asp:tabcontainer id="TabContainer1" runat="server" onclientactivetabchanged="validateFormData" xmlns:asp="#unknown">
            <asp:tabpanel id="TabPanel1" headertext="Tab 1" runat="server">  
                <contenttemplate>  
                    <asp:textbox id="TextBox1" runat="server" clientidmode="static" />
                    <!-- clientIDMode="static" keeps the design time ID while rendering -->
                    <!-- Tab 1 content -->
                </contenttemplate>  
            </asp:tabpanel>  
            <asp:tabpanel id="TabPanel2" headertext="Tab 2" runat="server">  
                <contenttemplate>  
                    <!-- Tab 2 content --> 
                </contenttemplate>              
            </asp:tabpanel> 
        </asp:tabcontainer>
    </div>

And you can include a function in javascript -

JavaScript

<script type="text/javascript">
    function validateFormData() {

        //If user clicks on the second tab
        if ($find("TabContainer1").get_activeTabIndex() == 1)

            //check if the form controls are all ok
            if($('#TextBox1').val()== "") {

                    //if no value in textbox, set selected tab to Tab1 through index
                    alert('Please add value in textbox first then proceed'); 
                    $find("TabContainer1").set_activeTabIndex(0);
            }

        }
</script>

I hope this helps.
Thanks