FINAL EDIT - ANSWER : Thanks for your help everyone. In the end it came down to some htaccess problems in changing the url names and for some odd reason, even when referencing the root (./ajax) it didn't like it. I don't know why still, but it just didn't. When I hard-coded the whole URL in, it worked. Ridiculous - thanks for your help everyone. Everyday is a school day....
I can not figure out for the life of me why this is erroring - can someone please cast a second pair of eyes over this - it's probably something really stupid, thanks in advance for the help:
EDIT Stupidly I was putting the wrong URL in - HOWEVER... Now I have put the correct URL in, the site just hangs and crashes. Any ideas please?
EDIT 2 Just to add even more detail to this post, the "LOADING..." div appears, so the ajax definitely starts, and then the page crashes and becomes unresponsive. I have added extra validation to ensure that the PHP file exists. It does. The PHP file is simply echoing out a h1 tag. This is a complete enigma as I was doing a similar ajax request on a home server yesterday and it worked fine.
EDIT 3 Thank you for everyone's input and help on this so far. Upon further testing, I have removed the data property from the JQuery AJAX request and it STILL becomes completely unresponsive and crashes. Could this be server related? I'm really running out of ideas...
HTML:
<input id="pc" class="sfc" name="ProdCat[]" type="checkbox" value="">
<input id="psc" class="sfc" name="ProdSubCat[]" type="checkbox" value="">
<input id="bf" class="sfc" name="BrandFil[]" type="checkbox" value="">
JQuery:
$('input[type="checkbox"]').change(function(){
var name = $(this).attr("name");
var ProdCatFil = [];
var ProdSubCatFil = [];
var BrandFil = [];
// Loop through the checked checkboxes in the same group
// and add their values to an array
$('input[type="checkbox"]:checked').each(function(){
switch(name) {
case 'ProdCatFil[]':
ProdCatFil.push($(this).val());
break;
case 'ProdSubCatFil[]':
ProdSubCatFil.push($(this).val());
break;
case 'BrandFil[]':
BrandFil.push($(this).val());
break;
}
});
$("#loading").ajaxStart(function(){
$(this).show();
$('.content_area').hide();
});
$("#loading").ajaxStop(function(){
$(this).hide();
$('.content_area').show();
});
$.ajax({
type: "GET",
url: '../ajax/ajax.php',
data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
success: function(data) {
$('.content_area').html(data);
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
});
PHP (just to prove it's working):
echo '<h1>TEST TEST TEST </h1>';
Everything is okay but you still wrong... See at your data: properties:
$.ajax({
type: "GET", // The get ajax type cannot send data as post
url: '../ajax/ajax.php',
data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
success: function(data) {
$('.content_area').html(data);
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
and change it with type:"POST":
$.ajax({
type: "POST",
url: '../ajax/ajax.php',
data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
success: function(data) {
$('.content_area').html(data);
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
Try This you have not added closing braces of error...
//Add document ready function and remove double braces around checkbox it should be $('input[type=checkbox]').change(function(){ in 2 places..
$('input[type=checkbox]').change(function(){
var name = $(this).attr("name");
var ProdCatFil = [];
var ProdSubCatFil = [];
var BrandFil = [];
// Loop through the checked checkboxes in the same group
// and add their values to an array
$('input[type=checkbox]:checked').each(function(){
switch(name) {
case 'ProdCatFil[]':
ProdCatFil.push($(this).val());
break;
case 'ProdSubCatFil[]':
ProdSubCatFil.push($(this).val());
break;
case 'BrandFil[]':
BrandFil.push($(this).val());
break;
}
});
$("#loading").ajaxStart(function(){
$(this).show();
$('.content_area').hide();
});
$("#loading").ajaxStop(function(){
$(this).hide();
$('.content_area').show();
});
$.ajax({
type: "GET",
url: '../ajax/ajax.php',
data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
success: function(data) {
$('.content_area').html(data);
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
});
Or you can use mine ajax request with your changing
var detailGet = 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil;
// Use POST or GET
$.get("../ajax/ajax.php", detailGet, function (response, status, xhr) {
if(status == "success") {
$('.content_area').html(response);
} else if(status == "error") {
alert('Something when wrong.');
}
});
I thin you mistakenly concatenate string with array in your data object.
$.ajax({
type: "GET",
url: '../ajax/ajax.php',
data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
success: function(data) {
$('.content_area').html(data);
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
Trying with an object with key/value pairs may resolve your issue
$.ajax({
type: "GET",
url: '../ajax/ajax.php',
data: { // Here I use an object with key/value pairs. If value is an Array, jQuery serializes multiple values with same key.
'ProdCatFil': ProdCatFil,
'ProdSubCatFil': ProdSubCatFil,
'BrandFil': BrandFil
},
success: function(data) {
$('.content_area').html(data);
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
Can you try this:
$('input[type="checkbox"]').change(function(){
var name = $(this).attr("name");
var ProdCatFil = [];
var ProdSubCatFil = [];
var BrandFil = [];
// Loop through the checked checkboxes in the same group
// and add their values to an array
$('input[type="checkbox"]:checked').each(function(){
switch(name) {
case 'ProdCatFil[]':
ProdCatFil.push($(this).val());
break;
case 'ProdSubCatFil[]':
ProdSubCatFil.push($(this).val());
break;
case 'BrandFil[]':
BrandFil.push($(this).val());
break;
default:
// Checkboxes which are not
// a part of this loop.
break;
}
});
$("#loading").show();
$('.content_area').hide();
$.ajax({
type: "GET",
url: '../ajax/ajax.php',
data: 'ProdCatFil=' + encodeURIComponent(ProdCatFil.join(",")) + '&ProdSubCatFil=' + encodeURIComponent(ProdSubCatFil.join(",")) + '&BrandFil=' + encodeURIComponent(BrandFil.join(",")),
success: function(data) {
$('.content_area').html(data);
},
complete: function () {
$("#loading").hide();
$('.content_area').show();
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
});
<script type="text/javascript">
$(document).ready(function () {
$("input[type=checkbox]").change(function () {
var name = $(this).attr("name");
var ProdCatFil = [];
var ProdSubCatFil = [];
var BrandFil = [];
// Loop through the checked checkboxes in the same group
// and add their values to an array
$('input[type=checkbox]:checked').each(function () {
switch (name) {
case 'ProdCatFil[]':
ProdCatFil.push($(this).val());
break;
case 'ProdSubCatFil[]':
ProdSubCatFil.push($(this).val());
break;
case 'BrandFil[]':
BrandFil.push($(this).val());
break;
}
});
$("#loading").ajaxStart(function () {
$(this).show();
$('.content_area').hide();
});
$("#loading").ajaxStop(function () {
$(this).hide();
$('.content_area').show();
});
$.ajax({
type: "GET",
url: 'ajaxReq.php',
data: 'ProdCatFil=' + ProdCatFil + '&ProdSubCatFil=' + ProdSubCatFil + '&BrandFil=' + BrandFil,
success: function (data) {
$('.content_area').html(data);
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('.content_area').html("<h2>Could not retrieve data</h2>");
//alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
});
});
</script>