Jquery pass ajax call with post attribute

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.

Did you try to inspect the request? Chrome Dev tools or Firebug? What do you get? — Juri
– Juri, Commented Jan 10, 2013 at 12:45
1 error, Uncaught ReferenceError: loadSubCats is not defined — Michael Clarke
– Michael Clarke, Commented Jan 10, 2013 at 12:48
which means your function "loadSubCats" containing the $.post never gets called. — Juri
– Juri, Commented Jan 10, 2013 at 12:51
look at the script included/written above loadSubCats function. May be there is some error and so loadSubCats function is not found — Bhavik Shah
– Bhavik Shah, Commented Jan 10, 2013 at 12:53
@MichaelClarke have you tried my answer? I've corrected your code. — MrCode
– MrCode, Commented Jan 10, 2013 at 12:55

mamdouh alramadan · Accepted Answer · 2013-01-10 13:05:30Z

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.

answered Jan 10, 2013 at 13:05

mamdouh alramadan

8,5166 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Clarke Over a year ago

That loads the other page, but the how do i use the value it passed? $_GET, $POST both dont contain it

mamdouh alramadan Over a year ago

use $_POST["catid"] should get you the data passed by the above function.

Marius Darila · Accepted Answer · 2013-01-10 13:08:15Z

1

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

You send catid not "catid"

answered Jan 10, 2013 at 13:08

Marius Darila

8739 silver badges13 bronze badges

Comments

MrCode · Accepted Answer · 2013-01-10 13:08:49Z

1

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);
            }
        });
    });
});

edited Jan 10, 2013 at 13:08

answered Jan 10, 2013 at 12:46

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

2 Comments

Michael Clarke Over a year ago

Tried this it didnt resolve the problem, still getting the ncaught ReferenceError: loadSubCats is not defined and no output on screen.

MrCode Over a year ago

Where you are placing the loadSubCats() function? Put it in the global scope, not in a a $(document).ready or any other closure.

Suresh Kamrushi · Accepted Answer · 2013-01-10 12:54:50Z

-1

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);
    });  
  })
});

edited Jan 10, 2013 at 12:54

answered Jan 10, 2013 at 12:48

Suresh Kamrushi

16.2k13 gold badges79 silver badges93 bronze badges

2 Comments

Michael Clarke Over a year ago

Still receiving the same error and no output. Have checked the file receiving and there are no errors on it.

Suresh Kamrushi Over a year ago

if you are using $(document).ready() than it will be not same error. And if error is same than how you are checking PHP file output?

Collectives™ on Stack Overflow

Jquery pass ajax call with post attribute

4 Answers 4

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related