How can I return data via C# AJAX to a javascript variable?

Question

I am using jQuizMe, the jQuery plugin for quizzes, and I want to get the quiz questions out of a database. So I thought that I could use an ajax call to fetch the questions and process them to mimic a JSON-like array. I would then like to take that AJAX responseData and store it (as a JSON-like array) in a javascript variable.

Here is the code:

$(document).ready(function() {
    var quiz = new Array();
    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data)  {
        quiz = data;
    });

    var options = {
        intro: "Find out if you know which Capital is for which State.",
        allRandom: true,
        title: "State Capitals Quiz",
        fxType: 1
    };
    var lang = {
        praise: "Great job, right!"
    };

    $("#quizArea").jQuizMe(quiz, options, lang);

});

And the data that is coming back looks like this:

{
    multiList: [
        { ques: "What is the capital of Alabama?",
          ans: "Montgomery",
          ansSel: ["Hamptonville", "Ellenville", "Somerville"]
        },
        { ques: "What is the capital of New Jersey?",
          ans: "Trenton",
          ansSel: ["Hamptonville", "Ellenville", "Somerville"]
        }
    ]
};

I was thinking this probably would not work correctly because it is just assigning this response to the quiz variable as a string, but I was hoping you all could guide me in the right direction.

Thanks!

EDIT: I solved this by using what Groo suggested (in a modified form). Thanks for all your suggestions everyone!

$(document).ready(function() {
function runQuiz(quiz) {
   var options = {
       quizType: "multiList",
       intro: "Find out if you know which Capital is for which State.",
       allRandom: true,
       title: "State Capitals Quiz",
       fxType: 1
   };
   var lang = {
       praise: "Great job, right!"
   };
    var stuff = new Array();
    stuff = eval('(' + quiz + ')');
   $("#quizArea").jQuizMe(stuff, options, lang);
}

    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data)  {
        runQuiz(data);
    });
});

Answer 1

On your C# AJAX postback, set your javascript variable to <%=myVariable%> -- replacing myVariable with whatever variable you are attempting to set in the javascript. Just make sure your javascript is inside the UpdatePanel. When the javascript is rewritten on the server side, your variable will be applied to the script before the page is rendered.

Answer 2

You can add dataFilter and error handlers for a jQuery.ajax call, to check how your JSON data looks like when received:

var runQuiz = function(quiz) {
   var options = {
       intro: "Find out if you know which Capital is for which State.",
       allRandom: true,
       title: "State Capitals Quiz",
       fxType: 1
   };
   var lang = {
       praise: "Great job, right!"
   };

   $("#quizArea").jQuizMe(quiz, options, lang);
}

$.ajax({
      type: "POST",
      url: "/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx",
      data: { },
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      timeout: 15000,
      dataFilter: function(data, type) {
          // alert(data);
          return data;
      },
      error: function(xhr, textStatus, errorThrown) {
          // alert(textStatus + ' ' + errorThrown);
      },
      success: runQuiz
 });

For debugging purposes, you can uncomment the handler for dataFilter event, to get the raw JSON string that your web service is returning.

Answer 3

You can use PageMethods to make a Webservice call & check if the answer is correct.

They're very easy to setup:

The JavaScript syntax for calling the page methods using PageMethods object and passing parameters:

function onYourEvent()
{
     PageMethods.Somemethod(p1,p1,p3,onSucceed,onError); 
}

//CallBack method when the page call succeeds
function onSucceed(results, currentContext, methodName)
{
      alert(results);
}

//CallBack method when the page call fails due to interna, server error
function onError(results, currentContext, methodName)
{
      alert(results);
}

Then in the code behind you need to create the public static method(Somemethod) and set it as a [WebMethod]

Answer 4

Since you're returning JSON data, use the $.getJSON() function instead of $.get().

The data that is returned will automatically be evaluated into a javascript object rather than a string. Other than that, I'd say you're right on track.