Ajax load() loads only once

Question

I have a school project of making some page, which have to add, remove, modify and sort data from mysql. And i need, to refresh section 3 called "jezdci" or just the table in it. I using load() for that. But its loads only once, when i click on that a second time, nothing happend. Then i have to again refresh the page. And i need to load it again and again. Do someone know, where is a mistake? You can see it at http://188.75.190.236/host/xhrazd7/www/ZP%20Hrazdira/index1.php

HTML:

 <section>
<?php  include "vypis.php"; ?>
 </section>

JS:

$(document).ready(function(){
    $(".serad > td").click(function(){
            y = $(this).index();          
            $("section:eq(2)").load("vypis.php",{
            serad:y      
            },);
         alert("Loaded index of td on click with value: "+y);     
    });
});

PHP:

 <?php
include "conn.php";
if(!empty($_POST["serad"])){
 $serad = $_POST["serad"];
  echo "<script>alert(\"variable succefully sended to PHP with value of \"+$serad);</script>";      
}else{
$serad=8;
}           

if($serad==0) $SQLprikaz = "SELECT * FROM ZP ORDER BY ID";
if($serad==1) $SQLprikaz = "SELECT * FROM ZP ORDER BY jmeno";
if($serad==2) $SQLprikaz = "SELECT * FROM ZP ORDER BY prijmeni";
if($serad==3) $SQLprikaz = "SELECT * FROM ZP ORDER BY vek";
if($serad==4) $SQLprikaz = "SELECT * FROM ZP ORDER BY bydliste";
if($serad==5) $SQLprikaz = "SELECT * FROM ZP ORDER BY ulice";
if($serad==6) $SQLprikaz = "SELECT * FROM ZP ORDER BY kategorie";
if($serad==7) $SQLprikaz = "SELECT * FROM ZP ORDER BY zaplaceno";
if($serad==8) $SQLprikaz = "SELECT * FROM ZP";      

$result = $conn->query("$SQLprikaz");
echo "<table>";
echo"<tr class=\"serad\">  <td><p>Pořadí</p></td>  <td><p>Jméno</p></td>  <td><p>Příjmení</p></td>  <td><p>Věk</p></td>  <td><p>Bydliště</p></td> <td><p>Ulice</p></td> <td><p>Kategorie</p></td> <td><p>Zaplaceno</p></td>  </tr>";
while($zaznam=$result->fetch_array(MYSQLI_NUM)){
echo"<tr>  <td>$zaznam[0]</td>  <td>$zaznam[1]</td>  <td>$zaznam[2]</td>  <td>$zaznam[3]</td>  <td>$zaznam[4]</td>  <td>$zaznam[5]</td>  <td>$zaznam[6]</td>  <td>$zaznam[7]</td>  </tr>";

}
echo "</table>"; 
 ?>

And sorry for my poor english :D PS: Když by se tu našel někdo hodný z Česka nebo Slovenska a měl chvíli času, budu rád, když mě zkontaktujete. Dík < some boring notes in my native language and Thanks a lot!

score 1 · Answer 1 · answered Apr 08 '18 at 08:52

As haï_uit mentioned it's because there's no event attached to the next table. You can get around this by targeting an element that will always be in the page and using the on Method like so:

$(document).ready(function(){
    $("body").on("click", ".serad > td", function(){
        y = $(this).index();          
        $("section:eq(2)").load("vypis.php",{
        serad:y      
        },);
        alert("Loaded index of td on click with value: "+y);     
    });
});

Hai Hoang · Accepted Answer · 2018-04-08T08:44:24.300

The problem is here :

$(document).ready(function(){
    $(".serad > td").click(function(){
        y = $(this).index();          
        $("section:eq(2)").load("vypis.php",{
        serad:y      
        },);
        alert("Loaded index of td on click with value: "+y);     
    });
});

After your ajax load successfully, your old table which has "td" attached to click event is replaced by new table which doesn't have "td" with click event. So in your ajax load function, you must add click event for your table again after it load successfully. Another solution is just replace the data rows, not the whole table.

First option, you can add the click event again :

$(document).ready(function(){
    var tabs = $('.serad > td');
    tabs.click(changeTabs);
    function changeTabs() {
        y = $(this).index();
        $('section:eq(2)').load('vypis.php',{
        serad:y      
        }, function () {
            tabs = $('.serad > td');
            tabs.click(changeTabs);
        });
    }  
}

Second option, only load table content:

Change your html file to this :

<section>
    <table>
        <tbody id="tabs">
            <tr class="serad">
                <td>
                    <p>Pořadí</p>
                </td>
                <td>
                    <p>...</p>
                </td>
           </tr>
        </tbody>
        <tbody id="content">
           <?php  include "vypis.php"; ?>
        </tbody>
    </table>
</section>

in php file, only echo the rows :

while($zaznam=$result->fetch_array(MYSQLI_NUM)){
    echo"<tr>  <td>$zaznam[0]</td>  <td>$zaznam[1]</td>  <td>$zaznam[2]</td>     <td>$zaznam[3]</td>  <td>$zaznam[4]</td>  <td>$zaznam[5]</td>  <td>$zaznam[6]</td>  <td>$zaznam[7]</td>  </tr>";
}

and finally, in your script :

$(document).ready(function() {
    $('.serad > td').click(function () {
        y = $(this).index();
        $.post('vypis.php', { serad: y }, function (response) {
            $('#content').html(response);
        });
    });
});

I get it, what you mean, but i dont know how to do it. Can you hint me more please? — Radyy, Apr 08 '18 at 07:35
@hai_uit Did you copy the problemmatic js block, state the problem, and forget to advise the solution? Or did I miss it? Are you looking for a duplicate to close with? — mickmackusa, Apr 08 '18 at 07:37
@mickmackusa I have already advised 2 solutions : add click event again after ajax load or just replace the data rows not the whole table. But the op seem does not know how to do it, so i'm editing my answer to make it clearer. — Hai Hoang, Apr 08 '18 at 07:41

Ajax load() loads only once

2 Answers2