I want to fire event in custom class written in Extjs 4.
I created a custom class using ExtJs and extended from Observable class
in order to register event.
var settingWindows = Ext.define("Setting", {
extend: 'Ext.util.Observable',
title: "",
window: null,
userId: 0,
windowWidth: 650,
windowHeight: 400,
columns: [],
settings: [],
ruleList: [],
isColorPickerOpen: false,
currTrObj: null,
currColorType: null,
constructor: function(config) {
this.windowWidth = config.windowWidth || 650;
this.windowHeight = config.windowHeight || 400;
this.title = config.title || "";
this.userId = config.userId || 0;
this.settings = config.settings || [];
this.CreateWindowSettingsWindows();
this.addEvents('myCustomEvent');
},
});
In constructor I added registration for myCustomEvent.
And in ajax call I try to invoke
Ext.Ajax.request({
url: url,
contentType: "application/json",
method: 'POST',
dataType: 'json',
jsonData: Ext.encode(this.settings),
failure: function(response, options) {
Ext.MessageBox.alert(response.statusText);
},
success: function() {
Ext.MessageBox.alert("Data was updated");
this.fireEvent('myCustomEvent', 1);
}
});
Please avise
if the Ext.Ajax.request is placed into a method of your "Setting" class, simply add the scope parameter to your Ext.Ajax.request call:
Ext.Ajax.request({
url: url,
contentType: "application/json",
method: 'POST',
dataType: 'json',
jsonData: Ext.encode(this.settings),
failure: function (response, options) {
Ext.MessageBox.alert(response.statusText);
},
success: function () {
Ext.MessageBox.alert("Data was updated");
this.fireEvent('myCustomEvent', 1);
},
scope: this
})
Related
With my code i get a internal Server error:
#using (Html.BeginForm("", "Manage", FormMethod.Post, new { role = "form"}))
{
#Html.AntiForgeryToken()
}
<script>
function Like(id) {
var requestData = {
profileId: id,
__RequestVerificationToken: $('[name=__RequestVerificationToken]').val(),
};
$.ajax({
url: '/Manage/Like',
type: 'POST',
data: JSON.stringify(requestData),
dataType: "json",
contentType: 'application/json; charset=utf-8',
error: function (xhr) { alert('Error: ' + xhr.statusText); },
success: function (result) {},
async: true,
processData: false
});
}
</script>
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Like(string profileId)
{ ... }
If i remove [ValidateAntiForgeryToken] everything works fine, but i lose the sercurity. How can i fix the internal server error?
I see in fiddler SyntaxView 2 requests:
/Manage/Like
{"profileId":13,"__RequestVerificationToken":"jH2ofYlcTiHl8lixW_ANEHOg5KgwRh5Xl43lQfGkDFh55jX-x5cmz4RfPtbDfu92oQsTM7zsop83ldfbxMdIIELYZ0kfByFcXjUp-5mwyKZcQzjXP2gy6qW0iQOtLsqaDjFSzoxnyqM2MD42CbItzw2"}
/Manage
__RequestVerificationToken=MNiKOJHZg7BGaTNccOjrR2Obf_nPhKfcwIPZVBUl53G368n5euzB4y1htH47VKg3V3mHfxkjYZDz6iPepQ7jpeXGARtlj6vV74B8zQbp4by9JR4Rcz4sHANm3WHb6WAXaLcsnFvWJth_8c98XKda5w2
Taking this from a sim. question here include antiforgerytoken in ajax post ASP.NET MVC
function Like(id) {
var form = $('form');
var token = $('input[name="__RequestVerificationToken"]', form).val();
$.ajax({
url: '/Manage/Like',
type: 'POST',
data: { __RequestVerificationToken: token, profileID: id },
error: function (xhr) { alert('Error: ' + xhr.statusText); },
success: function (result) {},
async: true,
processData: false
});
}
Fiddle: http://jsfiddle.net/gpTpK/
The issue I am having is that the title variable is not updated/changed when the $.ajax is executed, I know that the ajax call is working as I have tried replacing the line
title = $(xml).find("title").text();
with
console.log($(xml).find("title").text());
and sure enough it does return the title however when using the orginal line the variable title doesn't change
I have tried and it does work putting the ajax call outside (function($){})(jQuery);
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
blogID: "",
postID: "",
done: null
};
var options = $.extend(defaults, options);
var title;
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
success: function(xml) {
title = $(xml).find("title").text();
}
});
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
};
})(jQuery);
I have tried the below and i have also tried wrapping the ajax in a function such as getTitle(){ajax code here with return title;}
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
blogID: "",
postID: "",
done: null
};
var options = $.extend(defaults, options);
var title;
getAjax();
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
function getAjax() {
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
async: false,
success: function(xml) {
title = $(xml).find("title").text();
}
});
}
};
})(jQuery);
sorry, I have spent ages trying to figure it (I didn't ask out of laziness :P), regardless here's the solution for those interested :)
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
done: null
};
var options = $.extend(defaults, options);
var title;
var sorf;
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
success: function(xml) {
title = $(xml).find("title").text();
sorf = 1;
},
error: function(){
sorf = 0;
},
complete: function() {
returnvals(sorf);
}
});
function returnvals(sorf) {
if(sorf){
//success
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
}else{// failure}
}
};
})(jQuery);
I created class which extends Ext.Ajax.request but I can run it. I always get error message:
TypeError: me.fireEvent is not a function
if (me.fireEvent('beforerequest', me, options) !== false) {
Ext.define('MY.classes.GetItem', {
extend: 'Ext.Ajax.request',
url: 'getItems.php',
method : 'GET',
timeout: 30000,
success: function (response, opts){
alert('email sent succ!');
},
failure: function (response, opts){
alert('email request fail! ' + response.status);
//var jsonResp = Ext.util.JSON.decode(response.responseText)
//Ext.Msg.alert("Error",jsonResp.error);
},
// headers: {'Content-Type': 'application/json'},
// jsonData: {"emailId" : "admin#psiloc.com" },
params: {
To: "arek#ooo.com",
Subject: 'temat',
Text: 'wiasomosc'
}
});
I call it:
var p = {id: itemId};
var req = Ext.create('MY.classes.GetItem');
req.request( {params : p} );
Is it possible to call request by extended class at all?
I cannot make it work.
That's because you're extending a function, not a class.
The class is Ext.Ajax
You can't extend this either
Ext.define('...', {
extend: 'Ext.window.Window.show',
});
You could do something like this (NOTE: I haven't tested this so might have bugs):
Ext.define('MY.classes.GetItem', {
url: 'getItems.php',
method: 'GET',
timeout: 30000,
constructor: function() {
var me = this;
Ext.apply(me, config);
me.callParent();
},
success: function(response, opts) {
alert('email sent succ!');
},
failure: function(response, opts) {
alert('email request fail! ' + response.status);
},
params: {
To: "arek#ooo.com",
Subject: 'temat',
Text: 'wiasomosc'
},
request: function() {
var me = this;
Ext.Ajax.request({
success: me.success,
failure: me.failure,
url: me.url,
method: me.method,
params: me.params
});
}
});
And call your class like this following:
var myClass = Ext.create('MY.classes.GetItem', {
params: {
p: 'my parameter'
}
});
myClass.request();
I have created ajax method in one class in my js file. Below is enclosed for the reference
var ajaxcall =
{
SitePath: '',
data: '',
url: '',
callbackfunction: '',
fileElementId: '',
AjaxRequest: false,
callback: true,
async: false,
folder: '',
filename: '',
Call: function () {
if (ajaxcall.AjaxRequest == true) {
alert(ajaxcall.AjaxRequest);
return;
}
else {
try {
ajaxcall.AjaxRequest == true;
alert('b');
$.ajax({
type: "POST",
url: ajaxcall.url,
data: ajaxcall.data,
contentType: "application/json; Characterset=utf-8",
dataType: "json",
async: false,
success: function (data) {
if (ajaxcall.callback == true) {
ajaxcall.callbackfunction(data);
}
},
error: function (request, status, error) {
//alert("Exception Handling : \n" + request.responseText);
alert('Unable to process the request at this moment! Please try again later.');
},
complete: function () {
ajaxcall.AjaxRequest = false;
}
});
}
catch (e) {
ajaxcall.AjaxRequest == false;
// alert("Error Catch : " + e.Description + '\n' + 'Message: ' + e.Message);
}
}
},
AjaxFileUpload: function () {
$.ajaxFileUpload({
type: "POST",
url: "../GenericHandlers/FileUploader.ashx?path=" + ajaxcall.folder,
dataType: 'json',
async: false,
secureuri: false,
fileElementClass: ajaxcall.fileElementClass,
success: function (data) {
var data = data.toString();
ajaxcall.filename = data.substring(6, data.length - 7);
alert(ajaxcall.filename);
return true;
}
});
}
};
Now i want to show a div when ajax call starts and hide after finish.
So for that i have used
$(document).ready(function(
$('#Loading').ajaxStart(function () {
alert('a');
$('#Loading').show();
}).ajaxStop(function () {
$('#Loading').hide();
});
});
But when i call the ajax method (defined above in the class), control goes into ajax method first then in ajaxStart.
I don't know why it is happening. Please help.
Use the recommended global for these:
$.ajaxStart(function() {
$("#Loading").show();
});
$.ajaxComplete(function() {
$("#Loading").hide();
});
Try it this way attached to your Loading id element:
$("#Loading").ajaxStart(function() {
$(this).show();
});
$("#Loading").ajaxComplete(function() {
$(this).hide();
});
AjaxStart called when the http request start, not when the ajax method executes.
This is my jquery with json
$('#btnVerificationOk').click(function () {
var verId = $('#trans_verification_id').val();
var verCode = $('#trans_verification_code').val();
$.ajax({
url: '/Profile/CompleteTransactions',
type: 'POST',
data: { },
dataType: 'json',
success: function (result) {
alert(result);
},
error: function () {
alert('ERROR ERROR !!!!!!!!!!!!');
}
});
});
And My C# method:
[Authorize]
[HttpPost]
private JsonResult CompleteTransactions()
{
return Json("Done");
}
Its always alerts 'ERROR ERROR !!!!!!!!!!!!' i tried debugging but CompleteTransactions method is not firing
And this is my second json which is bellow and works good
$('#btnTransfareOk').click(function () {
var userName = $('#transfare_username').val();
var amount = $('#transfare_amount').val();
if (userName == '' || amount == '') {
$('#transfare_error_list').html('Please fill boxes.');
} else {
$.ajax({
url: '/Profile/TranfareMoney',
type: 'POST',
data: { ToUsername: userName, Amount: amount },
dataType: 'json',
success: function (result) {
$('#transfare_error_list').html(result.text);
$('#trans_verification_id').val(result.id);
$('#transfare_username').val("");
$('#transfare_amount').val("");
},
error: function () {
$('#transfare_error_list').html('Oops... Error.');
}
});
}
});
I'm not 100% sure, but shouldn't you controller action handler be public ?