简体   繁体   中英

jQuery UI TABS + AJAX + PHP Dynamic Content Loading

Here is the scenario:

  • I am using jQuery UI Tabs to load dynamic content into a content div below.
  • When clicking on the tabs, the content changes and loads (via Ajax) various PHP Files
  • One of the files is a list (accessed through a mysql db) that lists for example users in the general format
  • Ex: ID - UserName - Full Name - View / Modify

What I want to achieve, is that, from this list, when a user clicks the View Modify link, it replaces the list of users with the "viewUser.php" file in that div.

My question is as follows: - How do i pass the viewUser.php?ID=4 value back to the jQuery TABS so that it changes the content of the specific div with the output from the viewUser PHP file?

The reason I've not included any code is that I am at a loss as to where to begin. The only tutorials I've found so far is to pass POST values to an external file via AJAX and to display the result in the same DIV. However, what I want to do is to send a GET Request and change the content of the DIV with the result.

Any help is greatly appreciated, I hope that I've explained my situation adequately.

UPDATE (added code as suggested)

This is my tabs / navigation + Content DIV. The div tc0 is the format of what the div will be for the PHP files as well.

<div id="tabs">
    <ul class="grid_12 alpha" id="hmenu">
        <li><a href="#tc0">Dashboard</a></li>
        <li><a href="list-users.php">List Users</a></li>
        <li><a href="list-tasks.php">List Tasks</a></li>
    </ul>

    <div id="tc0">
        <p>Some Content</p>
    </div>
</div>

The PHP File (list-users.php or list-tasks.php):

<?php

    // Do Database query stuff here

    foreach($data as $row){
        echo '<tr>';
        echo '<td>' .$row['TID']. '</td><td>' .$row['user'];
        echo  '</td><td><a href="viewUser.php?ID=' .$row['ID'] . '" class="this">View User</a></td>';
        echo '</tr>';
    }

The jQuery portion (which works fine for loading the AJAX): (This is where I need the help)

    <script type="text/javascript"><!--//TABS-->
        $(document).ready(function(){
            $("#tabs").tabs();          
    });
    </script><!--//END TABS-->

Hope this helps. I don't know where to begin coding the jQuery to handle the link from the userlist.

. on every tab of click event you Have To Pass Filename With id

You have to do this simple line on onclick event of ever tag

window.location='viewUser.php?ID=4

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM