Ajax Newbie Training (PHP JQuery)

Question

I am new to AJAX, I am trying to read the whole page and change the element inside it without updating.

I have a page that looks like this:

I am using PHP and jQuery. Whenever I click on any tr , it gets an identifier and puts the data assigned in db to that id in the form. Therefore, I can update user data.

Obviously, when the form is empty, it is a standard insert in the database.

When you press the last td each tr (Eliminar), it removes that user from the database.

My files:

• The controller that creates the page (crud.php).
• A database containing each method associated with the database (database.php)
• CSS files and template with basic html, js.

I want to do all these updated pages using Ajax, but I get something like:

My entire page was inserted into the form instead of replacing my page with a new one or replaced only with a new form.

Any advice / guidance that can help me with learning? I searched all the related AJAX content on this site. Also the jQuery site ...

I really don't understand how AJAX works and how to link it with JS and PHP

Relevant Code:

 //Capturador de eventos $(document).ready(function(){ //Clickar en cualquier lado del tr (menos el ultimo td) para actualizar ese registro $("#tablaDatos tr td:not(:last-child").click(function() { if (confirm("¿Seguro que desea modificar el registro?")){ $("#idSelected").val($(this).closest('tr').attr('id')); var data = $('#idSelected').serialize(); $.post( 'crud.php', {data: data}, function(response){ $('#result').html(response); } ); return false; }else return false; }); //Clickar en el borrar del listado para eliminar ese registro $("#tablaDatos input").click(function(){ if (confirm("¿Seguro que deseas borrarlo del registro?")){ $("#idSelected").val($(this).closest('tr').attr('id')); $("#eliminar").val("Eliminar"); var data = $('#idSelected').serialize(); $.post( 'crud.php', {data: data}, function(response){ $('#result').html(response); } ); return false; }else return false; }); // Clickar en Alta/Modificar para enviar los datos al crud a través de post $('#submit').click(function() { var data = $('#envioDatos').serialize(); $.post( 'crud.php', {data: data}, function(response){ $('#envioDatos').html(response); $("#envioDatos input, textarea").val(''); }); return false; }); }); <?php // INCLUDES include 'lib/pintarHTML.php'; include 'lib/database.php'; // VARS $tableName = 'ALEJANDRO'; $clientes = array (); $page = null; $body = null; $elemSel = null; $obj_pintar = new pintarHTML (); $ID = null; $result = null; $type = null; // CONECTION DB $obj = new database (); // POST READ if (isset ( $_POST )) { mpr($_POST); if ($_POST['alta'] == "Alta" && empty ( $_POST['id'] )) { // Llamo a insertar $result = $obj->insert ( $_POST ); } else if ($_POST['modificacion'] == "Modificacion" && ! empty ( $_POST['id'] )) { // Llamo a modificar $result = $obj->update ( $_POST ); } else if ($_POST['eliminar'] == "Eliminar" && ! empty ( $_POST['idSelected'] )) { // Llamo a eliminar $result = $obj->delete ( $_POST ); } else if ($_POST['idSelected'] && empty ( $_POST ['eliminar'] )) { // Elemento Seleccionado $ID = $_POST['idSelected']; } } // Client list $clientes = $obj->select ( $tableName ); // Title $body .= $obj_pintar->pintarTitulo ( 'LISTADO DE CLIENTES' ); // Check ID if (isset ( $ID )) { // Formulario relleno con los datos del usuario para modificarlos $elemSel = $obj->select ( $tableName, '*', 'id=' . $ID, null ); $body .= $obj_pintar->pintarFormulario ( $elemSel ); } else { // Formulario vacío para alta de usuario $body .= $obj_pintar->pintarFormulario ( $elemSel ); } // Page echo if (!empty($result)) { $body .= $obj_pintar->pintarMessage($result); } $body .= $obj_pintar->pintarTable ( $clientes ); $page = $obj_pintar->composeHTML ( $body ); echo $page; // Debug function mpr($value, $text = null) { echo "<pre>" . $text; print_r ( $value ); echo "</pre>"; } ?> 

Answer 1

In general, Ajax is used to perform some data manipulation asynchronously. You click something on your page, the data is sent somewhere else so that it can be manipulated, and the result of this manipulation is returned as an answer. Then you can act based on this answer.

In your case, let's say you want to remove a client. You can make an ajax call for your clientDataEdit.php and tell it to remove the student with a specific identifier, for example.

 $.post( "clientDataEdit.php", { function: "Delete", id: "#someID" } ); 

Then in your php you check which function is called (delete in this case) and perform the necessary manipulations

 if(isset($_POST['function'])){ if(($_POST['function'])=="Delete"){ //perform the manipulation and respond echo "OK"; } } 

Then on the client page you will catch the answer and act on it:

 $.post( "clientDataEdit.php", { function: "Delete", id: "#someID" }) .done(function( data ) { alert( "Execution status: " + data ); }); 

This should give you a warning "Execution Status: OK." If everything was in order. You must replace this warning with the necessary local manipulations (for example, hide the form, send it to another page, load another form, which would actually be).