How to update html using ajax using $.ajax{}

Question

I have javascript which calls a controller method from javascript and returns the json object. Once the json object is returned, I would like to update a table below the search field which will show the results from the json object. Basically I'm trying to list all the objects but want to filter out the results based on some search on a form.

Following is the example code that I use to get json object:

$.ajax({
  type: "GET",
  dataType: "json",
  url: "/students/search/" + this.value,
  success: function(data){
    // logic to update field
  });
});

UPDATE:

JSON object:

[{"student":{"student_type":"D", "student_name":"Blah Blah"}}]

I have a table in my html:

<table id="studentTable">
</table>

I would like to add student_type and student_name into a table

Can you show what your JSON data would look like? That will help us give a more specific recommendation as to how to approach this. — Jason Miesionczek
– Jason Miesionczek, Commented Jan 27, 2011 at 2:47

Jason Miesionczek · Accepted Answer · 2011-01-28 19:58:05Z

3

Assuming that the data being returned from the controller is an array of objects, I've done something like this in previous projects:

Using the jQuery template plugin:

$.each(data, function(index, element) {
var t = $.template("<tr><td>${student_type}</td><td>${student_name}</td></tr>");

var tdata = {
    student_type: element.student.student_type,
    student_name: element.student.student_name
};

$("#studentTable").append(t, tdata);

});

All of this should go inside the success callback function. If you could provide the html of where this would go in the view, and the JSON you would get back from the controller i can update my answer to better reflect your scenario.

edited Jan 28, 2011 at 19:58

answered Jan 27, 2011 at 2:54

Jason Miesionczek

14.5k17 gold badges80 silver badges111 bronze badges

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

2 Comments

user140736 Over a year ago

See the updated code for the json object response and the html.

Jason Miesionczek Over a year ago

Updated my answer to reflect the samples you provided

Collectives™ on Stack Overflow

How to update html using ajax using $.ajax{}

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related