How to implement ajax if I work with multiple files

Navigation
0

I have this interface link and I want that when the user inserts, deletes or modifies something, the table is refreshed without the need to update . But when I click on any button, it redirects me to the file insertar.php or modificar.php as the case may be. I do not have all the code in a single file because it is very extensive in itself.

How can I implement ajax in this interface?

Annex the code of the form below. Whatever they need, they let me know. 

<form   method="POST" enctype="multipart/form-data" >

                        <input type="hidden" name="id_playera" id="id_playera"><br>
                        Nombre:<br>
                        <input type="text" name="nombre_playera" id="nombre_playera" size="35" placeholder="Escribe el nombre de la playera" required="required"><br>
                        Precio:<br>
                        <input type="number" name="precio_playera" id="precio_playera" min="1" size="35" placeholder="Escribe el precio de la playera" required="required"><br>
                        Color:<br>
                        <input type="text" name="color_playera" id="color_playera" size="35" placeholder="Escribe el color de la playera" required="required"><br>
                         Chica:<br>
                        <input type="number" name="talla_chica" id="talla_chica" min="0"  step="1" size="35" placeholder="Escribe la cantidad chica" required="required"><br>
                         Mediana:<br>
                        <input type="number" name="talla_mediana" id="talla_mediana" min="0" step="1" size="35" placeholder="Escribe la cantidad mediana" required="required"><br>
                         Grande:<br>
                        <input type="number" name="talla_grande" id="talla_grande" min="0"  step="1" size="35" placeholder="Escribe la cantidad grande " required="required"><br>
                         Extra grande:<br>
                        <input type="number" name="talla_egrande" id="talla_egrande" min="0"  step="1" size="40" placeholder="Escribe la cantidad de extra grande" required="required">
                        <img id="imgPlayera" src="#" alt="your image" style="margin-left: 400px" /><br>
                         <input type='file' name="nombreArchvio" id="btnimgplayera" onchange="readURL(this);" value= "Escoge una imagen" style="margin-left: 500px; margin-top-280px" required="required"/>
                        <input type="hidden" name="imagen_playera" id="imagen_playera"> 

                    Descripcion:<br>
                    <textarea type="text" rows="4" cols="50" name="descripcion_playera" id="descripcion_playera" maxlength="200" required="required" placeholder="Escibre una descripción del producto (Max 200 caracteres)"></textarea><br>

                <input type="submit" onclick="myFunction()" formaction="insertar_playera.php" name="btninsertar" value="insertar" enctype="multipart/form-data" >
<script>
function myFunction() {
    alert("Se ha agregado el producto correctamente");
}
</script>
                <input type="submit" formaction="modificar_playera.php" name="btnmodificar" value="modificar">
                <input type="submit" formaction="eliminar_playera.php" name="button" value="eliminar">
                </form>
                <br>
                <input type="text" id="busca_playera" onkeyup="myFunction()" placeholder="Buscar playera..">

insert playera.php 

<?php
$conexion = mysql_connect("localhost", "root", "12345678");
if (!$conexion) {
    echo "No pudo conectarse a la BD: " . mysql_error();
    exit;
}

if (!mysql_select_db("metalstorm")) {
    echo "No ha sido posible seleccionar la BD: " . mysql_error();
    exit;
}


if(isset($_POST['btninsertar']))
{
    $fileName = $_FILES['nombreArchvio']['name'];
    $tempName = $_FILES['nombreArchvio']['tmp_name'];
        if(isset($fileName))
    {

        echo "Nombre temporal".$tempName."<br>";
        echo "Nombre del arcv".$fileName."<br>";


        echo $tempName;
        echo $fileName;


                if(!empty($fileName))
        {
            $location = "productos/playeras/";
            if(move_uploaded_file($tempName, $location.$fileName))
            {

$nombre_playera=$_POST['nombre_playera'];
$precio_playera=$_POST['precio_playera'];
$color_playera=$_POST['color_playera'];
$talla_chica=$_POST['talla_chica'];
$talla_mediana=$_POST['talla_mediana'];
$talla_grande=$_POST['talla_grande'];
$talla_egrande=$_POST['talla_egrande'];
$descripcion=$_POST['descripcion_playera'];
$imagen=$_POST['imagen_playera'];
$sql = "INSERT into playeras ( nombre, precio, color, chica, mediana, grande, extra_grande, descripcion, imagen)
 VALUES ('$nombre_playera','$precio_playera', '$color_playera', '$talla_chica', '$talla_mediana','$talla_grande','$talla_egrande', '$descripcion', '$fileName') ";

$resultado = mysql_query($sql);



if (!$resultado) {
    echo "No se pudo ejecutar con exito la consulta ($sql) en la BD: " . mysql_error();

}else{
    echo "dato insertado exitosamente";
}
                echo 'Copia exitosa';
            }
        }
    }
}
    
asked by Heber Solis 11.07.2017 в 06:51
source

1 answer

0

You should assign a call via Ajax to each php to insert, modify, delete on the corresponding buttons.

You should also have another PHP that will "paint" the lower table when something is updated.

For this you should change the inputs so that: 

<input type="button" id="btninsertar" value="insertar">

Put an id to the form to be able to send its values through Ajax to the corresponding php, in addition to removing the method so that it does not send anything. 

<form id='frm' enctype="multipart/form-data">

I put you code for jQuery so you should add the library in the html so that, or you download the file js and you put it with your code: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Now you will need a code similar to this for each button: 

$('#btnInsertar').on('click', function() {

    $.ajax({
        url: 'insertar_playera.php',
        type: "POST",
        dataType: 'text',
        data: $('#frm').serialize(),
        error: function(){
            alert("Error al insertar playera");
        }
    }).done( function(ret) {
       if ( ret == 'OK' ) {
          actualizarTabla();
       } else {
          alert( ret );
       }
    });
});

The php insert_playera.php will receive by POST all the fields of the form with the name that each element has in the attribute name . I have configured you so that the php you have to do return plain text (text), should return the text OK if inserted correctly or any other text in case of error. That is detected in the part of the done, and shows the error or updates the lower table.

The same as you have here for the insert button you should do it for the rest of the inputs, you would have to add a code similar to the previous one for each button, calling the corresponding php, .....

The updateTable function is the one that will call the php that will generate the HTML code from the table below. This table would place it within a <div id='tabla'> to be able to change the contents of the table with the output of the php. 

function actualizarTabla() {

    $.ajax({
        url: 'listar_playeras.php',
        dataType: 'html',
        error: function(){
            alert("Error al listas las playeras");
        }
    }).done( function(ret) {
        $("#tabla").html(ret);    
    });
}
    
answered by 11.07.2017 в 13:57
How can I print multiple Images with Vue carousel-3d? Problem with library ChilkatDotNet45.dll