Jqueri richiesta ajax non riesco ad evitare il refresh

di il
9 risposte

Jqueri richiesta ajax non riesco ad evitare il refresh

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

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    22/02/2023 - kaino86 ha scritto:


    e.preventdefault();

    Controlla bene il nome della funzione preventDefault(): JavaScript è “case sensitive.

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    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

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    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.

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    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

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    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.

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    Ciao,

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

    href=""

    dal tag <a> del codice HTML del pulsante.

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

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

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


    risolto!!

    grazie mille 

  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    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!");
    });
  • Re: Jqueri richiesta ajax non riesco ad evitare il refresh

    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