I'm very new to jquery and I need you help with the following:
I have a file "mainPage.jsp" which contains jquery tab, with only one tab at the moment. the content of this tab is an included jsp file, users.jsp, which builds a table of users. each user row contains a "details" column which contains the following link:
<a href="userDetails.jsp?userid=<%=user.getUserID()%>" style="color: blue;">Details</a>
When a user clicks on this link I want the new content to be presented in the current tab, instead of changing the page (which is what it currently does).
There is an explanation in the following link on how to do it , but i guess i'm doing something wrong:
open links in the current tab instead of leaving the page
my mainPage.jsp :
<div id="tabs">
<ul>
<li><a href="#tabs-1">Users</a></li>
</ul>
<div id="tabs-1"> <jsp:include page="users.jsp" /> </div>
</div>
The script in this page:
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
$('#tabs').on('click', 'a', function(event) {
$.get($(this).attr('href'), function (response){
$(this).parent().html(response);
event.preventDefault();
});
});
});
</script>
also tried:
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
$('#tabs').on('click', 'a', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
});
</script>
this is a link that appears (after running the jsp):
<a href="userDetails.jsp?userid=14" style="color: blue;">Details</a>
any ideas?
Thanks!
Found the solutions, this should be the script:
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
$("#tabs").bind('tabsselect', function(event, ui) {
window.location.href=ui.tab;
});
});
</script>
And the usage of it:
<div id="tabs">
<ul>
<li><a href="users.jsp"><span>Users</span></a></li>
<li><a href="conference.jsp"><span>Conferences</span></a></li>
<li><a href="companies.jsp"><span>Companies</span></a></li>
</ul>
</div>
This why the content, for example, of the first tab is the users.jsp. In usrs.jsp I use the link:
<td><a href="userDetails.jsp?userid=<%=user.getUserName()%>"> <img src="/conf4u/resources/imgs/yada.png" alt=""> Details </a> </td>
and userDetails.jsp now opens in the same tab when it's clicked.
Ran across this and previous answers didn't help, but this did:
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
load: function (event, ui) {
$('a', ui.panel).live('click', function () {
$(ui.panel).load(this.href);
return false;
});
}
});
});
<script>
How About:
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
$('#tabs').on('click', 'a', function(event) {
event.preventDefault();
$.get($(this).attr('href'), function (response){
$(this).parent().html(response);
});
});
});
</script>
JS
error occurred before and halted further execution (that is prevention of default click event). Have you checkedFirebug
for errors - Jovan Perovic 2012-04-04 18:53