Question

I have this code below which is called by running the getGrades function.

function getGrades(grading_company) {
    // Set file to get results from..
    var loadUrl = "ajax_files/get_grades.php";

    // Set data string
    var dataString = 'gc_id=' + grading_company;

    // Set the callback function to run on success
    var callback = showGradesBox;

    // Run the AJAX request
    runAjax(loadUrl, dataString, callback);
}

function showGradesBox(response) {
    // Load data into grade field

    // Hide condition fields
    jQuery('#condition').hide();
    jQuery('#condition_text').hide();

    // Show grade fields
    jQuery('#grade_wrapper').show();
    jQuery('#grade_text_wrapper').show();    
}

function runAjax(loadUrl, dataString, callback) {
     jQuery.ajax({
        type: 'GET',
        url: loadUrl,
        data: dataString,
        dataType: 'html',
        error: ajaxError,
        success: function(response) {
            callback(response);
        }
    });    
}

Now as you can see I am passing the AJAX response data to the showGradesBox function; however I’m now not sure how to load it into the field.

I have seen example using .load() but it seems you have to use this with the URL all at once; the only other function I have come across that I could possibly use is .html(); but the description of it doesn’t sound right!?

Answer 1

.html() should work …

When .html() is used to set an element’s content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

function showGradesBox(response) {

  // Load data into grade field
  jQuery('#yourgradefieldID').html(response);

  // Hide condition fields
 jQuery('#condition').hide();
 jQuery('#condition_text').hide();


 // Show grade fields
 jQuery('#grade_wrapper').show();
 jQuery('#grade_text_wrapper').show();    

}