I am facing a strange issue with ajax in my login page. The login page calls the main page using ajax, as shown below:
// Function to call WCF Service - Infrastructure
function CallService() {
$.ajax({
type: Type, //GET or POST or PUT or DELETE verb
url: Url, // Location of the service
data: Data, //Data sent to server
contentType: ContentType, // content type sent to server
dataType: DataType, //Expected data format from server
processdata: ProcessData, //True or False
success: function (msg) {//On Successfull service call
ServiceSucceeded(msg);
},
error: ServiceFailed// When Service call fails
});
}
function ServiceSucceeded(result) {
if (DataType == "json") {
var resultText = result;
if (resultText.result == "True") {
$.mobile.changePage("MainMenu.aspx",{ transition: "slideup" });
}
else {
//Show Error Message
}
}
}
In each page, I have included a reference to a js file called "general.js" which contains the following code:
function processMenu(menuOptions) {
var options = menuOptions.split('');
var currentOptions = '1234567'.split('')
for (i = 0; i < currentOptions.length; i++) {
var index = (i + 1) + '';
if (options.indexOf(index) < 0) {
var op = $('#op' + currentOptions[i]);
op.attr('disabled', true);
op.addClass('btndisabled');
$(op).live("click", function (event) {
//do stuff
event.preventDefault(); // Prevent default link behaviour
});
}
}
This code checks some numbered controls and enables a CSS class called "btndisabled" when necessary.
The CSS for "btndisabled" is:
.btndisabled{
background-color: rgb(236,233,216);
color: #CCC;
font-style: normal;
}
The issue arises when I use:
$.mobile.changePage("MainMenu.aspx?",{ transition: "slideup" });
The contents of Login.aspx change to MainMenu.aspx but the JS code:
op.attr('disabled', true);
op.addClass('btndisabled');
$(op).live("click", function (event) {
//do stuff
event.preventDefault(); // Prevent default link behaviour
});
gets executed without applying the CSS. I'm not sure what's wrong. Any ideas on how to resolve this?
UPDATE
Upon observing the behavior of the object on postback and during the ajax call, I noticed something interesting but puzzling.
During Postback
Check the HTMLAnchorElement
Ajax
If the DOM has not loaded the anchor object, HOW IS POSSIBLE TO ASSIGN THE event.preventDefault()???
This seems quite perplexing...