Pending ajax requests
Zet dan anders even een alert in je success functie (alert(data); bijvoorbeeld). Als het goed is zou je dan moeten zien of de data die je terugkrijgt in elk geval klopt.
Op eenzelfde wijze kan je nog de error functie toevoegen met een alert, zodat je ook iets ziet als er een fout is opgetreden.
Een error geeft onderstaande wat er wat interessanter uit ziet:
Uncaught TypeError: Object function ( data, fn ) {
if ( fn == null ) {
fn = data;
data = null;
}
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
} has no method 'on'
Toevoeging op 03/01/2013 14:20:04:
o wacht volgens mij heb ik iets fout gedaan..Hoe plaats je een error hierbij?
Toevoeging op 03/01/2013 14:22:43:
Zoiets??
<script type="text/javascript">
$(document).ready(function(){
$(document).error.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();
alert(error);
}
});
return false;
});
});
</script>
Quote:
error(jqXHR, textStatus, errorThrown)Function
A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and JSONP requests. This is an Ajax Event.
A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and JSONP requests. This is an Ajax Event.
Toevoeging op 03/01/2013 15:06:32:
Maar overigens denk ik dat er door mijn aanpassing nog een ander probleempje is ingeslopen. Je had in de call dit staan:
Code (php)
1
data : $(this).serialize()
Waarbij this naar het form verwees (het stond immers binnen het form submit event. Echter, als je het daar nu uit hebt gehaald, klopt die this referentie niet meer. Je zal dus in plaats van this het form daar moeten selecteren.
Onderstaand het werkende script:
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 : $('#sb').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 : $('#sb').serialize(),
cache: false,
url: "ajax/content.php",
success: function(data){
$("#content").html(data);
$('#loading').hide();
}
});
return false;
});
});
</script>
Gewijzigd op 03/01/2013 16:19:59 door N K
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
$(document).ready(function(){
var loading = $('#loading'),
content = $('#content'),
sb = $('#sb');
$("#search_submit").on("click", function(e){
loading.show();
$.ajax({
type: "POST",
data : sb.serialize(),
cache: false,
url: "ajax/content.php",
success: function(data){
content.html(data);
loading.hide();
}
});
return false;
});
});
</script>
$(document).ready(function(){
var loading = $('#loading'),
content = $('#content'),
sb = $('#sb');
$("#search_submit").on("click", function(e){
loading.show();
$.ajax({
type: "POST",
data : sb.serialize(),
cache: false,
url: "ajax/content.php",
success: function(data){
content.html(data);
loading.hide();
}
});
return false;
});
});
</script>
En eventueel is de $(elem).load() functie hier nog makkelijker.