Jqueri richiesta ajax non riesco ad evitare il refresh

di kaino86 il
9 risposte

Buongiorno a tutti,

come da titolo del topic, ho una pagina dove tramite alcuni pulsanti vorrei esequire determinati comandi SQL.

creato lo script js da associare ai pulsanti che tramite $.ajax esegue una richiesta ad un file PHP.

la pagina in questione viene visualizzata dopo il click sul link del menu, che elimina il contenuto della home e sostituisce il codice html tramite JS, quando il pulsante viene premuto, la queri viene eseguita ma la pagina esegue un ricaricamento riportando l'utente alla home.

codice HTML del pulsante che attiva la funzione

      <div class="col-4 buttons wow fadeInUp">							
				<a class="btn btn-primary btn-customized scroll-link" href="" onclick=JQpost("create_table")   role="button">
					<i class="fas fa-database"></i> genera TABELLE 
				</a>
         </div>

JS della funzione collegata al pulsante

(le righe commentate derivano da tentativi di eseguire la stessa procedura in modi differenti sperando di risolvere qualcosa…..inutilmente)

function JQpost(cmd,var1){

//var xhttp = new XMLHttpRequest();
//xhttp.onreadystatechange = function() {
//	if (this.readyState == 4 && this.status == 200) {
	  // Qui puoi gestire la risposta ricevuta dal server
//	}
//  };
//  xhttp.open("POST", "./postmanager.php", true);
//  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//  var data = "action="+cmd+"&var="+var1;
//  xhttp.send(data);
//  return false;


//$.post("./postmanager.php",{ action: cmd, var: var1})
//	.done(updatecontent("setup"));

	$.ajax({
		type:"POST",
		url: "./postmanager.php",
		data: {action: cmd, var: var1},
		success: function(data) { 
			console.log(data);// You can see the result which is created in chat.php
		  }
	});

}

 PHP che riceve la richiesta AJAX

l'idea era di usare il medesimo file per gestire differenti tipi di operazione in base alla stringa passata

<?php

require_once 'funclib.php';


$action = $_POST['action'];
logtxt("postmanager.php---ricevuto comando: ".$action);
switch ($action){

    case "deleteXLS":
        logtxt("run deleteXLS function");
        $name= $_POST['var1'];
        XLSdelete($name);
        echo "ok";
        break;

    case "importfile":
        logtxt("run importfile function");
        $filename = $_POST['var1'];
        XLStoDB($filename);
        echo "ok";
        break;

    case "importfolder":
        logtxt("run importfolder function");
        XLStoDB();
        echo "ok";
        break;

    case "create_table":
        logtxt("run create table function");
        create_table();
        echo "ok";
        break;

    case "wipe":
        logtxt("run wipe table function");
        wipetable();
        echo "ok";
        break;
}

?>

leggendo poi una mare di articoli e di esempi ho tentato anche di eseguire diversamente la chiamata alla funzione js eliminando:

onclick=JQpost("create_table")

utilizzando al suo posto( dopo aver inserito un ID al pulsante

$('#regentable').click(function(e){
	e.preventdefault();

	$.ajax({
		type:"POST",
		url: "./postmanager.php",
		data: "create_table",
		success: function(data) { 
			console.log(data);// You can see the result which is created in chat.php
		  }
	});

})

in ogni caso il risultato è rimasto sempre lo stesso.


il tutto lo sto testando su XAMPP

qualcuno riesce a dirmi cosa sto sbagliando ?? sto diventando scemo haha

grazie

9 Risposte

  • Ho provato a correggere “e.preventDefault()” ma nessun risultato.

    la avevo in ogni caso inserita proprio per provarle tutte perchè…..magari mi sbaglio ma dovrebbe essere superflua, non trattandosi dell'invio di un form

  • 22/02/2023 - kaino86 ha scritto:


    la avevo in ogni caso inserita proprio per provarle tutte perchè…..magari mi sbaglio ma dovrebbe essere superflua, non trattandosi dell'invio di un form

    Non si va a caso: usando quel nome di funzione, nella Console del browser (tasto F12) avresti trovato evidenza dell'errore.

    Ti consiglio infatti di utilizzare i Developer Tools del tuo browser per fare debugging del tuo script e verificare il funzionamento del programma passo per passo e controllare quello che succede.

  • Be per risolvere diverse cose ho usato ovviamente i developer tools di chrome.

    però un problema simile non lo ho mai avuto e sto faticando a trovare il modo di vedere cosa va a richiamare il refresh della pagina

  • 22/02/2023 - kaino86 ha scritto:


    però un problema simile non lo ho mai avuto e sto faticando a trovare il modo di vedere cosa va a richiamare il refresh della pagina

    Metti un breakpoint nella funzione che esegue l'invio dei dati tramite AJAX.

  • Ciao,

    se vuoi evitare che venga ricaricata la pagina, devi togliere la proprietà:

    href=""

    dal tag <a> del codice HTML del pulsante.

  • Sono proprio pirla ….ho cercato ovunque tralasciando le cose base

    eliminando href o inserendo href="#" tutto funziona come deve.


    risolto!!

    grazie mille 

  • 23/02/2023 - kaino86 ha scritto:


    eliminando href o inserendo href="#" tutto funziona come deve.

    Ma anche usando event.preventDefault() si ottiene lo stesso effetto, quindi sicuramente c'è un problema anche nel codice che potrebbe dare effetti collaterali successivamente.

    Per controllare che funzioni, basta un test semplicissimo, vedi ad esempio questo HTML e JavaScript:

    <a id="someLink" href="https://www.google.com">Click me!</a>
    $("#someLink").on("click", function (event) {
     event.preventDefault();
     alert("Clicked!");
    });
  • Il problema sembra essere il comportamento predefinito del tag <a> quando viene cliccato. Invece di impedire il comportamento predefinito del tag, il pulsante sta eseguendo l'azione predefinita di caricare la pagina.

    Per impedire il comportamento predefinito del tag <a> quando viene cliccato, puoi passare l'oggetto event alla funzione JQpost e poi chiamare event.preventDefault() all'interno della funzione. In questo modo la pagina non verrà ricaricata quando si preme il pulsante.

    Ecco come potrebbe essere modificata la tua funzione JQpost:

    function JQpost(cmd,var1, event){
        event.preventDefault(); // previene il comportamento predefinito del tag <a>
    
        $.ajax({
            type:"POST",
            url: "./postmanager.php",
            data: {action: cmd, var: var1},
            success: function(data) { 
                console.log(data);// You can see the result which is created in chat.php
            }
        });
    }
    

    E poi il codice HTML per il pulsante sarebbe:

    <div class="col-4 buttons wow fadeInUp">							
        <a id="regentable" class="btn btn-primary btn-customized scroll-link" href="#" onclick=JQpost("create_table", null, event) role="button">
            <i class="fas fa-database"></i> genera TABELLE 
        </a>
    </div>
    

    Nota che ho aggiunto un # vuoto come valore dell'attributo href per il tag <a> in modo che non venga caricata una nuova pagina quando viene cliccato.

Devi accedere o registrarti per scrivere nel forum
9 risposte