Ajax function not sending data onclick

Question

PROBLEM SOLVED!!!

HOW?

First of all the mistake is this one:

data: 'rate' + $('rate').val(),

what needs to get changed as you all told me right to:

data: 'rate='+rate, or data: {rate: rate},

but there is also another problem with my server settings as well which needs (I dont know the reason) an absolt URL to the php file instead a relative.

THANK YOU ALL FOR YOUR TIME AND YOUR KIND HELP!

---

I am having some trouble with an onclick element for a rating script. When a user clicks on one of those fields, the value should be send via an ajax post method.

<li id="rating-boxes-rate" onclick="rateFunction(1)"></li>
<li id="rating-boxes-rate" onclick="rateFunction(2)"></li>
<li id="rating-boxes-rate" onclick="rateFunction(3)"></li>
<li id="rating-boxes-rate" onclick="rateFunction(4)"></li>
<li id="rating-boxes-rate" onclick="rateFunction(5)"></li>

The javsscript code:

function rateFunction(rate){
     $.ajax({
         url: '../rate.php',                    //rate.php location in parent folder
         type: 'POST',
         data: 'rate' + $('rate').val(),
         success: function(html){
                     alert('Rating: ' + rate);          //just to check, will be deleted later
                     $('#message_success').html(html); //message div id located in my html to show the outcome
         }
     });
     return false;
}

At this point the alert gets shown correctly but unfortunately the data is not getting send to the rate.php which at this point is a simple echo statement for testing:

$rate = $_POST['rate'];
echo $rate;

Does anyone see where exactely my code is wrong? Thank you in advance.

Answer 1

I dont think $('rate').val() signifies anything; and you want to pass the rate values such as - 1,2,3.. to the php.

So try this-

data: {
    rate: rate
},

instead of -

data: 'rate' + $('rate').val(),

---

On the side note, you should not use unobtrusive javascript -

You could do it like this-

<li id="rating-boxes-rate" rate="1"></li>
...

<script>
 $("#rating-boxes-rate").click(function(e) {
  var rate=$(this).attr('rate');
  $.ajax({
     url: '../rate.php',                    //rate.php location in parent folder
     type: 'POST',
     data: {rate: rate},
     success: function(html){
        alert(html);
     }
 });
});

Answer 2

Make passing of data a json .

data: {
    rate : rate
}

note that it's always key then value

eg

<input type="text" id="foo_bar" />

data : {
    foo : "bar",
    foobar : $("#foo_bar").val()
}

then in your PHP

$foo = $_POST["foo"]
$foobar = $_POST["foobar"]
echo $foo; // shows bar
echo $foobar; // shows the value of the text box

Answer 3

Check this -

function rateFunction(rate){


        $.ajax({
            url: '../rate.php',                    //rate.php location in parent folder
            type: 'POST',
            data: { rate : rate},
            success: function(html){
                 alert('Rating: ' + this_rate);          //just to check, will be deleted later
                 $('#message_success').html(html); //message div id located in my html to show the outcome
            }
        });
      return false;
}

Answer 4

The selector $('rate') is trying to find a node whose type is rate , which more likely doesn't exist in your markup.

Since you pass the rate as a parameter in your function, why don't you pass it directly into your ajax request?

$.ajax({
    url: '../rate.php',
    type: 'POST',
    data: {"rate": rate},
    success: function(response) {
        alert(response);
    }
});

Answer 5

please try

data
{
 rate:rate
},

it will work

Answer 6

instead of

data: 'rate' + $('rate').val()

Use

data: {'rate': rate}

or

data: 'rate=' + rate