Ajax file upload not working in chrome browser - ajax

I am using AjaxUpload for file upload but with the recent update in Chrome, it seems to be no longer working in chrome and many other browsers. So I started to figure it out. I have to spend around 2 to 3 hours trying various possible ways but it was not working.
The Issue was, When we select image or file then it was calling the OnComplete Event without calling server-side action due to which it was returning a null empty value. And after completed with OnComplete event then server-side action got called with no return back to OnComplete Event.
When “iframeSrc” is set to “javascript:false” on https pages, Chrome now seems to cancel the request. Changing this to “about:blank” seems to resolve the issue
Later I fix this in the code and it seems to be working for me now.
var iframe = toElement('<iframe src="about:blank;" name="' + id + '" />');
I hope it will work for you as well. :)
Reference: https://www.infomazeelite.com/ajax-file-upload-is-not-working-in-the-latest-chrome-version-83-0-4103-61-official-build-64-bit/
If is there anything I am missing the do correct me.

This will fix the issue.
Old Code:
var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
New Code with chagnes:
var iframe = toElement('<iframe src="about:blank;" name="' + id + '" />');

Related

Fancybox avoid caching of ajax requests

I'm currently facing an annoying (suspected) cache issue with fancybox 3.4.1:
<a data-fancybox="" data-type="ajax" data-src="src/views/forms/SpeiseplanCreateForm.php?ValidFrom=1560117600" href="javascript:;" id="fancybox-SpeiseplanCreateForm"><button id="fancybox-SpeiseplanCreateForm-button">Speiseplan bearbeiten</button></a>
has a GET parameter which is then evaluated by my PHP script, however, when I click on it for the first time, it works fine, but when I change the value of ValidFrom via JavaScript and try to open the box a second time, the get parameter is still the same as in the first call. I assume it's related to fancybox caching the requests.
I have verified that the URL parameter is getting changed properly and I also tried disabling the cache by adding this to my header:
<script>
$(document).ready(function() {
$(".data-fancybox").fancybox({
type : 'ajax',
ajax : { cache: false }
});
});
</script>
as suggested here: https://stackoverflow.com/a/17621281/4934937
Is there a way to disable the cache?
I just found a very dirty workaround for this. After editing the element in Firefox (Edit HTML), it worked. So I guessed it must have something in common with some weird caching (browser or fancybox, who knows).
The workaround is to create a new a element, remove the old a and append it to the old a's parent again.
let newElement = document.createElement("a");
newElement.setAttribute("id","fancybox-"+id)
newElement.setAttribute("data-fancybox","");
newElement.setAttribute("data-type","ajax");
newElement.setAttribute("href","javascript:;");
newElement.setAttribute("data-src",fancyboxSrc);
newElement.appendChild(button);
fancybox.outerHTML = "";
parent.appendChild(newElement);

SignalR 2.0.1, done trigger Ie8

I'm using SignalR (2.0.0 then 2.0.1) to make some real-time web application. Every 5 seconds it receives some data... Also process user events. Anything works, but i have problems with IE8 (same with any version if IE + compatibility Mode).
var worker = $.connection.mainHub;
...
worker.client.test= function () { ... };
var connection = ((navigator.userAgent.match(/iPad/i) != null) ?
$.connection.hub.start({ transport: ['webSockets', 'longPolling'] }) :
$.connection.hub.start())
.done(function () { console.log($.connection.hub.id);});
1) The first one: after ~1-2minutes of working - everything became slower(user events like pressing buttons, simple css hover action, etc.), IE seems to be dieing.
I thought the reason is memory leak.. it's a large amount of JavaScript (I'm using knockoutjs to build my html). But now i'm not sure
2) I need to have some clarity, how should I reload the page.
I'm using "location.href = location.href;" and everything fine, but in IE it seems to cause an error.
Not always, but often there is an error "$.connection.hub.id is undefined". I check $.connection.hub.transport, it's undefined too. Have no idea what i'm doing wrong...
it seems there was redirecting to other page at the moment of 'done' occured. jquery.signalR stayed on the other page.. I guess there is some specific of brouser cash

jQuery Mobile changePage() not working in Windows Phone

I am developing an application using Phonegap for Windows Phone 8.
I've used jQuery Mobile for interface design.
the $.mobile.changePage() is not working. The page is not being changed.
Is there any other way to change the page? Is there any other framework to design the interface for mobile?
$("#btnSearch").bind('click', function() {
showSpinner();
$.mobile.changePage("#pageSearch");
});
I think this problem is the same as in WP7 described here.
CHECK FOR PATH PROBLEM:
if($.mobile.path.getLocation("x-wmapp1:/app/www/index.html") != "x-wmapp1:/app/www/index.html")
{
console.log('there is path problem');
}
else
{
console.log('everything is OK with paths');
}
SOLUTION:
As described in github, problem is path on WP7 differs from other platforms. Basically on WP7 getLocation prints relative paths with double slashes, which causes this issue at first place. To fix, open jquery.mobile-1.3.1.js and refactor following:
- var uri = url ? this.parseUrl( url ) : location,
- hash = this.parseUrl( url || location.href ).hash;
+ var uri = this.parseUrl( url || location.href ),
+ hash = uri.hash;
and:
- return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash;
+ return uri.protocol + uri.doubleSlash + uri.host + uri.pathname + uri.search + hash;
After making this changes, check should display "everything is OK".
PS This is tested on WP7 and totally fixed my issue with $.mobile.changePage().
PS2 This issue is fixed at github version of jQuery, although I've just checked latest stable version(1.3.2) and unfortunately it is NOT fixed there.
Regards,
Hristo Todorov
I did have the paths problem mentioned in the answer above, but this didn't solve my problem. I discovered after a lot of trial and error that it was the protocol on the begining of the URL that was causing the problem.
A change page for "mypage.html" will send an Ajax request for
x-wmapp0://www/mypage.html
It needs to be just
www/mypage.html
I made a modifcation to the jQuery Mobile source to manipulate the string to cut off the protocol and now it works perfectly.
To apply the fix, in the un-minified jQuery Mobile js file, search for "$.ajax" and add the following just before it:
var parts = fileUrl.split("www/");
fileUrl = "www/" + parts[parts.length-1];
This actually removes "x-wmapp0://www/" and puts the "www/" back on again. Removing just "x-wmapp0://" does not always work because of the way jQuery Mobile works with urls, resulting in "www/www/..." in some cases.
This is confirmed to work with Cordova 3.1 and 3.3 with jQuery Mobile 1.3.2
I think the method was renamed to "pagechange"
http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/#upgrade

How do I post an ajax radio value?

I'm struggling with just getting data from an ajax created radio button to correctly post the data at the click of a submit button, and I'm getting frustrated trying to figure out where I've gone wrong.
Am I wrong in thinking that once the ajax radio buttons have been properly created in my HTML driven website from my ajax backend shown here
while(odbc_fetch_row($rs)) {
$rowCarDeets = odbc_result($rs, 'CarDescript');
$response = $response . "<input type='radio' name='CarDescription' value='" . $rowCarDeets . "'>". $rowCarDeets . "</input></br>";
}
That all I need to do is grab it with a $_POST['CarDescription']? I have very little experience working with this, so if there is something that is supposed to be very obvious I need to add, please don't hesitate to suggest it just in case I did forget.
Just as a note, everything else in the form (not provided via ajax, simply taking user input) that these radio buttons are in get posted perfectly.
in $_POST, you should be able to just get the checked value by using the element's name attribute.
so: $_POST['CarDescription']

JQuery Mobile and JSONP

I have my jquery mobile app pulling data from our mysql db using JSONP. The data is pulling fine, but the problem comes when I go back to the previous "page" in my app then click on a different option, it doubles the data on the next screen, and it will just keep stacking the data as many times as I do that. What am I missing?
The app doesn't look right in any browsers, but it looks fine in the ios simulator or appmobi simulator. I can post some code if needed, just know it won't look right in your browser.
Thank you for any help you can provide
$('#two').bind('pagecreate',function(event){
var img = getUrlVars()["st"];
var photo = $('#img');
$.ajax({
type: 'GET',
url: 'http://serverhidden/json/img.php?st='+img,
dataType: 'jsonp',
success: function(data) {
$.each(data, function(i,item){
var image = '<img class="stmap" src="images/states/lrg/'+item.img+' "/>';
photo.html(image);
});
},
error: function(e) {
//called if there is an error
//console.log(e.message);
}
});
});
Make sure you are not subscribing your event multiple times. It seems silly but is easy to do.
I would recommend you add logs to your JQM site so that you can see how many times your site is being updated.
You should also be aware that updating a JQMobile page often requires a call to a method to update content after a page is rendered. See here: jQuery Mobile rendering problems with content being added after the page is initialized
Hope those help.
So without any code from your project this is a shot in the dark but it seems like you populate a pseudo-page with information on pageshow with an .append() call. Instead of using .append(), use .html() as it will replace the information already present rather than add to it.
If each state has an individual page then you can bind to the pagecreate (or similar) event so the data will only be appended once rather than on each pageshow event.

Resources