I am using a jQuery library called MockAjax which allows you to mock/test real AJAX calls.
In my application I can use my live app version of an AJAX request and MockAjax will intercept the AJAX request and respond with a Mock response!
I am also using another library called M<ockJson which is similar but instead allows you to generate a Mock JSON response.
Using both libraries together, my Application makes an AJAX request. MockAjax catches the AJAX request and then MockJson generates and returns a random JSON response.
In my past projects this has worked great with no issues until today...
Now that my application is working pretty good, I decided it;s time to restructure the JavaScript into a more structured version. (putting DOM events, tasks, etc into sections of code).
This is where my problem began....
In my new code,
- my App makes an AJAX request.
MockAjaxcatches theAJAXrequest.MockJsonis called to get theJSONresponse- ERRORS this is where it all goes wrong...
At this last step, it should pass the JSON response back to the original AJAX calls Success function. It simply does not!
I get no errors or anything in the console. I set up a simple alert() in my AJAX calls success() function and it does not make it that far to even trigger the alert!
I am not sure if there is some sort of scope issue or what the problem could be. When my app was flat, all variables and functions in the glbal root level with no structure to the app at all...it all worked. As soon as I moved everything into Objects, etc....it all works except this 1 issue of not returning the MockAjax response back to the Real Ajax response!
I removed 95% of the app code and re-built it with just the very minimal to run this example problem. The demo of the problem is here... http://jsbin.com/vugeki/1/edit?js
App flow:
projectTaskModal.init();is ran on page loadThis fires off projectTaskModal.mockAjax.init();which sets up theMockAjaxandMockJsoncode- Then
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);is ran which executes theAJAXrequest AJAX POST Requestis sent to/gettaskeventsMockAjaxcatches the request sent to/gettaskeventsMockAjaxthen callsMockJsonto generate theJSONresponse.projectTaskModal.mockAjax.generateTaskEventsJson();calls that function and I have it printing the JSON respionse into the console so I can see that it is generating it!- In my
MockAjaxcode,var taskeventsholds theJSONresponse and then set it to this...this.responseText = taskevents;``this.responseTextI believe is what is supposed to be returned to the Applications originalAJAX` call. It seems that this is where the problem might be! It does not seem to be returning the response back to the original AJAX code that requested it in the first place!
Could this be some sort of scope issue?
var projectTaskModal = {
cache: {
taskId: 1,
projectId: '12345',
},
init: function() {
projectTaskModal.mockAjax.init();
//console.log(projectTaskModal.mockAjax.init.generateTaskEventsJson());
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);
},
task: {
openTaskModal: function(taskId) {
// Load Task Events/Comments Panel from AJAX Request
projectTaskModal.task.loadTaskEventsPanel(taskId);
},
/**
* Load Task Events/Comments from backend Database JSON
* @param {string} jsonServerEndpoint URL for AJAX to Request
* @return {string} Generated HTML of all Task Events built from JSON
*/
loadTaskEventsPanel: function(taskId) {
// Request Task Events and Comments using AJAX Request to Server
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: '/gettaskevents',
data: {
action: 'load-task-events',
task_id: projectTaskModal.cache.taskId
},
success: function(data) {
alert('TESTING AJAX SUCCESS CALLBACK WAS CALLED!');
console.log('function loadTaskEventsPanel(taskId) DATA: ');
console.log(data);
// Parse JSON data
var taskEventsJson = data;
var task_events = taskEventsJson.task_events;
// Loop over each Task Event record returned
$.each(task_events, function(i, event) {
console.log('commentID: ' + event.commentId);
console.log('create_at DateTime: ' + event.created_at);
});
}
});
},
},
mockAjax: {
init: function(){
// Adding the @EVENT_TYPE keyword for MockJSON Template Usage
$.mockJSON.data.EVENT_TYPE = [
'Comment Created',
'Task Status Changed',
'Task Completed'
];
// Mock AJAX response for AJAX request to /gettaskevents
$.mockjax({
url: '/gettaskevents',
contentType: 'text/json',
responseTime: 2900, // Simulate a network latency of 750ms
response: function(settings) {
console.log('mockJax POST to /gettaskevents :');
//console.log(settings);
//DEBUG('Get Task Events JSON', settings.data);
if(settings.data.value == 'err') {
alert('MockAjax Error');
this.status = 500;
this.responseText = 'Validation error!';
} else {
alert('MockAjax Success');
//var taskevents = generateTaskEventsJson();
var taskevents = projectTaskModal.mockAjax.generateTaskEventsJson();
this.responseText = taskevents;
console.log(taskevents);
}
}
});
},
// Generate Mock JSON Response to load fake Task Evewnt/Comments JSON for Mock AJAX request
//var generateTaskEventsJson = function () {
generateTaskEventsJson: function() {
var mockTaskJson = $.mockJSON.generateFromTemplate({
"task_events|10-14" : [{
"commentId|+1" : 100000000,
"projectId|+1" : 100000000,
"taskId|+1" : 100000000,
"userId|+1" : 100000000,
"created_at" : "@DATE_YYYY-@DATE_MM-@DATE_DD",
"event_type" : "@EVENT_TYPE",
"userName" : "@MALE_FIRST_NAME @LAST_NAME",
"description" : "@LOREM_IPSUM @LOREM_IPSUM"
}]
});
//DEBUG('Generate Mock Task Events JSON', mockTaskJson.task_events);
//console.log(mockTaskJson.task_events);
//return mockTaskJson.task_events;
return mockTaskJson;
}
},
};
$(function() {
projectTaskModal.init();
});
