passing callback function accross windows causing error with ie - javascript

I have a problem with IE causing two errors:
1. Object doesn't support this property or method
2. Call was rejected by callee.
My Intention:
To call window.opener.myObject method that is going to retrieve some data using ajax and pass in callback function
that live as nested function in popup window that initiated call that is going to handle response data and modify popup window html accordingly.
Here is a scenario:
I pull up popup window that handles some specific operation.
This popup window calling window.opener.myObject method that using ajax call.
I'm passing in popup window function that is going to handle response and it works with ff and safari but not with ie.
Here is code sample
//RELEVANT SCRIPT ON POPUP WINDOW
$('#myButton').live('click', function() {
var h = window.opener.myObject, p = { 'p1': 1 };
var responseHandler = function(responseObj) {
//in IE we never got here
if (!responseObj) {
alert('Unexpected error!! No response from server');
return false;
}
//..handle response
};
p.p1 = $('#control').val();
h.executeMethod(p, responseHandler);
});
//RELEVANT SCRIPT ON WINDOW OPENER MYOBJECT
try {
$.ajax({
type: 'POST',
async: true,
url: url,
data: postData,
dataType: "json",
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
success: r, // r here is reference to my responseHandler popup window function
error: handleError
});
} catch (ex) {
alert(ex.message);
}
Any tips?

I have made it work, not sure if that is the right way or not but now it works.
I've modified window opener myobject code from :
//RELEVANT SCRIPT ON WINDOW OPENER MYOBJECT
try {
$.ajax({
type: 'POST',
async: true,
url: url,
data: postData,
dataType: "json",
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
success: r, // r here is reference to my responseHandler popup window function**
error: handleError
});
} catch (ex) {
alert(ex.message);
}
to:
//RELEVANT SCRIPT ON WINDOW OPENER MYOBJECT
try {
$.ajax({
type: 'POST',
async: true,
url: url,
data: postData,
dataType: "json",
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
success: function(myResponseObj) {
r.call(null, myResponseObj);
}
error: handleError
});
} catch (ex) {
alert(ex.message);
}
so success jquery ajax handler was modified to :
success: function(myResponseObj) {
r.call(null, myResponseObj);
}
and it works now :-) ...

Related

how to detect a server error into a jquery ajax call?

I use Jquery to parse an json from url: the code is like this:
function fetchdata() {
var statusUrl = '/api/desk/j/';
$.ajax({
url: statusUrl,
dataType: "json",
type: 'post',
success: function(response) {
alert('ok');
},
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(err.message);
}
});
}
everything works fine, but if the server is not reachable I'm not able to detect it: I tried to do something in error: function, but seems that the code in error is fired only if the json has an error
have you got some ideas?
thank you!
You need to test the statusText from the jQuery textStatus response object. You can take advantage of your browser's developer console to inspect this object. You can expand the properties and methods for your perusal, however you wanna use it. Just click on the returned message of the console.log() to see these properties and methods that you wan't to use for error detection.
function fetchdata() {
var statusUrl = '/api/desk/j/';
$.ajax({
url: statusUrl,
dataType: "json",
type: 'post',
success: function(response) {
alert('ok');
},
error: function(textStatus) {
console.log(textStatus);
console.log(textStatus.statusText, textStatus.status);
}
});
}
fetchdata();

Razor page POST handler not receiving JSON data from jQuery AJAX

I'm sending a POST request to a Razor page handler using jQuery .ajax(). The network tab shows that this data is being sent as expected:
My breakpoints confirm that I'm hitting the handler, though the invitationId is not coming over (or at the very least, not deserializing correctly):
The JavaScript is as follows:
class GenericService {
constructor(controller) {
this.controller = controller;
}
async post(data, handler = "") {
return await $.ajax({
type: "post",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
},
data: JSON.stringify(data),
url: `/${this.controller}${handler}`,
contentType: "application/json",
dataType: "json"
});
}
}
(async () => {
const _ajax = new GenericService("Admin/Index");
await _ajax.post({ invitationId: 1 }, "Reset");
})();
I imagine that I'm misunderstanding the implicit deserialization, but examples I've seen elsewhere on the internet seem to indicate that sending a JSON serialized object should be fine.
This is using .NET Core 3.0.
Can anyone explain what might be my issue here?
As expected, I had some wires crossed as it relates to the deserialization.
If I send the data as a plain object without serialization (and remove the corresponding json type declarations from the .ajax() options), the invitationId comes across.
return await $.ajax({
type: "post",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
},
data: data, //Remove JSON.stringify(...)
url: `/${this.controller}${handler}`
//contentType: "application/json", Remove
//dataType: "json" Remove
});

Jquery ajax success call but web method breakpoint not hit

I have a simple set up.
Jquery:
$.ajax({
url: "/MyApp/MyHandler.ashx/MyMethod",
success: function(result) {
alert("sucess");
},
error: function() {
alert('Error');
}
});
and web method:
[System.Web.Services.WebMethod]
public static void MyMethod(){
new AnotherClass(null).AnotherMethod(null, null);
}
problem is success alert is called but break point is not hit inside MyMethod.
I had the same issue and this is what I ended up having to do:
$.ajax({
url: _url,
data: '',
dataType: 'json',
contentType: 'application/json',
type: 'POST',
success: function(result) {
alert("sucess");
},
error: function() {
alert('Error');
}
});
My first attempt left out the data, dataType and contentType; Only when I set contentType: 'application/json' with an empty string (data: '') did it end up working. What a headache - hope this helps someone else!
In my case, the issue was in RoutingConfig.So, sort that in App_Start folder, within RouteConfig,commented out the following line
//settings.AutoRedirectMode = RedirectMode.Permanent;

$.blockUI jQuery plugin blocks back button android / phonegap

I am using the blockUI jQuery plugin for an AJAX call:
//start the plugin
App.utilities.Loading();
$.ajax(url, {
type: "POST",
contentType: 'application/json',
data: JSON.stringify({
"textcontent": content
}),
success: function (data) {
$.mobile.navigate('discussion.html');
$.unblockUI();
}
});
Sometimes the loading takes more than three seconds and if the user is pressing the back button, the back event get triggered after calling $.unblockUI(); Is there a way to go back during the plugin is ON and cancel the Ajax call?
I can get the status of the block UI:
var isUIBlocked = $('.ui-widget-overlay:visible').length > 0;
any ideas?
you can try the following code
//start the plugin
App.utilities.Loading();
//assign the ajax call to a xhr object
var xhr = $.ajax(url, {
type: "POST",
contentType: 'application/json',
data: JSON.stringify({
"textcontent": content
}),
success: function (data) {
$.mobile.navigate('discussion.html');
$.unblockUI();
}
});
//when back button is being clicked
window.onbeforeunload = function (e) {
xhr.abort(); //abort the above ajax call
var isUIBlocked = $('.ui-widget-overlay:visible').length > 0;
if(isUIBlocked) {
$.unblockUI();
}
}
further reading for the jqXHR object of the jquery.ajax function : http://api.jquery.com/jQuery.ajax/#jqXHR

How do I debug Jquery Success function

I am using Javascript to get records from the database, everything works the way i want but i cannot show alerts in success handler. When i place a break point to sucess:function(data) it gets hit but this line is not being hit $("#Alert").html(data).show().... Another unusually thing i have noticed is that some time $("#Alert").html(data).show().. gets hit. Is there any way i can debug this?
function MethodNAme() {
ajReq.abort();
ajReq = $.ajax({
type: "POST",
url: "Services/",
data: ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
getSomething();
$("#Alert").html(data).show().delay(5000).fadeOut();
alert("working");
}
}
your syntax is not correct, you are placing a function getSomething() in middle of $.ajax(),
function MethodNAme() {
ajReq.abort();
ajReq = $.ajax({
type: "POST",
url: "Services/",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
// getSomething(); <-- remove this
success: function (data) {
$("#Alert").html(data).show().delay(5000).fadeOut();
alert("working");
}
});
}
You can use console.log() to print data in browser console. You can access console window by pressing F12 key and then go to console tab.

Categories

Resources