Response title
This is preview!
Would like to open a link in the same tab
in Using jQuery UI
•
10 years ago
Hello,
I am new to jQuery UI so I apologize if this is a newbie question. I have a tab that has several links to .html files in the same directory. I have tried 10 (and counting) snippets of code to make the link open in the same tab. I thought I was putting the code in the wrong place at first but don't think that is the case any more. The link ALWAYS opens in the full window or does nothing.
I even started just using document.ready even though I don't think it is required. Some confusion on my part as to where to put all of this code (within the tabs ()? or in a seperate function (as I show in some of these examples).
Here are the various things I have tried:
/* this from one of the forums here. The refresh part of the code works fine but the link opens full window */
$(document).ready(function() {
$('#tabs').tabs({
load: function(event, ui) {
$('a', ui.panel).live('click', function() {
$(ui.panel).load(this.href);
return false;
});
},
// maintains tab state on refresh
selected: (location.hash != "") ? location.hash.replace("#", "") : 0,
show: function(event, ui) {
location.hash = $(this).tabs("option", "selected") /*+ 1 */ ;
}
});
});
/* // example from jQueryUI documentation : link opens in a new window :(
$(document).ready(function(){
$('#tabs').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
});
*/
/* example from stackoverload: link opens in a new window
$(function() {
$( "#tabs" ).tabs();
$('.tab').each(function() {
var tab = $(this);
tab.find('a').click(function() {
tab.load(this.href);
return false;
});
});
});
*/
/******* stackoverflow: using a class="tab" on the DIV
* If I give class to the div that contains the tab headers,
* clicking on any of the headers loads the entire page into the
* parent DIV (.content).
* If I give the child of the DIV that contains the headers the class, the links don't work at all.
* have tried without the second function statement: links open in a new page
* with the second function statement, links don't work at all in the tab container itself
$(function() {
$( "#tabs" ).tabs();
});
$(function() {
$('.tab').each(function() {
var tab = $(this);
tab.find('a').click(function() {
tab.load(this.href);
return false;
});
});
});
*/
/* again, didn't work
$(function() {
$('#tabs').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
});
*/
I could go on and on, but none of these worked, except for the one stackoverload example that did something, although not what I wanted.
The code for the tabs is as follows:
<div id="tabs">
<ul>
<li><a href="#tabs-1">What is NIE?</a></li>
<li><a href="#tabs-2">Teacher Resources</a></li>
</ul>
<!-- Index page (default position) -->
<div id="tabs-1" class="tab">
<h2>What is Newspapers in Education?</h2>
<p>The Columbian’s Newspaper in Education is a wonderful free resource available to local teachers on a daily basis.</p>
<a href="http://nie.columbian.com/teacherorderform.cfm" title="Click me to order a Newspaper"><img src="images/educationNews.jpeg" width="268" height="188" alt="Order a newspaper" style="float: right;"></a>
<p>NIE is an Educational/literacy program designed to provide children from Kindergarten to 12th grade daily, current event tools.</p>
</div>
<!-- END of tab-1 -->
<!-- Teachers Resources Tab -->
<div id="tabs-2" class="tab">
<H2>Teacher's Resources</H2>
<p><a href="http://www.nieteacher.org/columbiannie/" target="_blank">NIEteacher.org Resource Page</a><br />
An online resource with over 300 downloadable tabs and guides.</p>
<p><a href="docs/elecEditionLessonPlan.doc">Introduction to the e-Edition Lesson Plan</a></p>
<p><a href="test.html">Test link</a><br />
There are a variety of resources at your disposal.</p>
</div>
<!-- END of tab-2 -->
I am trying to click on the test link to open up a page of text in the same tab.
It seems like there aren't enough postings for this to be an issue OR I am just trying something that not a lot of people are trying.
Any help at all would be appreciated.
1
