How to call php script with ajax?

Question

I'm trying to create multiple tables where I can move table rows between the tables and have ajax call a php script that updates the DB with the new values, ie the new parent to the row.

It's only html and javascript now and I'm wondering how the ajax part should look like to call a php script that updates the DB? And also if I should make some changes to the javascript/html part?

HTML:

<table class="tables_ui" id="t_draggable1"><h4>Table 1</h4>
<tbody class="t_sortable">
  <tr>
    <th>Title</th>
    <th>Status</th>
    <th>Creation date</th>
  </tr>
  @foreach($tasks as $task)
    <tr class="row1" data-id="{{ $task->id }}">
      <td>{{ $task->title }}</td>
      <td>{{ ($task->status == 1)? "Completed" : "Not Completed" }}</td>
      <td>{{ date('d-m-Y h:m:s',strtotime($task->created_at)) }}</td>
    </tr>
  @endforeach
</tbody>
</table>

<table class="tables_ui" id="t_draggable2"><h4>Table 2</h4>
<tbody class="t_sortable">
  <tr>
    <th>Title</th>
    <th>Status</th>
    <th>Creation date</th>
  </tr>
  <!-- More <td> rows here ... -->
</tbody>
</table>

<!-- More tables here ... -->

Javascript:

<script>
$(document).ready(function() {
  var $tabs = $('#t_draggable2')
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    zIndex: 999990
  }).disableSelection();

  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) { return false; }
  });
});
</script>

Answer 1

For an $.ajax call in js you should pay attention to a couple of things regarding what you'd like to pass to the PHP file and what you'd want as a return (response) . A simple $.ajax call for posting data down below:

 var Example1 = "123";
 var Example2 = "456";

 $.ajax({
     type: "POST",
         data: {
             Example1: example1,
             Example2: example2
         },
         url: "config/post.php",
         success: function(){
            setTimeout(function(){// wait for 5 secs(2)
                location.reload(); // then reload the page.(3)
         }, 100);
     }
 })

In the example above the variables (var) , "Example1" and "Example2" will be inserted inside the request as the data.

Within your url: you'll specify the post url to your php file. In the PHP file you're then able to obtain the data by using the second data { Attributes in a $_REQUEST see the example below:

$example1 = $_REQUEST['example1']; $example2 = $_REQUEST['example2'];

echo $example1 . $example2;

To check if your data is obtained you could use the console.log() function above your $.ajax call to be sure.

 var Example1 = "123";
 var Example2 = "456";


 // Check for the values

 console.log(Example1 + Example2)

 $.ajax({
     type: "POST",
         data: {
             Example1: example1,
             Example2: example2
         },
         url: "config/post.php",
         success: function(){
            setTimeout(function(){// wait for 5 secs(2)
                location.reload(); // then reload the page.(3)
         }, 100);
     }
 })

I hope this helps and if you have any questions please ask them in the comments section! (: