CODEWITHSUNDEEP
phpjquerymysqlajax
Boky
Boky

Reputation: 12064

Edit and remove with ajax

I'm trying to add, delete and edit an item using ajax, php and mysql.

Everything works nice. But the problem is if I add the item and then try to edit or delete it. It works only if I refresh the page.

My code is :

<form id="frmLink" role="form" action="" method="post">
        <div class="form-group col-md-3">
           <input type="text" class="form-control" id="txtTitle" name="txtTitle" placeholder="De titel"><br />
           <input type="text" class="form-control" id="txtLink" name="txtLink" placeholder="Voeg de link toe">
           <p class="help-block">*Link op de volgende manier toevoegen (<b>www.link.be</b>), dus zonder http://</p>
        </div>
       <div class="form-group col-md-9">
           <textarea class="bs-texteditor form-control" rows="3" placeholder="Beschrijving" name="txtOpis" id="txtOpis"></textarea><br />
       </div>
       <button type="submit" class="pull-right btn btn-success col-md-2" name="btnAddLink" id="btnAddLink" style="margin-right:15px;">Toevoegen</button>
    </form>

$rezultatLinks = mysqli_query($kon, "SELECT * FROM links");
<table id="example1">
<tbody>
while($redLinks = mysqli_fetch_assoc($rezultatLinks)){
  echo "<tr id=\"item-". $redLinks["id"] ."\">
        <td style=\"text-align:center;\">". $redLinks["id"] ."</td>

        <td style=\"text-align:center;\">
           <span id=\"ime-". $redLinks["id"] ."\">". $redLinks["ime"] ."</span><br />
          <input type=\"text\" class=\"editbox\" id=\"imeProm-". $redLinks["id"] ."\" value=\"". $redLinks["ime"] ."\">
        </td>


        <td style=\"text-align:center;\">
            <span id=\"link-". $redLinks["id"] ."\"><a href=\"http://". $redLinks["link"] ."\">". $redLinks["link"] ."</a></span><br />
            <input type=\"text\" class=\"editbox\" id=\"linkProm-". $redLinks["id"] ."\" value=\"". $redLinks["link"] ."\">
        </td>

        <td style=\"text-align:center;max-width:350px;\">
          <span id=\"opis-". $redLinks["id"] ."\">". $redLinks["opis"] ."</span><br />
          <textarea class=\"editbox\" id=\"opisProm-". $redLinks["id"] ."\" rows=\"5\">". $redLinks["opis"] ."</textarea>

        </td>

        <td style=\"text-align:center;\">". $redLinks["dodan"] ."</td>

        <td style=\"text-align:center;\">
            <a class=\"btn btn-danger btn-sm delLink\" title=\"Delete!\" id=\"del-". $redLinks["id"] ."\">
              <i class=\"fa fa-trash-o \"></i> 
            </a>
            <a class=\"btn btn-success btn-sm linkUpdate\" title=\"Veranderen\" id=\"update-". $redLinks["id"] ."\">
                <i class=\"fa fa-pencil-square-o\"></i> 
            </a>

            <br /><a class=\"btn btn-info btn-sm col-sm-12 editbutton\" title=\"Save\" id=\"save-". $redLinks["id"] ."\" style=\"margin-top:5px;\">
             <i class=\"fa fa-floppy-o\"></i> Save
            </a>
            <div class=\"btn-danger\" id=\"errorDel\"></div>
        </td>
    </tr>";     
}

My ajax scripts are : 

<script type="text/javascript">

        //Dodavanje linka//
        $(document).ready(function(){
            $("#btnAddLink").on("click", function(e){
                var naslov = $("#txtTitle").val();
                var dodaniLink = $("#txtLink").val();
                var opis = $("#txtOpis").val();

                $.ajax({
                    url : "link-toevoegen.php",
                    method : "POST",
                    cache: false,
                    data : {
                                naslovLinka : naslov,
                                izabraniLink : dodaniLink,
                                opisLinka : opis    
                    },

                    beforeSend: function(){
                        $("#btnAddLink").text("Adding..."); 
                    },

                    success: function(msg){
                        if(msg){
                            $("#example1").append(msg);
                        }else{
                            $("#error").css({"padding":"5px","margin":"10px auto"});
                            $("#error").text("Het toevoegen van de gewenste link was niet succesvol!");
                        }

                        $("#btnAddLink").text("Toevoegen");
                        $("#txtTitle").val("");
                        $("#txtLink").val("");
                        $("#txtOpis").val("");
                    },

                    error: function(){
                        alert("Toevoegen mislukt!");    
                    }

                });

                e.preventDefault();
            });
        });
        //Kraj dodavanja linka//

        //Brisanje linka//
        $(document).ready(function(){
            $(".delLink").on("click", function(e){
                var cijeliID = this.id.split("-")
                var id = cijeliID[1];
                $.ajax({
                    url : "link-wissen.php",
                    method : "POST",
                    cache: false,
                    data : {id : id},


                    success: function(msg){
                        if(msg){
                            $("#item-"+id).animate({"backgroundColor":"#fb6c6c"},300);
                            $("#item-"+id).fadeOut(300);    
                        }else{
                            $("#errorDel").css({"margin":"5px","border-radius":"3px"});
                            $("#errorDel").text("Mislukt!").fadeIn();
                        }
                    },

                    error: function(){
                        alert("Het verwijderen van de link mislukt!");  
                    }
                });
                e.preventDefault();
            });
        });
        //Kraj brisanja linka//

        //Update linka//
        $(document).ready(function(){
            $(".linkUpdate").on("click", function(e){
                var cijeliID = this.id.split("-");
                var id = cijeliID[1];

                $("#ime-"+id).slideUp(700);
                $("#link-"+id).slideUp(700);
                $("#opis-"+id).slideUp(700);

                $("#imeProm-"+id).fadeIn(1000);
                $("#linkProm-"+id).fadeIn(1000);
                $("#opisProm-"+id).fadeIn(1000);
                $("#save-"+id).fadeIn(1000);

                $("#save-"+id).on("click", function(e){
                    var novoIme = $("#imeProm-"+id).val();
                    var noviLink = $("#linkProm-"+id).val();
                    var noviOpis = $("#opisProm-"+id).val();

                    $.ajax({
                        url : "link-update.php",
                        method: "POST",
                        cache: false,
                        data : {id:id, ime:novoIme, updLink:noviLink, opis:noviOpis},

                        beforeSend: function(){
                            $("#save-"+id).text("Saving...");
                        },

                        success: function(msg){
                            if(msg){
                                $("#imeProm-"+id).hide();
                                $("#linkProm-"+id).hide();
                                $("#opisProm-"+id).hide();
                                $("#save-"+id).hide();

                                $("#ime-"+id).text(novoIme).fadeIn(1000);
                                $("#link-"+id).text(noviLink).fadeIn(1000);
                                $("#opis-"+id).text(noviOpis).fadeIn(1000);

                            }else{
                                $("#errorDel").css({"margin":"5px","border-radius":"3px"});
                                $("#errorDel").text("Mislukt!").fadeIn();
                            }
                        },

                        error: function(){
                            alert("Error! De link is niet gewijzigd!");
                        }
                    });
                });

                e.preventDefault();
            });
        });
        //Kraj update linka//
    </script>

Link-toevoegen.php file is : 

    <?php
    session_start();
    include("config.php");
    global $kon;


if(isset($_SESSION["admin"])){
     $naslov = $_POST["naslovLinka"];
     $link = $_POST["izabraniLink"]; 
     $opis = $_POST["opisLinka"]; 
     $dt = new DateTime();
     $datumDodavanja = $dt->format('Y-m-d H:i:s');


     if(mysqli_query($kon, "INSERT INTO links VALUES (NULL, '". $naslov ."', '". $link ."', '". $opis ."', '". $datumDodavanja ."')")){
         $zadnja_rez=mysqli_query($kon, "SELECT * FROM links ORDER BY id DESC LIMIT 1");
         $zadnja_red=mysqli_fetch_assoc($zadnja_rez);
         $zadnja_id=$zadnja_red["id"];

         echo "<tr id=\"item-". $zadnja_id ."\">
                <td style=\"text-align:center;\">". $zadnja_id ."</td>

                <td style=\"text-align:center;\">
                    <span id=\"ime-". $zadnja_id ."\">". $zadnja_red["ime"] ."</span><br />
                    <input type=\"text\" class=\"editbox\" id=\"imeProm-". $zadnja_id ."\" value=\"". $zadnja_red["ime"] ."\">
                </td>


                <td style=\"text-align:center;\">
                    <span id=\"link-". $zadnja_id ."\"><a href=\"http://". $zadnja_red["link"] ."\">". $zadnja_red["link"] ."</a></span><br />
                    <input type=\"text\" class=\"editbox\" id=\"linkProm-". $zadnja_id ."\" value=\"". $zadnja_red["link"] ."\">
                </td>

                <td style=\"text-align:center;max-width:350px;\">
                    <span id=\"opis-". $zadnja_id ."\">". $zadnja_red["opis"] ."</span><br />
                    <textarea class=\"editbox\" id=\"opisProm-". $zadnja_id ."\" rows=\"5\">". $zadnja_red["opis"] ."</textarea>

                </td>

                <td style=\"text-align:center;\">". $zadnja_red["dodan"] ."</td>

                <td style=\"text-align:center;\">
                    <a class=\"btn btn-danger btn-sm delLink\" title=\"Delete!\" id=\"del-". $zadnja_id ."\">
                        <i class=\"fa fa-trash-o \"></i> 
                    </a>
                    <a class=\"btn btn-success btn-sm linkUpdate\" title=\"Veranderen\" id=\"update-". $zadnja_id ."\">
                        <i class=\"fa fa-pencil-square-o\"></i> 
                    </a>

                    <br /><a class=\"btn btn-info btn-sm col-sm-12 editbutton\" title=\"Save\" id=\"save-". $zadnja_id ."\" style=\"margin-top:5px;\">
                        <i class=\"fa fa-floppy-o\"></i> Save
                    </a>
                    <div class=\"btn-danger\" id=\"errorDel\"></div>
                </td>
            </tr>";
     }

}else{
    header("location:../index.php");
}
?>

Thus everything works nice, if I refresh the page. But the problem is if I add the item, it is added and shown, but when I then try to edit it or delete it, it wont work. But if I refresh the page, the works everything perfect.

And if I then add another item, i can't edit or delete only that new item, but the others item I can edit and delete without problems.

Thanks

Upvotes: 0

Views: 61

Answers (1)

TipuZaynSultan
TipuZaynSultan

Reputation: 783

Just Quick Solution:

Use this:

$(document).on("click", "a.linkUpdate", function (e) {...}
// And
$(document).on("click", "a.delLink", function(e) {...}

Instead of:

$(".linkUpdate").on("click", function (e) {...}
// And
$(".delLink").on("click", function(e) {...}

Sorry I couldn't write out the entire code... Just convert your selector lines... You can even convert your create selector line too... I hope this helps...

Upvotes: 1

Related Questions