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

Question

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!

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, Apr 04 '12 at 18:53
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, Apr 04 '12 at 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, Apr 04 '12 at 19:24

score 2 · Answer 1 · answered Apr 15 '12 at 08:57

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.

score 1 · Answer 2 · answered Aug 09 '12 at 22:29

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>

score 0 · Answer 3 · answered Apr 04 '12 at 19:24

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>

answered Apr 04 '12 at 19:24

Eric Hodonsky

5,617
4
26
36

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 Apr 04 '12 at 19:30

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

3 Answers3