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.

Sahil Mittal · Answer 1 · 2013-11-29T07:18:49.347

2

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

edited Nov 29 '13 at 07:18

answered Nov 29 '13 at 06:53

Sahil Mittal

20,697
12
65
90

Not working unfortunately. I am stucking on that one for 12h now :-( – StephanBo Nov 29 '13 at 07:01
what are you getting in `html` `console.log(html)`? – Sahil Mittal Nov 29 '13 at 07:01
Uncaught SyntaxError: Unexpected token – StephanBo Nov 29 '13 at 07:04
At the start of the function alert the value of `rate` – Sahil Mittal Nov 29 '13 at 07:06
The alert is always shown correctly with the correct values. No matter if alert is put first on top or in the success function. But is type: 'POST' here correct or do I need to change it to a JSON type? I never had any troubly when I like to submit normal ajax forms but this onclick things seems to work different. – StephanBo Nov 29 '13 at 07:11
The code works fine as tested. May be the error is in your php file (some syntax error may be). Simply write two lines in your php: `$rate = $_POST['rate']; echo $rate;` and then try – Sahil Mittal Nov 29 '13 at 07:20
btw: I changed my code to your suggestion to avoid unobstrosive javascript, although it looks new for me to work with variables in an html code like "rate". Your code works as well as my original code. Thanks for the hint. – StephanBo Nov 29 '13 at 08:17

Bk Santiago · Answer 2 · 2013-11-29T07:18:06.397

1

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

edited Nov 29 '13 at 07:18

answered Nov 29 '13 at 06:52

Bk Santiago

1,523
3
13
24

Anil Saini · Answer 3 · 2013-11-29T07:04:32.837

1

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

edited Nov 29 '13 at 07:04

answered Nov 29 '13 at 06:57

Anil Saini

627
3
17

can you please console log and paste what html is returned as response on success of the ajax request ?? – Anil Saini Nov 29 '13 at 07:11
Resource interpreted as Script but transferred with MIME type text/html: – StephanBo Nov 29 '13 at 07:17
1

check this link for this - http://stackoverflow.com/questions/3467404/chrome-says-resource-interpreted-as-script-but-transferred-with-mime-type-text – Anil Saini Nov 29 '13 at 07:23

score 1 · Answer 4 · answered Nov 29 '13 at 07:15

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

score 1 · Answer 5 · answered Nov 29 '13 at 07:38

1

please try

data
{
 rate:rate
},

it will work

answered Nov 29 '13 at 07:38

Jitendra

558
8
23

score 1 · Answer 6 · edited Nov 29 '13 at 08:09

1

instead of

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

Use

data: {'rate': rate}

or

data: 'rate=' + rate

edited Nov 29 '13 at 08:09

Darkhogg

13,707
4
22
24

answered Nov 29 '13 at 07:47

user3048405

27
1

Ajax function not sending data onclick

6 Answers6