ajax request doen't return data

Question

I'm trying change data after click on a div, but it's not changing de results

JS code

$(document).ready(function() {

    $('#piso .caixa').click(function() {
        var valorpiso = $(this).text();
        alert(valorpiso);
        $.ajax({
            type:"post",
            url:"getpiso.php",
            data:"npiso="+valorpiso,
            sucess:function(data){
                $("#caixas").html(data);
            }
        });
     });

});

the alert is printing the right value

PHP code

 $piso1=$_POST["npiso"];

 $result=mysql_query("select * FROM rooms where floor='$piso1' ");
 while($dados=mysql_fetch_array($result)){
     echo "<div id='caixa'>";
     echo "<p>$dados[block].$dados[floor].$dados[room]</p>";
     echo "</div>";
 }

Can you help me?

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Dec 26 '14 at 00:48

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

Is this your actual code? There's a mispelling in the callback function: It should be "success", instead of "sucess".

success:function(data){
    $("#caixas").html(data);
}

If that doesn´t work, try to get more information on what's happening. Use some kind of Dev Tool to watch the ajax response. (CTRL+SHIFT+I on Chrome)

OBS: Your PHP code is vulnerable to SQL Injections. Read more about it here: How can I prevent SQL injection in PHP?

edited May 23 '17 at 12:05

Community

1
1

answered Dec 26 '14 at 01:10

Rogerio

138
1
6

I've corrected the "success" and the ajax response is correct, but is not printing in #caixas – Jéssica Dec 26 '14 at 01:30
Have you tried checking for other mispellings in the HTML? Or use the javascript console to run $("#caixas").html("Test string") and see what happens. – Rogerio Dec 26 '14 at 21:26

Protomen · Answer 2 · 2014-12-26T01:43:00.347

Have 2 problems

1) @Rogerio said is right, you used "sucess": when the correct way is "success":

But now with jquery you can use the following methods:

jqXHR.done(function( data, textStatus, jqXHR ) {});

An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details.
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });

An alternative construct to the complete callback option, the .always() method replaces the deprecated .complete() method.

In response to a successful request, the function's arguments are the same as those of .done(): data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of .fail(): the jqXHR object, textStatus, and errorThrown. Refer to deferred.always() for implementation details.
jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then() for implementation details.

Read about in: http://api.jquery.com/jquery.ajax/

A type, you using "npiso="+valorpiso, but this not encoding, prefer use json, like this: { npiso: valorpiso } (Jquery auto encoding data)

2) Don't use repeated IDs in HTML, this repeate ID by results number:

while($dados=mysql_fetch_array($result)){
     echo "<div id='caixa'>";

Use class= instead of id=

First, update Jquery to last version

Javascript:

$.ajax({
    "type": "POST",
    "url": "getpiso.php",
    "data": { "npiso": valorpiso }
}).done(function(data) {
    console.log(data);
    $(".list_caixa").html(data);
}).fail(function(err) {
    console.log("Failed", err);
}).always(function() {
    console.log("complete");
});

"HTML":

 $piso1=$_POST["npiso"];

 $result=mysql_query("select * FROM rooms where floor='$piso1' ");
 while($dados=mysql_fetch_array($result)){
     echo "<div class='list_caixa'>";
     echo "<p>$dados[block].$dados[floor].$dados[room]</p>";
     echo "</div>";
 }

I tried that but it's not writing anything on the console – Jéssica Dec 26 '14 at 01:39 — Jéssica, Dec 26 '14 at 01:39

score 0 · Answer 3 · answered Dec 26 '14 at 01:11

0

you should debug ( alert() or console.log() ) to check if the data has been returned properly in success handler and check if the element with id "#caixas" is already existed.

answered Dec 26 '14 at 01:11

Klaus

451
5
8

score -1 · Answer 4 · answered Dec 26 '14 at 04:36

index.php

`

<html>

    <head>

         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
         <script>
            $(function () {
               $('#piso .caixa').click(function () {
                var valorpiso = $(this).text();
                $.ajax({
                    type: "post",
                    url: "getpiso.php",
                    data: "npiso=" + valorpiso,
                    success: function (data) {
                        $("#caixas").html(data);
                    }
                });
            });

        });
       </script>
    </head>
     <body>
       <div id="piso">
        <p class="caixa" style="cursor:pointer;color:red;background-color:#000;padding:10px;">TEST</p>
       </div>
       <div id="caixas">

       </div>
</body>

`

getpiso.php

     <?php
        if($_POST["npiso"]!=null){
            $piso1=$_POST["npiso"];
            echo "<div id='caixa'>";
            echo "<p>".$piso1." RESULT</p>";
            echo "</div>";
        }
        ?>

ajax request doen't return data

4 Answers4