How to open new page on the same tab (jquery tab + datatables)

Drako

Some of my columns contain links that go to other pages, but when i click them i want them to be open inside the current tab.

i tried this but doesnt work
[code]
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;

});
}[/code]

anyone knows how to do this?

thanks!

GregP

I'm not sure I would bother doing it with jQuery. The anchor tag itself has the ability to specify where the new page loads, using the target attribute:

My Link

If you do indeed need to use JavaScript for the click event (you are doing some other logic, too), then you can do it with some good ol' vanilla JavaScript:

window.location.href=this.href

(assuming "this" has the href property)

Drako

target='_self' didnt really work.. still opens the whole page instead of inside the jquery tab.

from what i read on jquery tabs page this code i tried is the one that should be used to open on the same tab..

will be very hard to change to javascript since the links are created server side with php.

thanks!

GregP

Oh, inside the jQuery tab. I should have known that from the post title, but somehow I missed it. I thought you meant the browser tab. Sorry about that! I'll have a closer look shortly. Do you have a more complete version of the sample code? (particularly, where is the load: {} being set?)

JavaScript should still be easy to implement; even if the link is generated by PHP we can still use all of the attributes within a JavaScript function.

Drako

This is the tab code

[code]$("#tabs").tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
},
"load": function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;

});
}
} );[/code]



thanks for the help!

GregP

I'm wondering if it's just typo/syntax. in ".load(this.href)", I can't help wondering if href is not a property of 'this'. Sometimes it's hard to tell with the mixture of jQuery and standard JavaScript objects which is which. ;-)

Try this inside the click function:

[code]
$thisRef = $(this).attr('href');
$(ui.panel).load($thisRef);
return false;
[/code]

Drako

didnt work =/

i think something is wrong with the selector, it should work just with 'a' , but it doesnt, maybe because its inside the table..

maybe something like this would work:

$('dataTables_scrollBody.a', ui.panel)

thanks!

GregP

I always use Chrome Dev Tools or Firebug Firefox extension to try raw jQuery selectors to make sure I'm "getting" the thing I want.

If you console.log to Firebug (and probably also Dev Tools), it will also show you if you have a string, object, or whatever, and let you drill into the object if need be.

If you're not already using those tools, no time like the present!