how to make a button perform an action and at the same time (second action) reload the page with new data

Question

how to make a button perform an action and at the same time (second action) reload the page with new data

Navigation

#1 by (0 votes)

1

I have doubts when implementing this requirement; I have a page in php in which I show a table with 10 records of MYSQL same that I can select to be able to update in the database, with javascript and ajax sent the data again to another php to be I ordered this action but all courre in the main there are no redirections, and what I need is the following at the moment of sending the data that I will update and process correctly, I immediately reload another 10 records and so on until finish all the records of my database; I had thought of doing page but it is important that when updating every 10 records these are no longer displayed (since they are already updated) I do not know if we could only go to the following ones pages and that the previous ones are disabled but I do not know which option is more convenient.

NOTE: 10 records with 'NC' value not captured are shown, from which the user chooses "Save" these chosen ones are updated with a value 'CA' OF Captured in the database and those NOT SELECTED in the same way they update with another value 'E' of eliminated, although for the user these do not have importance, internally if; that's why I have to show 10 to 10 records.

I append my code in Javascript / Ajax and my php / html:

$(document).ready(function(){
    
}); 
    $('#f1').submit(function(event) {
    event.preventDefault();
    var id_select= [];
    var no_select=[];
    var i=0;
    $('input[type=checkbox]').each(function(){//SE LLAMA A CADA UNO DE LOS CHECKBOX 
    
        if ($(this).is(':checked')){
            //sweetAlert( "Notas Guardadas", "Envio Exitoso", "success");
            id_select.push($(this).val());
            
        }
        if (!$(this).is(':checked')){    
            no_select.push($(this).val());
            ++i;
            console.log("Id NO SELECCIONADO   "+ no_select);
            //sweetAlert( "Porfavor elije una opciòn  ", "Error de Envio", "error");
        }else{
            console.log("Id SELECCIONADO   "+ id_select);
       
        $.ajax({
                url: "views/upd_notas.php",
                type: "POST",
                datatype: "json",
                data: {'id_nota':id_select, 'no_select':no_select}
        }).done(function(info){
            //$('#mensaje').html(info);
            sweetAlert("Datos Enviados", "Envio Exitoso", "success");
        }); 
        //alert(JSON.stringify(id_select));//PARA FINES DIDACTTICOS DE VER QUE LOS id_select SE ENVIABAN CORRECTAMENTE
        //alert(JSON.stringify(no_select));//PARA FINES DIDACTTICOS DE VER QUE LOS no_select SE ENVIABAN CORRECTAMENTE
        }
       
    });
    });

<?php

include_once 'bin/init.php';

?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Busca_Notas</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="css/general.css">

</head>
<form name="f1" id="f1" method="post">   

<body>

<?php include "views/".$p.".php"; 
    $sql = "select n.id_nota, n.url, n.palabra, p.cliente, n.estado  from notas n
join palabras p on p.palabra = n.palabra
ORDER BY n.id_nota asc
LIMIT 10";
$result = $mysqli->query($sql);

if ($result->num_rows > 0){ 

    echo "<table border=1 cellpadding=4 cellspacing=0>";
    
    echo "<tr>
    <th colspan=6 bgcolor=black class=tagline align=center><h4>NOTAS</h4></th>
    <tr  class=tagline align='center'>
    <th>#</th>
    <th>Url</th>
    <th>Cliente</th>
    <th>Palabra</th>
    <th>Estado</th>
    <th>Selecciona</th>
    </tr>";
    $cont=1;
    while($row = $result->fetch_array()){
        echo "<tr id=$row[id_nota]>
        <td align='center'>$cont</td>
        <td><a href='$row[url]'>$row[url]</a></td>
        <td align='center'>$row[cliente]</td>
        <td align='center'>$row[palabra]</td>
        <td align='center'>En Proceso</td>
       <td>
            
            <input type=checkbox id='notas' value=$row[id_nota] name='id_nota[]'/>
            <label for=checkbox>Guardar</label>        
           
        </td>
        </tr>";      
        $cont++; 
    }
    echo "</table>";
   
}

?>   
 
<br>
<input type="submit"  name="Enviar" value="Enviar" id="BotonEnviar"  />
 <br>
 <!--<div id="mensaje"></div>SE UTILIZA INTERNAMENTE PARA VALIDAR EL ENVIO DE DATOS A PHP-->
</form>
<script  src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript"  src="js/valida.js"></script>

</body>
</html>

mysql javascript php ajax

asked by Janeth HURTADO PACHECO 02.10.2018 в 17:38

source

1 answer

Backup in oracle db using triggers Problem with rad studio Embarcadero 10.2.3

score 0 · Answer 1

You do not necessarily have to do it with AJAX, you could put the data in a natural way with a form and the first thing that your php script does is make the change you want and secondly select the following records identifying them by the field that you mention that it tells you if they were already edited or not.

Now if you really need to do it for AJAX you first need to separate your logic for the selection of the data to a php script independent of the html view so that your ajax function points to this script make the change in your records and then select the new you need with the necessary conditions and return them in JSON format and with javascript to paint them in your view, now if you do not want to paint them with javascript you can reload the page when finishing the execution of your AJAX function with:

location.reload()

Even though it would not make much sense to have used ajax and if you use this last option you would have to have your logic for the selection in the view.