-
Jul 16th, 2014, 12:09 PM
#1
Thread Starter
Frenzied Member
[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
-
Jul 16th, 2014, 05:23 PM
#2
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 16th, 2014, 08:27 PM
#3
Thread Starter
Frenzied Member
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
-
Jul 16th, 2014, 08:54 PM
#4
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
-
Jul 16th, 2014, 09:57 PM
#5
Thread Starter
Frenzied Member
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
-
Jul 16th, 2014, 11:31 PM
#6
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
-
Jul 17th, 2014, 03:23 AM
#7
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 17th, 2014, 05:56 AM
#8
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
-
Jul 17th, 2014, 06:21 AM
#9
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 17th, 2014, 07:38 AM
#10
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:
<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
-
Jul 21st, 2014, 10:11 AM
#11
Thread Starter
Frenzied Member
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
-
Jul 21st, 2014, 12:52 PM
#12
Re: How to stop jquery tabs from refreshing
Originally Posted by dolot
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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|