Question

i have this js and qunit test below. why the browser gave me the listClasses is not defined? How to solve it. I saw mostly did

function ajax() {  
$.ajax({   
});}

but if i did like below how to do the test?

$('#MregisteredClasses').on('pageinit', function listClasses(){
var rowInput = "1";
var pageInput = "1";

$.ajax({
    url: 'http://137.57.102.146:8080/Training/getRegisteredClassesData.html',
    data: ( {rows : rowInput , page : pageInput}),
    type: 'POST',

    success: function(json_results){
    $('#list').append('<ul data-role="listview" data-inset="true"</ul>');
        listItems = $('#list').find('ul');
        $.each(json_results.rows, function(key) {
            html = "<li data-mini='true' id='icon'><a href='http://137.57.102.146:8080/Training/MRegisteredClassesDetail.phone?courseId=" 
                   + [json_results.rows[key].courseId] + "&regNo=" + [json_results.rows[key].regNo] +
                   "' rel='external'>" + json_results.rows[key].courseName+ "</a>"
                   + "<a href='http://137.57.102.146:8080/Training/MRateCourse.phone?courseId=" 
                   + [json_results.rows[key].courseId] + "&regNo=" + [json_results.rows[key].regNo] + 
                   "' rel='external'>RATE THIS COURSE</a></li>" ; 
            listItems.append(html); 
        });

        $('#list ul').listview(); 
    },
});
});

and this is qunit test

 test('asynchronous test', function() {  
// Pause the test, and fail it if start() isn't called after one second  
stop();  

listClasses(function() {  
    // ...asynchronous assertions  
    ok(true, "Success"); 
});  

setTimeout(function() {  
    start();  
}, 2000);  
});  

Answer 1

$('#MregisteredClasses').on('pageinit', function listClasses(){ ... is incorrect usage.

The function either needs to be anonymous (i.e. drop the listClasses bit) in which case running listClasses() will fail.

What you need to do is externalise the function declaration.

i.e.:

function listClasses(){
  var rowInput = "1";
  var pageInput = "1";

  $.ajax({
    url: 'http://137.57.102.146:8080/Training/getRegisteredClassesData.html',
    data: ( {rows : rowInput , page : pageInput}),
    type: 'POST',

    success: function(json_results){
    $('#list').append('<ul data-role="listview" data-inset="true"</ul>');
        listItems = $('#list').find('ul');
        $.each(json_results.rows, function(key) {
            html = "<li data-mini='true' id='icon'><a href='http://137.57.102.146:8080/Training/MRegisteredClassesDetail.phone?courseId=" 
                   + [json_results.rows[key].courseId] + "&regNo=" + [json_results.rows[key].regNo] +
                   "' rel='external'>" + json_results.rows[key].courseName+ "</a>"
                   + "<a href='http://137.57.102.146:8080/Training/MRateCourse.phone?courseId=" 
                   + [json_results.rows[key].courseId] + "&regNo=" + [json_results.rows[key].regNo] + 
                   "' rel='external'>RATE THIS COURSE</a></li>" ; 
            listItems.append(html); 
        });

        $('#list ul').listview(); 
    }
});
}

Then call the function from the on command:

$('#MregisteredClasses').on('pageinit', listClasses)

Assuming your script only failed on listClasses(), then I would assume that the listClasses name is just dropped silently.