How to render HTML with jQuery from an AJAX call

ajax, html, javascript, jquery, python

Solution

I'm not familiar with Python/Bottle or its SimpleTemplate engine, but you could consider generating the html for the table on the server side and returning it in the ajax response, rather than returning JSON.

var subject_id = $(this).val();
$.ajax('subject_ajax', {
    type: 'get',
    data: { subject_id: subject_id },
    dataType: 'html',
    success : function(html) {
        // Insert the html into the page here using ".html(html)"
        // or a similar method.
    },
    error: function() {
        alert("Error");
    }
});

When calling `.ajax()`:

- The "type" setting defaults to "get", but I prefer to explicitly set it.

- Use the "data" setting for the ajax call to specify the URL parameter.

- Always specify the "dataType" setting.

I also recommend you perform the ajax call in an on-submit handler for the form, and add an on-change handler for the select that submits the form.

$(document).ready(function(){
    $('#subject_id').change(function() {
        $(this.form).submit();
    });

    $('#choose_subject').submit(function(event) {
        event.preventDefault();
        var subject_id = $('#subject_id').val();
        if (subject_id) {
            $.ajax(...);
        }
    });
});

This way your submit button should work in case it is clicked.

Problem

I have a select box with a list of books. The user can select a book and hit the submit button to view the chapters on a separate page. However, when the user changes the select box, I would like a partial page refresh to display the past notes the user entered on the book, and allow the user to write a new note for that book. I do not want the review and creation of notes for a particular book done on the next page with the chapters, as it will clutter it up. I'm using Python/Bottle on the backend and its SimpleTemplate engine for the front end. Currently, when the select box is changed, an ajax call receives a Json string containing the book information and all the notes. This json string is then converted into a json object via `jQuery.parseJson()`. What I would like to be able to do is then loop over the notes and render a table with several cells and rows. Would I have to do this in jQuery/js (instead of bottle/template framework) ? I assume so as I only want a partial refresh, not a full one. I'm looking for a piece of code which can render a table with variable numbers of rows via jQuery/js from a json object that was retrieved with ajax. ``` <head> <title>Book Notes Application - Subjects</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('#subject_id').change(function(){ var subject_id = $(this).val(); $.ajax({ url : "subject_ajax?subject_id=" + subject_id, success : function(data) { alert(data) json = jQuery.parseJSON(data); }, error : function() { alert("Error"); } }); }) }) </script> </head> <body> <!-- CHOOSE SUBJECT --> <FORM action="/books" id="choose_subject" name="choose_subject" method="POST"> Choose a Subject: <select name="subject_id" id="subject_id"> % for subject in subjects: <option value="{{subject.id}}">{{subject.name}}</option> % end </select><input type="submit" name="sub" value="Choose Subject"/> <BR /> </FORM> ```

Original source