CODEWITHSUNDEEP
javascriptjqueryjsp
Blue
Blue

Reputation: 1939

jquery tabs - switching content from included jsp to another

I have a main page with jquery tabs. The content of my tab is a jsp page I've included:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Users</a></li>
    </ul>
    <div id="tabs-1"> <jsp:include page="users.jsp" /> </div>
</div>

This jsp page contains a table which displays user details. that's the table's headers: I want that the last column will contain a "Details" link, and when it's clicked - I want to change the content of the tab to a different jsp page that shows the user details.

few questions:

  1. how do I switch to the second jsp on click?

  2. in order to present the details of the requested user, I need somehow to pass the userID to the second jsp page. how do I do it? I have a link, and its id is the userId I need: 

    <td><a id="<%=user.getUserID()%>">Details</a></td>

I'm really new at this, tried goggling my question but I couldn't piece it all together to a working solution.

Thanks!

The view source:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Conf4You</title>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.18.custom.css"

    rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $('#tabs').tabs();
    });

</script>
<style type="text/css">
/*demo page css*/

body {
    font: 62.5% "Trebuchet MS", sans-serif;
    margin: 50px;
}

.demoHeaders {
    margin-top: 2em;
}
</style>
</head>
<body>
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
  <li><a href="#tabs-1">Users</a></li>
</ul>
<div id="tabs-1">







<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="css/main.css" rel="stylesheet" />
<link type="text/css" href="css/tables/tableList.css" rel="stylesheet" />
</head>
<body>
<p class="horizontal-line">Actions</p>
<p class="horizontal-line">Users</p>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
  <thead>
    <tr>
      <th><h3>Name</h3></th>
      <th><h3>Phone 1</h3></th>
      <th><h3>Phone 2</h3></th>
      <th><h3>Email</h3></th>
      <th><h3>Company</h3></th>
      <th><h3>Last Access</h3></th>
      <th class="nosort"><h3>Details</h3></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>user0</td>
      <td>Num10</td>
      <td>num20</td>
      <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td>
      <td>yada</td>
      <td>31-03-2012 06:32:34 PM</td>
      <td><a id="1" onclick="detailsAction()"

                    style="color: blue;">Details</a></td>
      <!-- todo- change details link -->
    </tr>
    <tr>
      <td>user1</td>
      <td>Num11</td>
      <td>num21</td>
      <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td>
      <td>yada</td>
      <td>31-03-2012 06:32:34 PM</td>
      <td><a id="2" onclick="detailsAction()"

                    style="color: blue;">Details</a></td>
      <!-- todo- change details link -->
    </tr>
    <tr>
      <td>user2</td>
      <td>Num12</td>
      <td>num22</td>
      <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td>
      <td>yada</td>
      <td>31-03-2012 06:32:34 PM</td>
      <td><a id="3" onclick="detailsAction()"

                    style="color: blue;">Details</a></td>
      <!-- todo- change details link -->
    </tr>
    <tr>
      <td>user3</td>
      <td>Num13</td>
      <td>num23</td>
      <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td>
      <td>yada</td>
      <td>31-03-2012 06:32:34 PM</td>
      <td><a id="4" onclick="detailsAction()"

                    style="color: blue;">Details</a></td>
      <!-- todo- change details link -->
    </tr>
    <tr>
      <td>user4</td>
      <td>Num14</td>
      <td>num24</td>
      <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td>
      <td>yada</td>
      <td>31-03-2012 06:32:34 PM</td>
      <td><a id="5" onclick="detailsAction()"

                    style="color: blue;">Details</a></td>
      <!-- todo- change details link -->
    </tr>
  </tbody>
</table>
<div id="controls">
  <div id="perpage">
    <select onchange="sorter.size(this.value)">
      <option value="5">5</option>
      <option value="10" selected="selected">10</option>
      <option value="20">20</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
    <span>Entries Per Page</span> </div>
  <div id="navigation"> <img src="css/tables/images/first.gif" width="16" height="16"

                alt="First Page" onclick="sorter.move(-1,true)" /> <img

                src="css/tables/images/previous.gif" width="16" height="16"

                alt="First Page" onclick="sorter.move(-1)" /> <img

                src="css/tables/images/next.gif" width="16" height="16"

                alt="First Page" onclick="sorter.move(1)" /> <img

                src="css/tables/images/last.gif" width="16" height="16"

                alt="Last Page" onclick="sorter.move(1,true)" /> </div>
  <div id="text"> Displaying Page <span id="currentpage"></span> of <span

                id="pagelimit"></span> </div>
</div>
<script type="text/javascript" src="js/tables/script.js"></script>
<script type="text/javascript">

        var sorter = new TINY.table.sorter("sorter");

        sorter.head = "head";

        sorter.asc = "asc";

        sorter.desc = "desc";

        sorter.even = "evenrow";

        sorter.odd = "oddrow";

        sorter.evensel = "evenselected";

        sorter.oddsel = "oddselected";

        sorter.paginate = true;

        sorter.currentid = "currentpage";

        sorter.limitid = "pagelimit";

        sorter.init("table", 1);

    </script>
</body>
</html>
</div>
</div>
</body>
</html>

Upvotes: 1

Views: 9440

Answers (2)

Blue
Blue

Reputation: 1939

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.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

You can put a proper url into the href of a tab anchor to allow for ajax loading of the tab.

See ajax loading example: http://jqueryui.com/demos/tabs/#ajax

Upvotes: 0

Related Questions