jquery - open links in the current tab instead of leaving the page

Go To StackoverFlow.com

1

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!

2012-04-04 18:41
by Blue
Everything seems ok to me. Only thing that came across my mind is that some JS error occurred before and halted further execution (that is prevention of default click event). Have you checked Firebug for errors - Jovan Perovic 2012-04-04 18:53
zod 2012-04-04 18:55
seems like ui.panel is not present. @jperovic is right, look for Javascript errors that might be happening before the script gets to overriding the default link action. FYI, delegate() has been deprecated and jQuery recommends using on() going forward http://api.jquery.com/on - Dylan Valade 2012-04-04 19:06
does the answer below suppose to work? I'm new to both jquery and JS, I checked firebug but I don't detect anything wrong. I tried to use the debug, and I see the the execution when refreshing the mainJsp.page stops at " load: function(event, ui)" but doesn't get to the rest of the lines. it doesn't get there when I click on the link as well. I guess that's a problem? what was supposed to happen - Blue 2012-04-04 19:24


2

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.

2012-04-15 08:57
by Blue


1

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>
2012-08-09 22:29
by dsp4774


0

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>
2012-04-04 19:24
by Relic
now the link does nothing, but there might be a progress, cause now when I press the link it actually stops there is debug (u can read my comment above, it didn't do that before) - Blue 2012-04-04 19:30
Ads