Pending ajax requests
Na meerdere keren het formulier te submitten verschijnen de resultaten steeds trager.
In de chrome developer tools zie ik wel meer info en dat is dat hij steeds het bestand content.php opnieuw wil laden nadat dit request eigenlijk al is afgelopen. (als ik het zo goed zeg..)
Na 20 x submitten voert hij 20x content.php uit en verschijnen de resultaten vele seconden later.
Weet iemand wat ik fout doe?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click","#search_submit",function(){
$('#loading').show();
$("#sb").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "ajax/content.php",
success: function(data){
$("#content").html(data);
$('#loading').hide();
}
});
return false;
});
});
});
</script>
$(document).ready(function(){
$(document).on("click","#search_submit",function(){
$('#loading').show();
$("#sb").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "ajax/content.php",
success: function(data){
$("#content").html(data);
$('#loading').hide();
}
});
return false;
});
});
});
</script>
Mijn url is volgens mij gewoon localhost/naam/index.php
Gewijzigd op 03/01/2013 07:48:37 door N K
Alleen, je zegt dat click niet werkt op dit element? Dat is inderdaad vreemd, tenzij het element later wordt aangemaakt. Wat voor functies heb je nog meer op dit element?
dus veranderen in:
$('#search_submit').on("click",function(){
?
@Erwin, ik heb geen andere functies op dit element.
Toevoeging op 03/01/2013 10:27:09:
@kees, even snel getest maar dat lijkt hem ook niet te zijn.
Gewijzigd op 03/01/2013 10:25:02 door N K
Als #search_submit je submit button is in je form #sb dan krijg je dat na een klik op je button (wat eigenlijk al een submit is), je nog in je form submit de ajax call gaat doen. Daardoor bind je eigenlijk dat submit event aan je form, en dat doe je elke keer. Elke keer dat je op die knop drukt krijgt je form dus een extra event handler.
Simpele oplossing: de ajax call direct in de click event handler van je button uitvoeren. Dan zou het moeten werken.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click","#search_submit",function(){
$('#loading').show();
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "ajax/content.php",
success: function(data){
$("#content").html(data);
$('#loading').hide();
}
});
return false;
});
});
</script>
$(document).ready(function(){
$(document).on("click","#search_submit",function(){
$('#loading').show();
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "ajax/content.php",
success: function(data){
$("#content").html(data);
$('#loading').hide();
}
});
return false;
});
});
</script>
Gewijzigd op 03/01/2013 10:39:33 door Erwin H
Mag ik vragen welk programma je gebruikt in je eerste post?
Alvast bedankt.
Lano
Of notepad ;-)
Aan de andere kant geeft die nu als melding "geen resultaten gevonden". Deze geeft hij alleen als numrows "0 " is van de query. mmmm...vanavond maar even er wat meer tijd aan besteden,.
Daar zie ik dit:
<div class='results'>Er zijn geen events gevonden.
</div><ol id ="events"></ol>
XHR finished loading: "http://www.test.nl/ajax/content.php". jquery-1.8.2.js:8416
send jquery-1.8.2.js:8416
jQuery.extend.ajax jquery-1.8.2.js:7968
(anonymous function) www.test.nl:506
jQuery.event.dispatch jquery-1.8.2.js:3063
elemData.handle.eventHandle