[jQuery] jQuery Form help
<div dir="ltr"><div>Hi all - this is my first post so please be kind if I cover something that has been covered before.
For our new project we are using <a href="http://ASP.NET">ASP.NET</a> MVC framework along with jQuery. We make use of several plugins and have had relatively few problems. Today however we got stumped.
<u><b>The Problem</b></u>
In our registration process, in one of the steps we allow the user to upload photos of themselves and their pets. On the current site, DotNetNuke / classic <a href="http://ASP.NET">ASP.NET</a> based, we post back to the server and decided we do not want to do this anymore. Hence our use of the jQuery Form plugin (which we love btw). I've personally read all the docs, read the documentation in the jQuery Reference book as well as the jQuery in Action book, for the plugin. When the user submits the form, it is submitted to our controller via a call like "<a href="http://localhost/Home/AddUserPhoto">http://localhost/Home/AddUserPhoto</a>". This action method returns Json. The problem we are encountering is that we either get an error via the $().ajaxError setter or we are prompted to download a file. Internet Explorer just prompts us that is has "blocked" and action and asks us to download the file (unblock). FireFox gives us a bit more information, telling us that the file type is application/json, yet wants to save it as a .htm file.
Now I imagine this is due to the response being sent to an iframe and it not being able to interpret what it is. We decided to get around the problem by just returning a string that will be parsed in the success callback, but this is not ideal. Realistically we would like to throw an error that can be trapped in the $().ajaxError callback, but do to the iframe I do not see this as possible.
Here is a sample of the script:
/// <reference path="jquery-1.2.3-intellisense.js" />
/// <reference path"jquery.ajax.form.js" />
$(document).ready(function()
{
var options =
{
success: onSuccess,
datatype: "json",
type: "POST"
}
$("#AddPersonPhoto").ajaxError(onError);
function onError(a, b, c, d)
{
alert("Error!!");
}
function onSuccess(data)
{
alert("Normal!!");
}
$("#AddPersonPhoto").ajaxForm(options);
});
<b>The HTML</b>
<div id="aaform">
<div id="leftside">
<div id="AddPerson">
<form action="<%= Url.Action("AddUserPhoto", "Home") %>" method="post" id="AddPersonPhoto" enctype="multipart/form-data">
<h2>Photos of You</h2>
<p id="afterUserUpload">Click the Browse button again to select another photo for upload
<p id="userPhotos">
Photos go here
</form>
</div>
</div>
<b>The Controller Method</b>
public JsonResult AddUserPhoto()
</div>{
<div style="margin-left: 40px;">User theUser = new User(){ Age = 36, UserId = 1, Username = "Alec" };
return Json(theUser);
</div>}
As you can see, all pretty simple. The Json we are returning is strictly for testing purposes and not what the final code would be, obviously we are missing the handling of the file uploaded as well as error checking.
The controller method does get called and returns a successful result. No .Net errors are throw or trapped by our Rescue view. The success callback does not get called, but the ajax error callback does get called. Variable d shows the error as "Access Denied", yet no idea of where is Access Denied.
So I guess my question is have other people encountered this? Any other <a href="http://ASP.NET">ASP.NET</a> MVC'ers out there doing something similar? If so, what did you do to get the Json result working? Mike any ideas here? How can I trigger an ajax error when iframe is being used?
Thanks for patiently reading this
Alec Whittington
</div>
For our new project we are using <a href="http://ASP.NET">ASP.NET</a> MVC framework along with jQuery. We make use of several plugins and have had relatively few problems. Today however we got stumped.
<u><b>The Problem</b></u>
In our registration process, in one of the steps we allow the user to upload photos of themselves and their pets. On the current site, DotNetNuke / classic <a href="http://ASP.NET">ASP.NET</a> based, we post back to the server and decided we do not want to do this anymore. Hence our use of the jQuery Form plugin (which we love btw). I've personally read all the docs, read the documentation in the jQuery Reference book as well as the jQuery in Action book, for the plugin. When the user submits the form, it is submitted to our controller via a call like "<a href="http://localhost/Home/AddUserPhoto">http://localhost/Home/AddUserPhoto</a>". This action method returns Json. The problem we are encountering is that we either get an error via the $().ajaxError setter or we are prompted to download a file. Internet Explorer just prompts us that is has "blocked" and action and asks us to download the file (unblock). FireFox gives us a bit more information, telling us that the file type is application/json, yet wants to save it as a .htm file.
Now I imagine this is due to the response being sent to an iframe and it not being able to interpret what it is. We decided to get around the problem by just returning a string that will be parsed in the success callback, but this is not ideal. Realistically we would like to throw an error that can be trapped in the $().ajaxError callback, but do to the iframe I do not see this as possible.
Here is a sample of the script:
/// <reference path="jquery-1.2.3-intellisense.js" />
/// <reference path"jquery.ajax.form.js" />
$(document).ready(function()
{
var options =
{
success: onSuccess,
datatype: "json",
type: "POST"
}
$("#AddPersonPhoto").ajaxError(onError);
function onError(a, b, c, d)
{
alert("Error!!");
}
function onSuccess(data)
{
alert("Normal!!");
}
$("#AddPersonPhoto").ajaxForm(options);
});
<b>The HTML</b>
<div id="aaform">
<div id="leftside">
<div id="AddPerson">
<form action="<%= Url.Action("AddUserPhoto", "Home") %>" method="post" id="AddPersonPhoto" enctype="multipart/form-data">
<h2>Photos of You</h2>
Upload photos that include YOU!
<input id="File1" name="File1" type="file" />
<input id="MakeUserPhotoDefault" name="MakeUserPhotoDefault" type="checkbox" />
<label for="MakeUserPhotoDefault">Make this your default photo</label>
<input id="UserSubmit" type="image" src="../../Content/b_submit.gif" value="Submit" alt="Submit" />
<p id="afterUserUpload">Click the Browse button again to select another photo for upload
<p id="userPhotos">
Photos go here
</form>
</div>
</div>
<b>The Controller Method</b>
public JsonResult AddUserPhoto()
</div>{
<div style="margin-left: 40px;">User theUser = new User(){ Age = 36, UserId = 1, Username = "Alec" };
return Json(theUser);
</div>}
As you can see, all pretty simple. The Json we are returning is strictly for testing purposes and not what the final code would be, obviously we are missing the handling of the file uploaded as well as error checking.
The controller method does get called and returns a successful result. No .Net errors are throw or trapped by our Rescue view. The success callback does not get called, but the ajax error callback does get called. Variable d shows the error as "Access Denied", yet no idea of where is Access Denied.
So I guess my question is have other people encountered this? Any other <a href="http://ASP.NET">ASP.NET</a> MVC'ers out there doing something similar? If so, what did you do to get the Json result working? Mike any ideas here? How can I trigger an ajax error when iframe is being used?
Thanks for patiently reading this
Alec Whittington
</div>
Topic Participants
alec.whittington
malsup