PDA

Visualizza la versione completa : Risposte lato server con Tecnologia AJAX


rel_style
29-12-2017, 19:05
Ho un form che usa AJAX con Bootstrap, tanto per intederci la stessa tecnologia usata in questa pagina http://tutsme-webdesign.info/tutorials/modals/modal_remote.html

Ha funzionato bene (forse un anno o più) fino a qualche settimana fa, quando mi sono accorto che compilando i campi del modulo form al primo accesso ottieni la corrispondente risposta lato server, ma se cambi i parametri dei campi al secondo SUBMIT la risposta è la stessa del primo accesso, come se venisse memorizzata in "cache" e senza interpellare nuovamente il server. Cosa potrebbe essere accaduto?

vic53
07-01-2018, 16:13
dove sta ajax?

rel_style
07-01-2018, 17:58
Facendo ricerche ho trovato altri utenti con analogo problema (bootstrap 3 cache problem). Si suggerisce un codice simile a questo:




$('body').on('click', '.modal-toggle', function (event) {
event.preventDefault();
$('.modal-content').empty();
$('#myModal')
.removeData('bs.modal')
.modal({remote: $(this).attr('href') });
});



Solo che quel "onclick" proprio nella prima parte permette di distruggere (in un certo qual senso) la "cache" dal secondo click e NON al caricamento della pagina. Già è qualcosa comunque, ma continuo a cercare soluzioni.

ciro78
07-01-2018, 18:40
rel posta il TUO codice.

rel_style
08-01-2018, 13:57
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap version 3.1 Modal with remote content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap core CSS -->
<link href="http://www.taxxi.it/dev/home/extend/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" media="screen">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://www.taxxi.it/dev/home/extend/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="http://www.taxxi.it/dev/home/extend/ajax/libs/respond.js/1.2.0/respond.js"></script>
<![endif]-->
<script>

function randNum(min, max) {
var m=min;
var n=max;
var r=m+Math.round(Math.random()*n); return(r);
}

function CreateXmlHttpReq2(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

function myHandlerMinute() {
if (myRequestMinute.readyState == 4 && myRequestMinute.status == 200) {
var allMinute = myRequestMinute.responseText;
var viewMinute = document.getElementById("risultato");
viewMinute.innerHTML = allMinute;
//alert(''+allMinute+'');
}
}

function codeAddress() {
var rand = randNum(73754,257329065);

var address = 'Italia, Napoli, '+document.getElementById("address").value;
var city = 'Napoli';
var mail = document.getElementById("mail").value;
myRequestMinute = CreateXmlHttpReq2(myHandlerMinute);
myRequestMinute.open("GET","remote.php?rand="+rand+"&address="+address+", "+city+"&mail="+mail+"");
myRequestMinute.send(null);
}
</script>
<style>#myModal .modal-dialog {

width:60%;

}</style>
</head>
<body>

<!-- Bootstrap trigger to open modal -->

<form action="" method="post" class="modal-boby">
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="mail" id="mail" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<label>Indirizzo del Cliente</label><input id="address" type="textbox" value="" size="30" style="height:30px; width:426px; font-weight:bold; font-size:16pt;"><div style="border:0px solid red;"><input type="button" id="posClient" data-toggle="modal" class="btn btn-info" href="remote.php" data-target="#myModal" onclick="codeAddress()" onSubmit="return false" value="invia dati!"/><!--<input type="button" id="posClient" value="invia dati" onclick="codeAddress()" onSubmit="return false" style="height:36px;width:146px; margin-top:0px;">--></div></form>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="risultato">
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://www.taxxi.it/dev/home/extend/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://www.taxxi.it/dev/home/extend/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
</body>
</html>

ciro78
08-01-2018, 20:37
lato js non ci sono anomalie. devi vedere lato server come generi la risposta.
ps usa jquery e soprattutto on usare più onclick

fermat
08-01-2018, 21:18
lato js non ci sono anomalie. devi vedere lato server come generi la risposta.
ps usa jquery e soprattutto on usare più onclick

OT
scusa la curiosità, in che senso non usare più onclick???

ciro78
08-01-2018, 21:26
l'attributo onclick del tag.

oggi è preferibile usare i listner sia con jquery mediante il metodo on che in puro js

fermat
10-01-2018, 09:06
ok perfetto, grazie!

Loading