jQuery Ajax does not update the result inside the div

html, jquery

Solution

OK you are apparently getting JSON result. So your $.ajax() method should contain that it expects 'JSON' data type. Like this:

$.ajax({
    type: "POST",
    url: "/dashboard/",
    data: {
        'lab': $(this).text()
    },
    dataType: 'json',
    success: function (result) {
        // THIS IS ACTUALLY WRONG
        //$("#table_data").html(result);
    }
});

Then you need to parse the JSON and build it into HTML string. Now, if you're getting 'result' as json string (it should be a javascript associative array though, If I'm not mistaken), you have to convert it to associative array: `var resultObj = JSON.parse(json)`

And then you can build HTML string in Javascript and use that builded string to actually:

$("#table_data").html(yourBuildedString);

'Final' version of the code:

$.ajax({
  type: "POST",
  url: "/dashboard/",
  data: {
    'lab': $(this).text()
  },
  dataType: 'json',
  success: function (result) {
    // ok you don't need to do this, jquery already converted json into Javascript object for you
    //var resultObj = JSON.parse(result);

    // parsing the resultObj into string, just example, you have to do it yourself
    // var parsedTableContent = "<tr><td>"+result['Education']['subscriber']+"</td><td>"+result['Education']['tonage_bytes']+"</td></tr>"
    $("#table_data").html(parsedTableContent);
  }
});

Just one more thing, I've noticed that in your response there are keys like this one: Technology and Computing

As a good practice you might want to avoid using spaces in array keys in the future

Problem

This question might be basic for most of the people out here, but I'm really fed up of not getting the desired o/p. I want to make AJAX calls when an item from the list(id = vzlabs_data) is being clicked and its respective data should be updated inside the table(id = table_data). Currently, I'm able to POST the data, make the db calls against it, fetches it data and the data fetched is being printed in the python interpreter but is not updated inside the table. Where I'm going wrong? HTML template ``` <div class="navbar"> <div class="navbar-inner"> <ul class="nav" id="nav_bar"> <li class="active"><a href="#">Home</a> </li> <li><a href="#device">Device</a> </li> <li><a href="#content">Content</a> </li> <li><a href="#about">About</a> </li> <li><a href="#help">Help</a> </li> </ul> </div> </div> <div class="pull-right">From : <input type="text" id="from" name="from" />To : <input type="text" id="to" name="to" /> </div> <br> <br> <div class="container-fluid"> <div class="row-fluid"> <div class="span2 pull-left">//****** An item is picked up from this list********** <ul class="nav nav-tabs nav-stacked" id="vzlabs_data"> <li class="active"><a href="#">All Data</a> </li> <li><a href="#">VZW3RD</a> </li> <li><a href="#">VZWLAB</a> </li> <li><a href="#">VZW2ND</a> </li> </ul> </div> <!-- end of div span2--> <div id="pie_chart" class="span4" style="height: 275px"></div> <!-- end of div span4--> <div class="span5"> <table class="table table-striped" id="table_data"> <thead> <tr> <th>Categories</th> <th>Subscribers</th> <th>Rate(bps)</th> <th>Tonage(Bytes)</th> </tr> </thead> <tbody>// Data is updated over here. {% for key, value in vzlab_data.items %} <tr> <td>{{key}}</td> <td>{{value.subscriber}}</td> <td>{{value.rate_bps}}</td> <td>{{value.tonage_bytes}} <div class="progress"> <div class="bar" style="width: 60%;"></div> </div> </td> </tr>{%endfor%}</tbody> </table> </div> <!-- end of div span7--> </div> <!-- end of div row--> ``` JS function ``` $(function () { $("#vzlabs_data li").click(function () { $.ajax({ type: "POST", url: "/dashboard/", data: { 'lab': $(this).text() }, success: function (result) { $("#table_data").html(result); } }); }); }); ``` views.py ``` def dashboard(request): vzlab_data = get_vzlab_data("All Data") if request.is_ajax(): lab = request.POST['lab'] vzlab_data = get_vzlab_data(lab) return HttpResponse(simplejson.dumps(vzlab_data), mimetype='application/javascript') ctx = {'vzlab_data' : vzlab_data} return render_to_response('dashboard/dashboard1.html',ctx, context_instance = RequestContext(request)) ```

Original source

Related problems