Results 1 to 12 of 12

Thread: [RESOLVED] How to stop jquery tabs from refreshing

  1. #1

    Thread Starter
    Frenzied Member dolot's Avatar
    Join Date
    Nov 2007
    Location
    Music city, U.S.A.
    Posts
    1,253

    Resolved [RESOLVED] How to stop jquery tabs from refreshing


    So I have these two tabs on a jquery tab widget. Each one is populated via an ajax call to the server. When I switch from tab1 to tab2, and then back to tab1, everything I had entered on tab1 is gone and it goes back to its default state that it has when first loaded. From what I've found online, most folks like this behavior, but I don't. I want the tab to load once and then stay static even if the user switches from one tab to the next and back again.

    The jquery code I have for the tabs is very simple:
    Code:
        <script type="text/javascript" >
    
            $(function () {
                $("#tabs").tabs();
            });
    
        </script>
    Here's the div that defines the tabs:
    HTML Code:
         <div id="tabs">
            <ul>
                <li><a href="/views/home/GetBasicFacilityInfo/@Model.FacilityID">Basic Info</a></li>
                <li><a href="/views/home/GetExplosiveInfo/@Model.FacilityID">Explosives</a></li>
            </ul>
        </div>
    Last edited by dolot; Jul 16th, 2014 at 12:11 PM. Reason: typo
    I always add to the reputation of those whose posts are helpful, and even occasionally to those whose posts aren't helpful but who obviously put forth a valiant effort. That is, when the system will allow it.
    My war with a browser-redirect trojan

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    Re: How to stop jquery tabs from refreshing

    So, i was starting my answer when i saw @Model. So yeah, i don't know but since i started i may as well do a bump for you.BUMP.
    And again post on MVC!!! Or not but JMC lurks on MVC.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3

    Thread Starter
    Frenzied Member dolot's Avatar
    Join Date
    Nov 2007
    Location
    Music city, U.S.A.
    Posts
    1,253

    Re: How to stop jquery tabs from refreshing

    Well, I figure you could take out the @model and just put in a hard coded link and the issue would be the same. I don't really think it's an mvc-related issue.
    I always add to the reputation of those whose posts are helpful, and even occasionally to those whose posts aren't helpful but who obviously put forth a valiant effort. That is, when the system will allow it.
    My war with a browser-redirect trojan

  4. #4
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,522

    Re: How to stop jquery tabs from refreshing

    Don't have any experience with MVC, and only a little with JQuery... but those look like full page refreshings that are happening...seems to me, I'd expect to find some sort of onClick event to hide/show the tabs... that's just my somewhat uneducated guess.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  5. #5

    Thread Starter
    Frenzied Member dolot's Avatar
    Join Date
    Nov 2007
    Location
    Music city, U.S.A.
    Posts
    1,253

    Re: How to stop jquery tabs from refreshing

    I'm about as uneducated as you are on this one, tg.
    I always add to the reputation of those whose posts are helpful, and even occasionally to those whose posts aren't helpful but who obviously put forth a valiant effort. That is, when the system will allow it.
    My war with a browser-redirect trojan

  6. #6
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,522

    Re: How to stop jquery tabs from refreshing

    OH great... so it's the blind leading the blinder... well we're off to a great start here...


    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  7. #7
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    Re: How to stop jquery tabs from refreshing

    So, ok, since you say it's not MVC issue let's treat it like an ASP.NET issues shall we?
    Changing tabs is client side.Unless you specify something code wise in client side the values shouldn't change.The tab changing is happening client side so the server would not have a clue on what is going on. So if you have textboxes on the tab, for example and change their values, tabbing back and forth should not change any value.
    So changing value in the below example will keep the values even if you tab around:
    (grrr the usual code tags i have to put myself...)
    Code:
     
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
       <meta charset="utf-8">
    <title>jQuery UI Tabs - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>
    </head>
    <body>
         <form id="form1" runat="server">
    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">TAB1</a></li>
    <li><a href="#tabs-2">TAB2</a></li>
    <li><a href="#tabs-3">TAB3</a></li>
    </ul>
    <div id="tabs-1">
    <p>Textbox server <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </p>
        <p> textbox client <br />
        <input type="text" id="x1" />
            </p>
    </div>
    <div id="tabs-2">
    <p>Hi i am tab 2, i really hate Microsoft MVC and everything it stands for!</p>
    </div>
    <div id="tabs-3">
    <p>Tab3 here. Do not listen to tab2, MVC is a wonderful thing and Microsoft is the best company in the word.And donkeys can fly!</p>
    </div>
    </div>
             </form>
    </body>
    </html>
    Last edited by sapator; Jul 17th, 2014 at 03:29 AM.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  8. #8
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,522

    Re: How to stop jquery tabs from refreshing

    Code:
    <ul>
    <li><a href="#tabs-1">TAB1</a></li>
    <li><a href="#tabs-2">TAB2</a></li>
    <li><a href="#tabs-3">TAB3</a></li>
    </ul>
    Now that's more like what I was expecting... not full URL syle href... that's why I think everything is being lost, it's actually doing a full page refresh, not simply switching from one tab to the other.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  9. #9
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    Re: How to stop jquery tabs from refreshing

    Good call. I've missed that.
    Are you trying to do a multitab tab that will have your pages in each tab?
    I think that is hell raising. I'm not sure if a dirty iframe solution will do that or if there is a tool but the logic i see is design
    one page with all the data from the 3 pages and stuff each data portion to a tab.
    It can certainly be done in ASP.NET with client side code. Now in MVC...Don't know how multiple @html and controllers and model calls will react.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  10. #10
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,522

    Re: How to stop jquery tabs from refreshing

    I've done it before with MVC (NOT MS MVC though!), but with div tags... on the main page, the I'd have a div tag, a span inside it for the label, and then an empty div tag. The AJAX then would make a call to the controller to get the data/tab and then inject it into div tag. The first one would be visible, the rest hidden. Then as each span is clicked, it would turn off the other divs & turn on the div linked to the span.

    That said, I was coding it myself, not using a drop in widget ... if I were to do it today, I'd probably would use an existing widget ...

    On a related note... it looks like a mix of what I was mentioning - the href being a full link - and sap is saying - the tab contents need to be in the form - is what is needed:
    http://api.jqueryui.com/tabs/
    html Code:
    1. <div id="tabs">
    2.   <ul>
    3.     <li><a href="#fragment-1">One</a></li>
    4.     <li><a href="#fragment-2">Two</a></li>
    5.     <li><a href="#fragment-3">Three</a></li>
    6.   </ul>
    7.   <div id="fragment-1">
    8.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    9.   </div>
    10.   <div id="fragment-2">
    11.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    12.   </div>
    13.   <div id="fragment-3">
    14.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    15.   </div>
    16. </div>

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  11. #11

    Thread Starter
    Frenzied Member dolot's Avatar
    Join Date
    Nov 2007
    Location
    Music city, U.S.A.
    Posts
    1,253

    Re: How to stop jquery tabs from refreshing

    OK. So here's what I came up with after staring at ya'll's comments and thinking about it. I start by defining the tabs and div's like such:
    HTML Code:
    <div id="tabs">
            <ul>
                <li><a href="#tab-1">Basic Info</a></li>
                <li><a href="#tab-2">Explosives</a></li>
            </ul>
             <div id="tab-1"></div>
             <div id="tab-2"></div>
        </div>
    Then I use sure enough ajax to load the data into the div's when I create the tabs:
    HTML Code:
    <script type="text/javascript" >
    
            $(function () {
                $("#tabs").tabs();
                $("#tab-1").load("/views/home/GetBasicFacilityInfo/@Model.FacilityID");
                $("#tab-2").load("/views/home/GetFacilityExplosiveInfo/@Model.FacilityID");
            });
        
        </script>
    This allows me to maintain my marvelous Microsoft MVC view structure.

    Thanks for the help, folks - see, tg, you aren't as blind as you thought.
    I always add to the reputation of those whose posts are helpful, and even occasionally to those whose posts aren't helpful but who obviously put forth a valiant effort. That is, when the system will allow it.
    My war with a browser-redirect trojan

  12. #12
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,522

    Re: How to stop jquery tabs from refreshing

    Quote Originally Posted by dolot View Post
    Thanks for the help, folks - see, tg, you aren't as blind as you thought.
    Even 1000 blind monkeys get lucky once in a while.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width