# Other Languages > jQuery >  [RESOLVED] How to stop jquery tabs from refreshing

## dolot

:wave: 
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:


```
    <script type="text/javascript" >

        $(function () {
            $("#tabs").tabs();
        });

    </script>
```

Here's the div that defines the tabs:


```
     <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>
```

----------


## sapator

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.

----------


## dolot

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.

----------


## techgnome

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

----------


## dolot

I'm about as uneducated as you are on this one, tg.   :Wink:

----------


## techgnome

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


-tg

----------


## sapator

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...)


```
 
<%@ 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>
```

----------


## techgnome

```
<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

----------


## sapator

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.

----------


## techgnome

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:
<div id="tabs">  <ul>    <li><a href="#fragment-1">One</a></li>    <li><a href="#fragment-2">Two</a></li>    <li><a href="#fragment-3">Three</a></li>  </ul>  <div id="fragment-1">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div>  <div id="fragment-2">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div>  <div id="fragment-3">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div></div>

-tg

----------


## dolot

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:


```
<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:


```
<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.   :Big Grin: 

Thanks for the help, folks - see, tg, you aren't as blind as you thought.

----------


## techgnome

> 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

----------

