Tablesorter with JqueryUI tabs

diamante123 commented 9 years ago

Hi, I know there were people having similar problems that I do, but none of the solutions worked for me. I hope you'll understand my English:

I have two JqueryUI tabs which show two different tables with TableSorter. That works great. The tabs are called "devices (here:geräte (german))" and "reservations(reservierungen)". When I hit the "reservieren" button on the first tab, the device tab, I want the entry in the table to vanish and appear in the "reservations" table. In the reservations table, the user should be able to end the reservations by clicking on a button. The buttons both work, but I always have to reload the page, and that's really not what I want.

It used to work, but when I added TableSorter, it stopped working...

Parts of my index.php:

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="jquery-ui-1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
    $( "#tabs" ).tabs({
        activate: function( event, ui ) {
        ui.newPanel.find("#domainsTable").trigger('applyWidgets');
}
});
    });
 function reserve(id) {
            $.ajax({
                type: "GET",
                url: "reserve.php?geraeteID=" + id,
                cache: false,
                complete: function (data) {
                    $("#tabs").tabs('load', 0);

                }
            });
        }

        function dereserve(id) {
            $.ajax({
                type: "GET",
                url: "userdereserve.php?geraeteID=" + id,
                cache: false,
                complete: function (data) {
                    $("#tabs").tabs('load', 1);

                }
            });
        }   
</script>
<body>
    <img src="bvu.png" width="1660" height="375" alt="grafik">
    <div id="tabs">
        <ul>
            <li><a href="geraete.php">Geräte</a></li>
            <li><a href="myreservations2.php">Reservierungen</a></li>
        </ul>
    </div>
</body>

The tabs:

Again, when I click on the "reservieren" button at the first entry, "JO" is then moved to the "reservierungen" tab, but it doesn't disappear from the "device" tab unless I hit refresh.

Hope somebody gets my issue :D Thanks in advance!

briantjuhh007 commented 9 years ago

I like this one tho, would be great!

Mottie commented 9 years ago

Hi @diamante123!

If I understand correctly, the table is not sorting? I'm not sure what is meant by this statement:

"JO" is then moved to the "reservierungen" tab, but it doesn't disappear from the "device" tab unless I hit refresh.

Everything in the device tab should be hidden when the tab switches.

Anyway, to get tablesorter to work it needs to be initialized since the table didn't exist until after the ajax call. Try something like this:

$(function() {
    $( "#tabs" ).tabs({
        activate: function( event, ui ) {
            ui.newPanel.find("#domainsTable").tablesorter({
                /* tablesorter options */
            });
        }
    });
});

If that doesn't work, please share the HTML of the two tables.

diamante123 commented 9 years ago

Thanks for your reply. No, the table is sorting, that works great.

Everything in the device tab should be hidden when the tab switches.

That works as well. Only thing that doesn't work:

When I hit the button next to an entry in the device table, "for example: "JO"", I want the entry to vanish from the device table right after I clicked the button, kinda like I deleted the entry.

Currently the entry only vanishes when I hit refresh OR change the tab.

I hope you get me now, haha

diamante123 commented 9 years ago

NOTE: When I hit the button, I get:

ts2

Uncaught TypeError: undefined is not a function it refers to my index.php line:41 which is my "reservieren" function

Mottie commented 9 years ago

What does the "reservieren" function look like? Are you using a delegated event binding?

TheSin- commented 9 years ago

if I'm understanding this right it sounds like he just needs to add a removeRow in the button function.

diamante123 commented 9 years ago

Oh sry, I meant "reserve" function, which looks like this:

function reserve(id) {
        $.ajax({
            type: "GET",
            url: "reserve.php?geraeteID=" + id,
            cache: false,
            complete: function (data) {
                $("#tabs").tabs('load', 0);

            }
        });
    }

Never heard of delegated events, and due to my bad English it's really hard to understand that site =/

Mottie commented 9 years ago

What code are you using to hide the "JO" row?

diamante123 commented 9 years ago

After hitting the button, the "reserve.php" is called and the status of the device is set to "RESERVED" and the userID of a currently logged-in user is stored in a mysql database.

My "geraete.php" shows all devices which are not "RESERVED". I am getting so desperate right now, I am willing to donate to your blog if you can help me :+1:

TheSin- commented 9 years ago

I assume you are calling it via ajax, can I see that ajax call please you are just missing a removeRow() in the complete part of it. Also for the record I feel @Mottie deserves a donation either way ;)

because you are using ajax to update the row in the db, but the tables do not know to reload the data you have 2 choices, use remove and add Row() from one table to the other, or refresh the data in the table using ajax after the db is updated.

I do this stuff all the time since I'm the php guy here ;) I'm also on IRC to help.

Mottie commented 9 years ago

It might be easier to help if you jumped on the #tablesorter irc channel on freenode.net

diamante123 commented 9 years ago

The refresh-data-method sounds great, I hope I can find out how to do that. Since I'm at work and I go home now, I will enter the IRC channel tomorrow and really looking forward to find a solution to my problem :) Thank you both

diamante123 commented 9 years ago

Damn computer @ work won't let me connect to the IRC channel... Hope you guys are willing to help me here. I wonder why this does not reload my TABS:

complete: function (data) {
            $("#tabs").tabs('load', 0);
 }

Maybe you need my geraete.php as well...

<html><head>
<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="./table/js/jquery-latest.js"></script>
    <script type="text/javascript" src="./table/js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="./table/js/jquery.tablesorter.widgets.js"></script>
    <script type="text/javascript">

$(function() {

  $("#domainsTable").tablesorter({
theme: 'metro-dark',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter", "uitheme"],
widgetOptions : {
  // jQuery selector string of an element used to reset the filters
  filter_reset : 'button.reset',
  // add custom selector elements to the filter row
  filter_formatter : {

    2 : function(){
      }
                     }
                }
                            });
         })
</script>
</head>
<body>
<?php
require_once ('config.php');
$db_link = mysqli_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD,  MYSQL_DATABASE);
mysqli_set_charset($db_link, 'utf8');
$sql = "SELECT deviceID, deviceName, categoryName "
    . "FROM (device LEFT JOIN category ON devoce.categoryID=category.categoryID) WHERE     deleted != 1 AND status = 'AVAILABLE'";

$db_erg = mysqli_query($db_link, $sql);
if (!$db_erg) {
die('Invalid Request: ' . mysqli_error($db_link));
}
?>
<table border="5" id="domainsTable" class="tablesorter">
<thead> 
    <tr>
        <th></th>
        <th class="first-name filter-select" data-placeholder="Choose name">Name</th>
        <th class="first-name filter-select" data-placeholder="Choose category">Category</th>
    </tr>
</thead> 
<?php
echo '<tbody>';
while ($row = mysqli_fetch_array($db_erg, MYSQL_ASSOC)) {
    echo "<tr>";
    $id = $row['deviceID'];
    echo '<td>';
    echo '<button onclick="reservieren(' . $id . ');">Reservieren</button>';
    echo '</td>';
    echo "<td>" . $zeile['deviceName'] . "</td>";
    echo "<td>" . $zeile['kategorieName'] . "</td>";
    echo '</tr>';
}
echo '</tbody>';
echo "</table>";
mysqli_free_result($db_erg);
?>

diamante123 commented 9 years ago

Ok, I added the sql query and table output from the geraete.php in my reserve.php and now it works^^ Although it might be inconvenient, it works and that's what counts for me. Thank you anyway :D

Mottie / tablesorter

Tablesorter with JqueryUI tabs #871