My fellow coder and I are having issues sending some image uploads to the MVC controller via a multipart FormData() element. What we currently have set up has been tested on a windows desktop using the latest versions of Chrome, IE, Edge, Firefox, and Opera without any issues.
Below is the JavaScript and ajax we are using. We have multiple file inputs that accept multiple image files. The loop below goes through and individually appends each file from each input.
var index = 0;
var data = new FormData();
data.append("datalist", JSON.stringify(formInfo)); //list of objects
data.append("form", JSON.stringify(headerInfo)); //object
var images = document.getElementsByClassName("ImageUpload");
for (var i = 0; i < images.length; i++){
var files = $(images[i]).prop("files");
if (files != null && files.length > 0){
for (var e = 0; e < files.length; e++){
//append the image with a filename
data.append("image" + ++index, files[e]);
}
}
}
UpdateData(data);
function UpdateData(datalist) {
$.ajax({
url: '#Url.Action("UpdateData", "Home")',
type: "POST",
cache: false,
contentType: false,
processData: false,
datatype: "JSON",
data: datalist,
success: function (result) {
//do stuff
}
});
}
In the controller, we are getting the information through Request.Form and Request.Files. As I mentioned, we are not having any problems other than on the iPad. When using the iPad, all it does is hang there, and does not even hit the controller. We do not have access to a Mac machine, so we can't hook up the iPad to use developer tools. The iPad has the latest version of IOS and has all app updates installed. We have spent a good portion of the afternoon trying various methods we found online, and even gave the google chrome app a whirl. But alas, we have been left to scratch our heads. Any help or information would be greatly appreciated.
Thanks in advance.
Related
I have a very small mvc application with 2 text boxes and few buttons. When user clicks on any button, data will be retrieved against particular value entered in text box.
But when I hosted it into the IIS server, its working only when I logged into the server remotely from my local machine, as soon as close the remote connection its giving error as "Data Not found".
In the coding I am displaying this error(Error Panel with ID #ErrorMessage) when we really don't have data and for any other exception as well. Please find my below code and advice why its working only when I remotely logged into the server
$.ajax({
url: "#Url.Action("DownloadForms", "Home")" ,
type: "POST",
data: { transactionType: btnType, QuotationNumber: quotNumber, ContractNumber: contractNumber},
cache: false,
async: true,
success: function (data) {
$('#divBlock').hide();
if (data != "") {
var _baseUrl = "#Url.Action("Download", "Home")" + "?FileVirtualPath=" + data;
window.location = _baseUrl;
}
else {
$("#ErrorMessage").css("display", "block");
$('#ldDialog').trigger('click');
ev.stopPropagation();
return false;
}
},
error: function (data) {
$('#divBlock').hide();
$("#ErrorMessage").css("display", "block");
$('#ldDialog').trigger('click');
The solution for this problem is, we just need to set the identity in component services of the server in which our application is hosted.
For example go to Start-->Component Services-->Microsoft Excel (or word)-->Properties-->Identity-->Set credentilas for This User(of user configured in IIS)
ASP.Net Com-InterOp Excel Generation issue when hosting
I'm using turbolinks to simulate a "single-page" app. The app is acceptably quick once pages are cached, however the first clicks are too slow. Is there a way to pre-fill the transition cache by loading some pages in the background?
I'm going to be looking into hacking into the page cache, but wondering if anyone has done this before.
(If this seems unusual, well, just trust that I'm doing this for good reason. Turbolinks gets nearly the performance of a far more complex implementation and overall I'm quite happy with it.)
UPDATE: So it seems like this SHOULD be relatively easy by simply adding entries to the pageCache of Turbolinks, something like:
$.ajax({
url: url,
dataType: 'html',
success: function(data) {
var dom = $(data);
Turbolinks.pageCache[url] = {
...
}
}
});
however it doesn't seem possible to construct a body element in javascript, which is required. Without out that, it doesn't seem like I can't construct the object that is stored in the cache without the browser first rendering it.
Any ideas beyond hacking more into Turbolinks?
UPDATE 2: There was the further problem that pageCache is hidden by a closure, so hacking Turbolinks is necessary. I have a solution that I'm testing that leverages iFrames - seems to be working.
First Hack Turbolinks to allow access to pageCache, the end of your turbolinks.js.coffee should look like this.
#Turbolinks = {
visit,
pagesCached,
pageCache,
enableTransitionCache,
enableProgressBar,
allowLinkExtensions: Link.allowExtensions,
supported: browserSupportsTurbolinks,
EVENTS: clone(EVENTS)
}
Then implement a fetch function. This is what you were thinking about, we can use DOMParser to convert string into DOM object.
function preFetch(url) {
$.ajax({
url: url,
dataType: 'html'
}).done(function(data) {
var key = App.Helper.getCurrentDomain() + url;
var parser = new DOMParser();
var doc = parser.parseFromString(data, "text/html");
Turbolinks.pageCache[key] = {
url: url,
body: doc.body,
title: doc.title,
positionY: window.pageYOffset,
positionX: window.pageXOffset,
cachedAt: new Date().getTime(),
transitionCacheDisabled: doc.querySelector('[data-no-transition-cache]') != null
};
});
};
Usage:
$(function() {
preFetch('/link1'); // fetch link1 into transition cache
preFetch('/link2'); // fetch link2 into transition cache
});
I have an app written in HTML5, Javascript, css3 using PhoneGap to compile for iOS and Android. It collects survey information and uploads this via Ajax call to online host. It has been working really well until recently the upload code appeared to stop working. WELL NOT QUITE! On the iPad it says successful but in fact nothing ever makes it to the host. This is VERY strange. I've tried re-writing the Ajax call based on articles on here but no luck.
iOS - 6.1.3, PhoneGAP 2.7.0, PhoneGap/Adobe Build used.
This is the upload piece...
function sendToWeb(){
var errorflag = false;
db.transaction(function (tx) {
tx.executeSql("SELECT weburl FROM settings", [], function(tx, results){
var webURL = results.rows.item(0).weburl;
tx.executeSql("SELECT * FROM surveypretransfer WHERE uploaded = '0'",[], function(tx, results){
if (results.rows.length == 0) {
alert("You have no surveys waiting to upload");
} else {
alert("You have " + results.rows.length + " surveys waiting to upload");
for (var i=0; i < results.rows.length; i++) {
var responseURL = webURL + "/feeds/saveinfo.php";
var responseString = results.rows.item(i).responsestring;
var localid = results.rows.item(i).id;
//alert(localid);
$.ajax({
type: 'POST',
data: responseString,
url: responseURL,
timeout: 30000,
success: function(data) {
alert('Success!' + data.join('\n'));
},
error: function(data) {
alert(data.join('\n'));
console.log("Results: " + localid);
alert("Error during Upload. Error is: "+ data.statusText);
}
}); //ajax
}; //for loop
alert("You have successfully uploaded "+ results.rows.length + " survey results");
tx.executeSql("UPDATE surveypretransfer SET uploaded = '1' WHERE uploaded = '0'");
}; //if statement
}); //tx.execute
});
}, errorCB);
}
Neither of the two alerts fire when loaded on iPad. Works fine on Android and has previously worked on iPad so I can't find what has changed.
UPDATE: Appears that this only applies to WiFi only iPads. All the 3G ones I tested were fine. Figure that!
Config.XML contains app id = "com.mydomain.myapp" (as an example)
URL for upload is "http://customer.mydomain.com/feeds/saveinfo.php?..."
Also added line 'access origin="http://mydomain.com" subdomains="true" '
Still no results. Is anyone seeing/having similar issues? Anyone see my mistake?
For iOS you might want to try <access origin="http://*.mydomain.com" />, as iOS is not documented in the PhoneGap API to support the subdomain property.
If that doesn't solve your issues, you will probably want to look into CORS (Cross Origin Resource Sharing). I had issues trying to do a POST request from my app to a local port on iOS. The W3C has a great article on how to enable CORS that will probably help. I know in my case, the system would attempt to do an OPTIONS request first, and if it didn't work, the whole thing would fail.
Another tool that you will probably find useful (if not now, in the future) is Fiddler. You can set up an iPad to proxy through your desktop, and then you will be able to observe all of the requests going to and from the device. This is how I found the OPTIONS request noted above.
I've created a page which needs to have its elements updated according what's happening with the data in our database. I'd like to know what do you think about this approach using eval, I know it's risky but in my case it was the fastest way.
$('.updatable').each(function () {
var data;
data = 'ViewObjectId=' + $(this).attr('objectid');
$.ajax({
async: true,
url: '/Ajax/GetUpdatedViewObjectDataHandler.ashx',
data: data,
type: 'POST',
timeout: 10000,
success: function (data) {
$.each(data, function (index, value) {
eval(value);
});
}
});
Now the issue I have is when the page is loaded, for each 10 seconds the page is updated, until here it's perfect.
After each round of updates, my Internet Explorer steal some memory, and it gets the whole machine memory after some hours, terrific.
What would you do in this case? Some other update approach is recommended? Or even, is there something you think I could do to avoid this memory leak?
Found the answer here: Simple jQuery Ajax call leaks memory in Internet Explorer
THE SOLUTION:
var request = $.ajax({ .... });
request.onreadystatechange = null;
request.abort = null;
request = null;
JQuery doesn't do that and the memory never releases.
jQuery version 1.4.2.
Now it's working like a charm.
I'm working on a web application and I went through the necessary steps to enable HTML5 App Cache for my initial login page. My goal is to cache all the images, css and js to improve the performance while online browsing, i'm not planning on offline browsing.
My initial page consist of a login form with only one input tag for entering the username and a submit button to process the information as a POST request. The submitted information is validated on the server and if there's a problem, the initial page is shown again (which is the scenario I'm currently testing)
I'm using the browser's developers tools for debugging and everything works fine for the initial request (GET request by typing the URL in the browser); the resources listed on the manifest file are properly cached, but when the same page is shown again as a result of a POST request I notice that all the elements (images, css, js) that were previously cached are being fetched form the server again.
Does this mean that HTML5 App Cache only works for GET requests?
Per http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#the-application-cache-selection-algorithm it appears to me that only GET is allowed.
In modern browsers (which support offline HTML), GET requests can probably be made long enough to supply the necessary data to get back data you need, and POST requests are not supposed to be used for requests which are idempotent (non-changing). So, the application should probably be architected to allow GET requests if it is the kind of data which is useful offline and to inform the user that they will need to login in order to get the content sent to them for full offline use (and you could use offline events to inform them that they haven't yet gone through the necessary process).
I'm having exactly the same problem and I wrote a wrapper for POST ajax calls. The idea is when you try to POST it will first make a GET request to a simple ping.php and only if that is successful will it then request the POST.
Here is how it looks in a Backbone view:
var BaseView = Backbone.View.extend({
ajax: function(options){
var that = this,
originalPost = null;
// defaults
options.type = options.type || 'POST';
options.dataType = options.dataType || 'json';
if(!options.forcePost && options.type.toUpperCase()==='POST'){
originalPost = {
url: options.url,
data: options.data
};
options.type = 'GET';
options.url = 'ping.php';
options.data = null;
}
// wrap success
var success = options.success;
options.success = function(resp){
if(resp && resp._noNetwork){
if(options.offline){
options.offline();
}else{
alert('No network connection');
}
return;
}
if(originalPost){
options.url = originalPost.url;
options.data = originalPost.data;
options.type = 'POST';
options.success = success;
options.forcePost = true;
that.ajax(options);
}else{
if(success){
success(resp);
}
}
};
$.ajax(options);
}
});
var MyView = BaseView.extend({
myMethod: function(){
this.ajax({
url: 'register.php',
type: 'POST',
data: {
'username': 'sample',
'email': 'sample#sample.com'
},
success: function(){
alert('You registered :)')
},
offline: function(){
alert('Sorry, you can not register while offline :(');
}
});
}
});
Have something like this in your manifest:
NETWORK:
*
FALLBACK:
ping.php no-network.json
register.php no-network.json
The file ping.php is as simple as:
<?php die('{}') ?>
And no-network.json looks like this:
{"_noNetwork":true}
And there you go, before any POST it will first try a GET ping.php and call offline() if you are offline.
Hope this helps ;)