Insert data into MySQL Databse with PHP/AJAX, execute success option AFTER it's inserted (Callback)

Question

I've been trying to make a simple site, and I can't quite wrap my head around some of the things said here, some of which are also unrelated to my situation.

The site has a form with 3 input boxes, a button, and a list. The info is submitted through a separate PHP file to a MySQL database, once the submit button is clicked. I'm supposed to make the list (it's inside a div) update once the info is successfully sent and updated in the database. So far I've made it work with async:false but I'm not supposed to, because of society.

Without this (bad) option, the list doesn't load after submitting the info, because (I assume) the method is executed past it, since it doesn't wait for it to finish.

What do I exactly have to do in "success:" to make it work? (Or, I've read something about .done() within the $.ajax clause, but I'm not sure how to make it work.)

What's the callback supposed to be like? I've never done it before and I can get really disoriented with the results here because each case is slightly different.

function save() {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var telephone = document.getElementById('telephone');
 
    $.ajax({
        url: "save.php",
        method: "POST",
        data: { name: name.value, email: email.value, telephone: telephone.value },
        success: $("List").load(" List")
    });
}

Thank you in advanced and if I need include further info don't hesitate to ask.

Answer 1

From this comment

as far as i know the success function will be called on success you should use complete, A function to be called when the request finishes (after success and error callbacks are executed). isnt that what you want ? – Muhammad Omer Aslam

I managed to solve the issue simply moving the $.load clause from the success: option to a complete: option. (I think they're called options)

I haven't managed error handling yet, even inside my head but at least it works as it should if everything is entered properly.

Thanks!

(Won't let me mark as answered until 2 days)

Answer 2

I will show you piece of solution that I use in my project. I cannot say it is optimal or best practices, but it works for me and can work for you:

PHP:

     function doLoadMails(){
       //initialize empty variable 
       $mails;

      $conn = new mysqli($_POST['ip'], $_POST['login'], $_POST['pass'], $_POST['db']);
         // Check connection
         if ($conn->connect_error) {
         die("");
             }
          //some select, insert, whatever  
         $sql = "SELECT ... ... ... ";
          $result = $conn->query($sql);

           if ($result->num_rows > 0) {
               // output data of each row, j is counter for rows
                $j =0;
              while($row_a = $result->fetch_assoc()) {    

             //for each row, fill array
            $mails[$j][0] = $row_a["name"] ; 
            $mails[$j][1] = $row_a["mail"] ; 
            $mails[$j][2] = $row_a["language"] ;         


                $j++;

                }
          }


        //if $mails has results (we added something into it)
          if(isset($mails)){
          echo json_encode($mails);/return json*/   }
          else{
//some error message you can handle in JS
echo"[null]";}



    }

and then in JS

function doLoadMails() {



    $.ajax({
        data: { /*pass parameters*/ },
        type: "post",
        url: "dataFunnel.php",
        success: function(data) { /*data is a dummy variable for everything your PHP echoes/returns*/
            console.log(data); //you can check what you get



            if (data != "[null]") { /*some error handling ..., in my case if it matches what I have declared as error state in PHP - !(isset($mails))*/ }
        }
    });

Keep in mind, that you can echo/return directly the result of your SQL request and put it into JS in some more raw format, and handle further processing here.

In your solution, you will probably need to echo the return code of the INSERT request.

Answer 3

I would first create an AJAX call inside a function which runs when the page loads to populate the list.

window.onload = populatelist(); 

function populatelist() {
   $.ajax({
      type: "POST",
      url: "list.php",
      data: {function: 'populate'},
      success: function(data) { $("#list").html("data"); }
   });
}

Note: #list refers to <div id="list> and your list should be inside this.

I would then have another AJAX call inside a different function which updates the database when the form is submitted. Upon success, it will run the populatelist function.

function save() {
   var name = document.getElementById('name');
   var email = document.getElementById('email');
   var telephone = document.getElementById('telephone');

   $.ajax({
       type: "POST",
       url: "list.php",
       data: {function: 'update', name: name.value, email: email.value, telephone: telephone.value },
       success: function() { populatelist(); }
   });
}

list.php should look like this:

<?php

if($_POST['function'] == "populate") {
   // your code to get the content from the database and put it in a list
}

if($_POST['function'] == "update") {
   // your code to update the database
}

?>