Jquery json data not working

Question

I have the following code

$(function(){
  displayRooms();
  editRoom();
});

function displayRooms(){
  $.getJSON("displayData.php", {action: "display"}, function(data){
     $.each(data.roomData, function(i, room){
        $("#display").append("<table><tr><td><a href='#?id=" + room.roomId + "'>Edit</a></td></tr></table>");
     }
  });
}

function editRoom(){
  $("#display a").click(function(){
    var roomid = $(this).attr("href").replace("#?id=","");
    $.getJSON("displayData.php", {action: "edit", roomid: roomid}, function(data){
     $.each(data.roomData, function(i, room){
       $("#roomType").val(room.roomType);
      });
    });
  });

}

My php file is correct and my sql statment is correct too but even though i can't make editRoom function execute. Can you please help me out?

Thanks!

I am posting the php function..

function displayData($dbh, $roomid){
  $data = array();
  $sql = "select roomtype from rooms where roomid = $roomid";
  try{
     $stmt = $dbh->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
     $stmt->execute();

     while($row = $stmt->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT)){
       $data[] = array('roomType' => $row[0]);
     }
     echo '{"roomData":' . json_encode($data) . '}';
      $stmt = null;
  }catch(PDOException $e){
       die($e);
    }
}

What's the problem here? What does displayData.php return? Should data.rooData be data.roomData? Are you missing the " after </table> in your real code? — gen_Eric
– gen_Eric, Commented Feb 12, 2014 at 15:00
First of all, you have a missing closing quote " on the line that starts with: $("#display").append(... — Itay
– Itay, Commented Feb 12, 2014 at 15:00
Excuse any missing quotes or typing errors cause this is not a copy paste of my code.In my code there are no typing errors — Antegeia
– Antegeia, Commented Feb 12, 2014 at 15:03
Do you see any errors in your console? What do you mean by "i can't make editRoom function execute"? — gen_Eric
– gen_Eric, Commented Feb 12, 2014 at 15:04
This line is incorrect: echo '{"roomData":' . json_encode($data) . '}';! This might create invalid JSON! Do not manually create JSON, let json_encode do it for you. Create the array structure how you want, then call json_encode once. echo json_encode(array('roomData' => $data));. — gen_Eric
– gen_Eric, Commented Feb 12, 2014 at 15:09

Scimonster · Accepted Answer · 2014-02-12 15:07:00Z

2

What's happening is that editRoom() is running before the JSON data is fetched. What you need to do is include editRoom() in the success callback in displayRooms().

answered Feb 12, 2014 at 15:07

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

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

6 Comments

gen_Eric Over a year ago

Or change the event handler bound in editRoom() to be delegated.

Antegeia Over a year ago

Can you please tell me how?

gen_Eric Over a year ago

@Antegeia: Change $("#display a").click(function(){ to $('#display').on('click', 'a', function(){.

Antegeia Over a year ago

@Rocket Hazmat i change it but still not displaying any value.My sql is correct, i already execute it in phpmyadmin and returns some value.

gen_Eric Over a year ago

@Antegeia: Do you see any errors in the console? Scimonster is right. editRoom() is running, but the event is not binding because it was called before the AJAX call in displayRooms() finished. Are you sure displayRooms() worked? Do you see your table displayed properly? If you add console.log() lines to editRoom() do you see them?

|

Boris Šuška · Accepted Answer · 2014-02-12 15:04:32Z

0

jQuery.getJSON allows define only success callback.

Try something like this using deferred object:

$.getJSON("displayData.php", {action: "display"})
    .done(function(data) {
       $.each(data.rooData, function i, room){
          $("#display").append("<table><tr><td><a href='#?id=" + room.roomId + "'>Edit</a></td></tr></table>");
       }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
       alert('error');
    })
    .always(function() {
       alert('Error or success');
    });

answered Feb 12, 2014 at 15:04

Boris Šuška

1,8041 gold badge21 silver badges33 bronze badges

4 Comments

gen_Eric Over a year ago

What are you saying? $.getJSON(url, {data: 123}, function(data){}); is 100% valid. Why would using .done() help here?

Boris Šuška Over a year ago

You can write $.getJSON(url, {data: 123}, function(data){}).fail(function() {alert('error');}) too, but it looks like a mess for me. If you want handle an error (and you should) using done and fail is much more readable.

Antegeia Over a year ago

@Boris Šuška, ok i change my getjson according to your comment, now it displays the error message.Is there anyway to find out what it is exactly?

gen_Eric Over a year ago

@Antegeia: Yes. In .fail(), there are some parameters passed. Use those instead of just 'error': console.log(textStatus, errorThrown);.

Collectives™ on Stack Overflow

Jquery json data not working

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related