Opening a new asp.net page on click of jquery tab

Question

I am working on an asp.net page. I have added a jquery plugin for tabs. this is html5 based and have html like this:

 <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a href="#all">All (902)</a></li>
            <li id="tabToday"><a href="#today">Today (111)</a></li>
            <li><a href="#since">Since last visite (432)</a></li>
            <li><a href="#vacancies">Vacancies (92)</a></li>
            <li><a href="#trainings">Trainings (543)</a></li>
            <li><a href="#tenders">Tenders (233)</a></li>
            <li><a href="#scholarships">Scholarships (1)</a></li>
            <li><a href="#other">Other (4)</a></li>
            <li class="pull-right tab-tbilisi"><a class="tab-tbilisi-a" href="#tbilisi">RUSTAVI</a></li>
            <li class="pull-right tab-kataisi"><a class="tab-kataisi-a" href="#kataisi">BATUMI</a></li>
            <li class="pull-right tab-batumi"><a class="tab-batumi-a" href="#batumi">KATAISI</a></li>
            <li class="pull-right tab-rustavi"><a class="tab-rustavi-a" href="#rustavi">TBILISI</a></li>
        </ul>
 <div class="tab-content">
            <div class="tab-pane active" id="all">
                <div class="jobs-table">
jobs listing
  </div>
            </div>

          <div class="tab-pane" id="since">
                Since</div>
            <div class="tab-pane" id="vacancies">
                Vacancies</div>
            <div class="tab-pane" id="trainings">
                Trainings</div>
            <div class="tab-pane" id="tenders">
                Tenders</div>
            <div class="tab-pane" id="scholarships">
                Scholarships</div>
            <div class="tab-pane" id="other">
                Other</div>
            <div class="tab-pane" id="tbilisi">
                Tbilisi</div>
            <div class="tab-pane" id="kataisi">
                Kataisi</div>
            <div class="tab-pane" id="batumi">
                Batumi</div>
            <div class="tab-pane" id="rustavi">
                Rustavi</div>
        </div>
    </div>

this plugin loads div when header is clicked. I want to change it so that when user clicks header, then a new asp.net page loads in the tab contents. I dont want to use Iframe. I can use something like below and it works:

 $("#tabToday").click(function () {


                $('#today').load('controls/TodaysVacancies.ascx', function (response, status, xhr) {

                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        alert(msg + xhr.status + " " + xhr.statusText);
                    }
                }
             );

            });

But I want then when a tab changes then URL also changes.

When you say "the URL also changes", do you mean the hash value in the URL? (I'm guessing that the page doesn't actually redirect.) — Reinstate Monica Cellio, Oct 11 '13 at 09:41
page dont redirect but page url becomes from www.abc.com/page1.aspx to www.abc.com/products.aspx — DotnetSparrow, Oct 11 '13 at 09:43
Without refresh it's basically single page applicaiton concept and probably you could use some framework like backbone.js, it can maintain url too. These tabs usually work with preloaded content and they are just switching it. I wouldn't use this concept for top level navigation, but anyway, have you seen this: http://jqueryui.com/tabs/#ajax — Robert, Oct 11 '13 at 09:44
This answer may help: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page — juju, Oct 11 '13 at 09:50
@mzohreh what is this technique called and which browsers are supported? can i use it with aspx pages? how to use processAjaxData ? — DotnetSparrow, Oct 11 '13 at 10:03
@DotnetSparrow As it says in the answer link provided, this is using the new HTML5 "onpopstate" event and is supported in "Chrome, Safari, FF4+, and IE10pp4+!". You said in your question that you are using HTML5, so I thought it would be appropriate. As you've also said that your code works, to change the URL of the page, you would simply write "window.history.pushState(“object or string”, “Title”, “/new-url”);" in your .load method...i.e. if (status == "error") { window.history.pushState(“object or string”, “Title”, “/new-url”); }... — juju, Oct 11 '13 at 10:12
ok and what if i type it like this: window.history.pushState("my string is here", "my title", "/newaspx.aspx"); I see that when a tab is clicked then url changes. but what if i try to access that new url page ? like wwww.abc.com/newaspx it gives error. can i open same page but that tab opened when your types wwww.abc.com/newaspx.aspx ? — DotnetSparrow, Oct 11 '13 at 10:22

score 0 · Accepted Answer · answered Oct 11 '13 at 09:43

You can simply set the href attribute to your <a> tag and load it via ajax

<ul class="css-tabs" id='myTab'>
  <li><a href="ajax1.htm">Tab 1</a></li>
  <li><a href="ajax2.htm">Second tab</a></li>
  <li><a href="ajax3.htm">An ultra long third tab</a></li>
</ul>

<!-- single pane. it is always visible -->
<div class="css-panes">
  <div style="display:block"></div>
</div>

jQuery

$("#myTab").tabs("div.css-panes > div", {effect: 'ajax'});

check this

will it change url as well ? – DotnetSparrow Oct 11 '13 at 10:01 — DotnetSparrow, Oct 11 '13 at 10:01

Opening a new asp.net page on click of jquery tab

1 Answers1