Jquery pass ajax call with post attribute - php

Question

Checked several topics here on stack overflow and the jquery documentation but still getting stuck.
I basically want this to post (with ajax/jquery) to update a div's content.
function loadSubCats(value)
{
$.post("load_sub_cats.php",
data: { "catid": value },
type: "POST",
contentType: "application/x-www-form-urlencoded",
function(data) {
$('#sub_categories').html("Data Loaded: " + data);
});
}
But im getting no responses what so ever. The page contains the sub_categories div, and this is called onclick for a form event.
<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'>
So basically, it should past the value of the field (cselect3) and load_sub_cats.php should just echo $_POST[catid]; thats it. But im getting zero activity on it so it think its something simple i've screwed up.

Answer 1

you have a problem with $.post syntax. Here's how it should be:
function loadSubCats(value)
{
$.post("load_sub_cats.php",{ "catid": value },
function(data) {
$('#sub_categories').html("Data Loaded: " + data);
});
}
as simple as it is.

Answer 2

function loadSubCats(value)
{
$.post("load_sub_cats.php",
{ catid: value },
function(data) {
$('#sub_categories').html("Data Loaded: " + data); }
);
}
You send catid not "catid"

Answer 3

You're mixing the syntax of $.post and $.ajax which are different. If you want to use the object syntax then call $.ajax, because $.post takes its arguments as a simple un-named list.
function loadSubCats(value)
{
$.ajax({
url : "load_sub_cats.php",
data: { "catid": value },
type: "POST",
contentType: "application/x-www-form-urlencoded",
success: function(data) {
$('#sub_categories').html("Data Loaded: " + data);
}
});
}
You could also directly attach the change event instead, of inline and do away with the loadSubCats() function:
$(document).ready(function(){
$('select[name=cselect3]').change(function(){
$.ajax({
url : "load_sub_cats.php",
data: { "catid": $(this).val() },
type: "POST",
contentType: "application/x-www-form-urlencoded",
success: function(data) {
$('#sub_categories').html("Data Loaded: " + data);
}
});
});
});

Answer 4

two things:
you are using type in post which is not required.
Even after removing it is not working just try to alert it-
function loadSubCats(value)
{
$.post("load_sub_cats.php",
data: { "catid": value },
type: "POST",
contentType: "application/x-www-form-urlencoded",
function(data) {
alert(data)
$('#sub_categories').html("Data Loaded: " + data);
});
}
By alert you will come to know -
1) if there is any php error it will alert that,
2) If php is working fine that it will alert with your values.
updating my post as per latest comments:
Try to use like below:
$(document).ready(function() {
$('.e1').change(function() {
$.post("load_sub_cats.php",
data: { "catid": value },
type: "POST",
contentType: "application/x-www-form-urlencoded",
function(data) {
alert(data)
$('#sub_categories').html("Data Loaded: " + data);
});
})
});