CODEWITHSUNDEEP
jqueryjsongetjson
EvilKermitSaurus
EvilKermitSaurus

Reputation: 305

JSON result being gained but script to add to page not working

I am using a JSON call to retrieve a list of available participant places based on a course code being passed in. The idea is the result is then used to fill out a select which has been dynamically added to the page. I am getting the response correctly but the code to add it to the page isn't working.

$("#venueCourses").live("change",function (event) {
    var cID = $("#venueCourses").val().split("|");

    -- This call works and provides a list of dates for the course passed in
    $.post("includes/ajaxdates.asp",{courseID:cID[0], lessonType:cID[1], retType:"dl"},function(result){
            -- The data is displayed correctly
            $("#cdisplay").html(result);
    });

    -- This is the JSON Call that retrieves data
    $.getJSON('includes/ajaxdates.asp',{courseID:cID[0], lessonType:cID[1], retType:"lt", ajax: 'true'}, function(data) {

        -- NOTHING IN HERE SEEMS TO WORK
        var items = [];
        $.each(data, function(key, val) {
              items.push('<option value="' + key + '">' + val + '</option>');
        });

        $('<select/>', {
             'id': 'participantType',
             html: items.join('')
             }).appendTo('#partType');
    });
});

The JSON call gives this url to retrieve the response from http://www.surreyjive.co.uk/includes/ajaxdates.asp?courseID=ES-1-2013&lessonType=Intermediates&retType=lt&ajax=true

And this is the JSON response {'0':'Please Select','Lady':'Individual Lady','Couple':'Couple'}

The code that isn't working above actually used to be this body of code which didn't work either:

 var options = [];
 for (var i = 0; i < j.length; i++) {
    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
 alert(j);
 $("#participantType").html(options);

Any help in fixing this would be greatly appreciated.

Many thanks Graham

Upvotes: 0

Views: 152

Answers (2)

EvilKermitSaurus
EvilKermitSaurus

Reputation: 305

Ok so after looking at this problem with some fresh eyes I finally managed to fix the issue. It is probably not the best way to fix it but does give me the results I wanted. So the first change was to replace the method by which the JSON was returned.

FROM THIS:

$.getJSON('includes/ajaxdates.asp',{courseID:cID[0], lessonType:cID[1], retType:"lt", ajax: 'true'}, function(data) {

TO THIS:

$.get('includes/ajaxdates.asp',{courseID:cID[0], lessonType:cID[1], retType:"lt", ajax: 'false'}, function(d) {

So I replaced the $.getJSON to $.get so my ASP page returned a text string.

The text string was returned into the variable d from the callback function and so this was JSON parsed into the variable data.

var data = jQuery.parseJSON(d);

Et Voila the script works every time. I understand that MULTIDOT's code did work with a text string of JSON but not an object. This is where my knowledge is really lacking and so it would be nice to understand where I was going wrong with the original script.

Many thanks to MULTIDOT for all his help.

Cheers Graham

Upvotes: 0

MULTIDOTS
MULTIDOTS

Reputation: 46

As per your response data, following script should work.

var response = ' {"values": {"option": [{"value": "0","text": "Please Select"},{"value": "lady","text": "Individual Lady"},{"value": "gent","text": "Individual Gent"},{"value": "couple","text": "Couple"}]}}';
var data = jQuery.parseJSON(response);
var selectBox = $('<select/>', {'id': 'participantType'});
$.each(data.values.option, function(key, option) {
    $('<option />', {value: option.value, text: option.text}).appendTo(selectBox);
});
selectBox.appendTo('#partType');

Upvotes: 1

Related Questions