Develop Reference

Load fancybox when ajax returns ERROR

Here is the scenario:
My AJAX script determines whether or not a user is logged in when he clicks on an action.
When the user is not logged in, AJAX returns error. I want to load div which contains login form on a fancybox.
How can I do this?
Here is what I have:
$.ajax({
type : 'POST',
url : 'xyz.action',
dataType : 'text',
herf :'login.jsp',
success : function (data) {},
error : function () {
alert("PLEASE LOGIN");
$("#loginForm").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
}
});
return false;
Login

I got the solution :)...
$("#fan").fancybox({
'enableEscapeButton' :true,
'type':"iframe",
href :'login.jsp',
'hideOnOverlayClick' : true
}).trigger('click');

Try
$.fancybox('login.jsp');
If that doesn't work, I like to do this:
$.post('login.jsp',function(data){$.fancybox(data);});

Ext.Ajax.request always fails

I'm trying to access any web resource via Ext.Ajax.request but it is always failing, for example I have GlassFish Server on my localhost at port 4848 and when I try to access it the request fails,I've tried other urls but with no success.
this is my code:
`items:[
{
id : 'button1',
xtype : 'button',
text : 'click',
listeners: {
click : function(btn){
Ext.Ajax.request({
method : 'GET',
url : 'http://localhost:4848',
success : function(){
alert('success');
},
failure : function(){
alert('fail');
}
});
}
}
]`

I think you should firstly specify a file after localhost.

I am making an ajax call to load the contents into modal dialog; which seems to be working on all other browser than IE

I am making an ajax call to load the contents into modal dialog; which seems to be working on all other browser than Internet Explorer. In Internet Explorer it is freezing and I cannot do any thing I have to use Task Manager to end task. Can anyone tell me what can i do to resolve the freezing issue? The content that I am loading from the URL are dynamic HTML contents, which has scripts, etc.
try{
var LOCALE ='en_us';
var custNUm= 'Y0392287497';
var dURL = 'https://www.over.com?cstNum='+custNUm+'&loc='+LOCALE;
var mModal = $("<div class=\"mdialog\" role=\"dialog\"></div>").html('Loading Please Wait....').dialog({
position : [ 'center', 20 ],
modal : true,
//autoOpen : false,
bgiframe : true,
resizable: false,
closeOnEscape : false,
title : "CUSTOMER MODAL",
close : function(event, ui) {
$(this).remove();
}
});
$.ajax({
url : dURL,
type : 'POST',
dataType : 'text',
timeout : 5000,
beforeSend: function()
{
$('html,body').css('overflow', 'hidden');
},
error : function(xhr, status, error) {
alert(error);
},
success : function(textResponse) {
mcdpModal.html(textResponse);
}
});
}catch(e){
alert(e);
}

Want to the following: 1.Is ur Modal Window getting opened ?
2.Is your data response comming from ur server
3.Is this url u access resides in different domain ? (for 3 rd point:IE does not support Cross Domain AJAX Calls.You need to have both ur execution domain and the server domain to be same.)

How to make a successful JSON call from Javascript

I am baffled by this for very long now. I want to gain this precious knowledge of making JSON call properly. Help me Humans.
So I'm making a call exactly like this:
$.ajax({
type : "POST",
url : "http://quote.mythicalQuotes.com/unicorn/service/historical/json?callback=callme&symbols=APPL",
dataType: "text",
cache : false,
data : My_Array,
error : function(request,error){alert(request+" "+error); },
success : function(data)
{
alert("Response" + data);
}//success
}).fail(function(textStatus, errorThrown) { alert("error Error");
console.log("The following error occured: "+ textStatus, errorThrown); });
But it fails and throws 'error' alert. Good Coding!
Now pasting "http://quote.mythicalQuotes.com/unicorn/service/historical/chart/lite/json?callback=callme&symbols=APPL" on my browser URL gives me nice JSON of format:
callme(
{
"SYMB" : [
{
"DESCRIPTION" : "APPL,
"BARS" : {
"CB" :[
{
"lt" : "09-01-2011::20:00:00",
"op" : "16.31",
"cl" : "15.22",
"hi" : "16.45",
"lo" : "14.72",
"v" : "17768019"
},
{
"lt" : "09-02-2011::20:00:00",
"op" : "15.22",
"cl" : "14.22",
"hi" : "19.45",
"lo" : "10.72",
"v" : "17768000"
}
]
}
]
})
So what atrocity am I doing here which is provoking my anger toward this particular Javascript semantics/syntactics?
Couple of reasons I thought which might cause this.
1. Same origin policy.
2. Wrong JSON format being return.
3. Stupidity of my code.
Please help.

This is a JSONP-type response. Add dataType: jsonp to the JQuery AJAX request. Since you're also specifying the callback function explicitly, add jsonpCallback: callme also. See the JQuery docs for more info (scroll down to the "dataType" section).
$.ajax({
dataType: "jsonp",
jsonpCallback: "callme",
// ...
success: function(data) {
alert(data); // should show the JSON: { "SYMB" : ... }
}
});
You mentioned the cross-domain policy; the JSONP spec is a workaround for this policy blocking cross-domain requests. The idea is that, rather than returning data, the server returns a Javascript snippet containing data. The client then executes the returned function to retrieve the data. The JQuery ajax method has built-in functionality to handle all this "behind the scenes".

Variable in Javascript for uploadify form data is undefined

Hi I need to save a variable in Javascript and give it to uploadify.
This is my code:
var mediaID;
$(".edit_photo_media").live("click", function() {
mediaID = $(this).data("media-id");
$.ajax({
url: 'edit.php?action=media_select',
type: 'GET',
dataType: 'html',
success: function (select) {
if (select == '3') {
document.location = "login.php";
} else {
$("#dialog_upload_media").dialog("open");
}
}
});
return false;
});
$('#file_upload').uploadify({
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.jpg;',
'fileSizeLimit' : '4096KB',
'debug' : true,
'method' : 'post',
'formData' : {'id' : '' + mediaID},
'swf' : 'include/swf/uploadify.swf',
'uploader' : 'include/scripts/upload_mult.php'
});
So everytime before the uploader is opened .edit_photo_media is clicked.
<img src="images/photo.png" />
This is where the var mediaID is getting its content. Inside .edit_photo_media mediaID is defined correct.
But if I click the upload button mediaID is undefined. Why is the variable loosing its value?
Edit: Ok this seems to be related to a uploadify bug? If I check mediaID on any other function it is working fine... rlly strange

Ok problem solved. Just added 'onUploadStart' and saved the id in there
$('#file_upload').uploadify({
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.jpg;',
'fileSizeLimit' : '4096KB',
'buttonText' : 'Bilder auswählen',
'debug' : true,
'method' : 'post',
'formData' : {'id' : 0},
'swf' : 'include/swf/uploadify.swf',
'uploader' : 'include/scripts/upload_mult.php',
'onUploadStart' : function(file) {
$('#file_upload').uploadify("settings", "formData", {"id": mediaID});
}
});

jQuery only started subsuming HTML5 data properties set in the source code from version 1.6 onwards. If you're using < 1.6, this won't happen, in which case upgrade jQ.