jQuery ajax get request not working with IE 11 - javascript

I use this code to detect changes to a form and then perform a get request using the serialized form data. This works in all browsers that I have tested on. But I'm on a mac and now I get emails from people saying that it doesn't work in IE 11. What could be wrong?
Error message: "webpage.com is not responding due to a long running script"
I've tried testing this myself using IE 11 in a VirtualBox but the webpage becomes unresponsive as soon as I change something to the form. I'm not sure how to find out what's wrong.. I have no loops so I don't get why this script would make the page unresponsive.
Please help.
jQuery('.appselect').change(function(e) {
if (jQuery(window).width() > 800) {
jQuery.get('/?' + jQuery('#appfilter').serialize(), function(data) {
jQuery('#postloop').replaceWith( jQuery(data).find('#postloop') );
if (!jQuery('#pagination').length) {
jQuery('#postloop').after(jQuery(data).find('#pagination'));
} else {
jQuery('#pagination').replaceWith(jQuery(data).find('#pagination'));
}
});
}
});
This is a wordpress page, but I think the problem is not related to Wordpress. I'm using jQuery 1.11.1.

Try with:
var html = jQuery(data).find('#postloop').html();
jQuery('#postloop').html(html);

Related

Forced to use define('CONCATENATE_SCRIPTS', false); all of a sudden

I came into work on Monday with an email stating the visual editor on one of the Wordpress sites we manage/maintain wasn't working.
Sure enough, I was able to replicate the issue and found there were a ton of Javascript errors in the console.
I searched the first error and found several posts on Wordpress's forum that people needed to add the following to their wp-config.php file to fix the issue.
define('CONCATENATE_SCRIPTS', false );
However, nowhere on the entire internet is there an explanation as to why this all of a sudden needs to be added.
Because of that, I started to dig into the problem to see if I could find out what the heck is going on.
I clicked around the Wordpress admin area and noticed the issue was always coming back with this line of code.
Uncaught SyntaxError: missing ) after argument list
load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-up…:227
Line 227 of
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload&ver=4.3.1
is as follows
if(!params['modal']){jQuery(document).bind('keydown.thickbox',function(e){if(e.which==27){tb_remove();return false;}});}}catch(e){}}
This happens when I am on the following pages within the Wordpress admin area.
// Dashboard
/wp-admin/index.php
// Plugins page
/wp-admin/plugins.php
// Edit user page
/wp-admin/user-edit.php?user_id=###
// Edit post page
/wp-admin/post.php?post=###&action=edit
On each of those pages, the load-script.php source is different, so I am providing that info below.
// Dashboard
/wp-admin/index.php
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload&ver=4.3.1
// Plugins page
/wp-admin/plugins.php
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,underscore,wp-util,wp-a11y,updates,thickbox,shortcode,media-upload&ver=4.3.1
// Edit user page
/wp-admin/user-edit.php?user_id=###
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,zxcvbn-async,underscore,thickbox,shortcode,media-upload&ver=4.3.1
// Edit post page
/wp-admin/post.php?post=###&action=edit
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load%5B%5D=e,plupload,jquery-ui-position,jquery-ui-datepicker,jquery-ui-menu,jquery-ui-autocomplete,jquery-ui-resizable,jquery-ui-draggable&load%5B%5D=,jquery-ui-button,jquery-ui-dialog,media-upload&ver=4.3.1
I then got to a page in the admin area where the Javascript error DID NOT present itself!
// The page that lists all of the pages on the site
/wp-admin/edit.php?post_type=page
On this page, the load-script.php source is as follows
// The page that lists all of the pages on the site
/wp-admin/edit.php?post_type=page
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,thickbox,underscore,shortcode,media-upload&ver=4.3.1
I then went to that file directly is a browser and searched specifically for the following string since that is the string that all of the other pages were throwing an error on.
if(!params['modal']){jQuery(document).bind('keydown.thickbox',function(e){if(e.which==27){tb_remove();return false;}});}}catch(e){}}
To my surprise, that line of code IS NOT minified, whereas, the code IS minified in all of the other instances when the Javascript error occurs.
if(!params['modal']){
jQuery(document).bind('keydown.thickbox', function(e){
if ( e.which == 27 ){ // close
tb_remove();
return false;
}
});
}
} catch(e) {
//nothing here
}
}
Nothing on the server was changed/updated nor was Wordpress, the theme, or plugins updated.
I also went as far as disabling ALL plugins along with activated the default Twenty Fifteen theme, but the issue still exists.
There are even Wordpress sites on THE SAME server as this site that is having problems, and those other sites DO NOT have this problem.
At the end of that day, I don't really know if the detailed information I provided above helps anyone help me figure out what the heck is going on and why define('CONCATENATE_SCRIPTS', false ); all of a sudden needs to be added to the wp-config.php file to make the Javascript errors go away so the visual editor works again.
If anything, this is the most details I have seen anyone provide in regards to those that have needed to add define('CONCATENATE_SCRIPTS', false ); to their wp-config.php file to get the errors to go away.
You have a syntax error in the JS code:
It is not clear what this code is trying to achieve but there is clear syntax error:
Try changing:
if(!params['modal']){
jQuery(document).bind('keydown.thickbox', function(e){
if ( e.which == 27 ){ // close
tb_remove();
return false;
}
});
}
} catch(e) {
//nothing here
}
}
To:
if(!params['modal']){
jQuery(document).bind('keydown.thickbox', function(e){
if ( e.which == 27 ){ // close
tb_remove();
return false;
}
});
}
Looks like this code loaded from the file registered as "shortcode"
Also you can try using wp_dequeue_script function to remove conflicting scripts or move them up and down the queue
wp_dequeue_script("shortcode");
wp_enqueue_script("shortcode","script_url",array('jquery','lastScript'));

Stripe.js error with Laravel

I seem to be having a problem with Stripe.js and I am using Laravel as a framework with cashier.
I'm using stripe.js so I don't pass and credit card data through my server and also so I don't store any either. As of the current time, there seems to be an issue with browsers. Let me explain further, Chrome works and Firefox, Internet Explorer doesn't.
On Chrome:
Currently when you submit the field, the form behaves as expected. It will show card errors when you press the submit button. For example, the card number, expire month, etc (it validates it).
On Firefox and IE:
The form will not verify, instead it says:
A network error has occurred, and you have not been charged. Please try again.
And will automatically submit the form and not tell if the card number is accepted, etc. Also when you submit the form, it goes straight to a Laravel error page that says:
Missing required param: card
and I think this means that the stripe.js is not fully being used, and maybe the form isn't paying attention the the custom js.
Stripe.js
$(document).ready(function() {
Stripe.setPublishableKey('pk_test_HdoLAxfuWl53vjchF01fMphS');
$('#subscription-form button').on('click', function() {
var form = $('#subscription-form');
var submit = form.find('button');
var submitInitialText = submit.text();
submit.attr('disabled', 'disabled').text('Just one moment...');
Stripe.card.createToken(form, function(status, response) {
var token;
if(response.error) {
form.find('.stripe-errors').text(response.error.message).show();
submit.removeAttr('disabled');
submit.text(submitInitialText);
return false;
} else {
token = response.id;
form.append($('<input type="hidden" name="token">').val(token));
form.submit();
}
});
});
});
You may go try out the app at http://account.mcjoin.us and better direct me with the possible issue. And always, thanks for the help!
The solution for my issue was quite obvious; Internet Explorer and Firefox have not depreciated the e.preventDefault();
This may be confusing, but let me explain. On Chrome, e.preventDefault() is not necessary, and what it does is prevent the default form function. On Internet Explorer or Firefox, if this is not present, Javascript will not be able to "hijack" the form and do what it needs to do. Therefor, adding e.preventDefault() will make it so that the form doesn't have the default interaction.
Let's look further into the code now, here is stripe.js:
$(document).ready(function() {
Stripe.setPublishableKey('pk_live_DdMQOXgak0v4yS0yH7vnsHqu');
$('#subscription-form button').on('click', function(e) {
var form = $('#subscription-form');
var submit = form.find('button');
var submitInitialText = submit.text();
submit.attr('disabled', 'disabled').text('Just one moment...');
e.preventDefault();
Stripe.card.createToken(form, function(status, response) {
var token;
if(response.error) {
form.find('.stripe-errors').text(response.error.message).show();
submit.removeAttr('disabled');
submit.text(submitInitialText);
} else {
token = response.id;
form.append($('<input type="hidden" name="token">').val(token));
form.submit();
}
});
});
});
That's it! It's just that simple!
I took a look at your page, but it requires authentication. I suspect you're getting this result because there's a JavaScript error that only occurs on Firefox and IE that prevents the Stripe.js code from working. I'd check the error console for that. Removing all other JavaScript that might be on the page and retesting would also confirm this theory.
I'd also update your server-side code so that no charge attempt is made without having a token present.
Cheers,
Larry
PS I work on Support at Stripe.

LocalStorage not working on IE 11 Win 8.1

Basically i'm trying to remove few localstorage keys from my page.
The script I'm using is:
box.emptyStorageFilter = (function() {
$('header nav li a').off().on('click', function(e) {
localStorage.removeItem('list_customers');
localStorage.removeItem('list_orders');
localStorage.removeItem('list_products');
localStorage.removeItem('filter_category');
});
}());
I have no idea what's wrong, since it's working on EVERY browser (including IE 8,9,10) but IE 11!
At the console I get this Error:
SCRIPT5: Access is denied.
local storage does not work in local mode it's a security thing (but it can be made 2) http://social.technet.microsoft.com/Forums/ie/en-US/61177c2b-6a38-4207-9cbe-ccd6c86b1d42/html5-local-storage-broken-in-ie11-win-81-x64-error-function-expected#f345c94d-f404-4b4b-b808-d8849646be27 please post an update if you find anything...

Detecting protocol handler with Javascript [duplicate]

I have created a custom URL protocol handler.
http://
mailto://
custom://
I have registered a WinForms application to respond accordingly. This all works great.
But I would like to be able to gracefully handle the case where the user doesn't have the custom URL protocol handler installed, yet.
In order to be able to do this I need to be able to detect the browser's registered protocol handlers, I would assume from JavaScript. But I have been unable to find a way to poll for the information. I am hoping to find a solution to this problem.
Thanks for any ideas you might be able to share.
This would be a very, very hacky way to do this... but would this work?
Put the link in as normal...
But attach an onclick handler to it, that sets a timer and adds an onblur handler for the window
(in theory) if the browser handles the link (application X) will load stealing the focus from the window...
If the onblur event fires, clear the timer...
Otherwise in 3-5seconds let your timeout fire... and notify the user "Hmm, looks like you don't have the Mega Uber Cool Application installed... would you like to install it now? (Ok) (Cancel)"
Far from bulletproof... but it might help?
There's no great cross-browser way to do this. In IE10+ on Win8+, a new msLaunchUri api enables you to launch a protocol, like so:
navigator.msLaunchUri('skype:123456',
function()
{
alert('success');
},
function()
{
alert('failed');
}
);
If the protocol is not installed, the failure callback will fire. Otherwise, the protocol will launch and the success callback will fire.
I discuss this topic a bit further here:
https://web.archive.org/web/20180308105244/https://blogs.msdn.microsoft.com/ieinternals/2011/07/13/understanding-protocols/
This topic is of recent (2021) interest; see https://github.com/fingerprintjs/external-protocol-flooding for discussion.
HTML5 defines Custom scheme and content handlers (to my knowledge Firefox is the only implementor so far), but unfortunately there is currently no way to check if a handler already exists—it has been proposed, but there was no follow-up. This seems like a critical feature to use custom handlers effectively and we as developers should bring attention to this issue in order to get it implemented.
There seems to be no straightforward way via javascript to detect the presence of an installed app that has registered a protocol handler.
In the iTunes model, Apple provides urls to their servers, which then provide pages that run some javascript:
http://ax.itunes.apple.com/detection/itmsCheck.js
So the iTunes installer apparently deploys plugins for the major browsers, whose presence can then be detected.
If your plugin is installed, then you can be reasonably sure that redirecting to your app-specific url will succeed.
What seams the most easy solution is to ask the user the first time.
Using a Javascript confirm dialog per example:
You need this software to be able to read this link. Did you install it ?
if yes: create a cookie to not ask next time; return false and the link applies
if false: window.location.href = '/downloadpage/'
If you have control of the program you're trying to run (the code), one way to see if the user was successful in running the application would be to:
Before trying to open the custom protocol, make an AJAX request to a server script that saves the user's intent in a database (for example, save the userid and what he wanted to do).
Try to open the program, and pass on the intent data.
Have the program make a request to the server to remove the database entry (using the intent data to find the correct row).
Make the javascript poll the server for a while to see if the database entry is gone. If the entry is gone, you'll know the user was successful in opening the application, otherwise the entry will remain (you can remove it later with cronjob).
I have not tried this method, just thought it.
I was able to finally get a cross-browser (Chrome 32, Firefox 27, IE 11, Safari 6) solution working with a combination of this and a super-simple Safari extension. Much of this solution has been mentioned in one way or another in this and this other question.
Here's the script:
function launchCustomProtocol(elem, url, callback) {
var iframe, myWindow, success = false;
if (Browser.name === "Internet Explorer") {
myWindow = window.open('', '', 'width=0,height=0');
myWindow.document.write("<iframe src='" + url + "'></iframe>");
setTimeout(function () {
try {
myWindow.location.href;
success = true;
} catch (ex) {
console.log(ex);
}
if (success) {
myWindow.setTimeout('window.close()', 100);
} else {
myWindow.close();
}
callback(success);
}, 100);
} else if (Browser.name === "Firefox") {
try {
iframe = $("<iframe />");
iframe.css({"display": "none"});
iframe.appendTo("body");
iframe[0].contentWindow.location.href = url;
success = true;
} catch (ex) {
success = false;
}
iframe.remove();
callback(success);
} else if (Browser.name === "Chrome") {
elem.css({"outline": 0});
elem.attr("tabindex", "1");
elem.focus();
elem.blur(function () {
success = true;
callback(true); // true
});
location.href = url;
setTimeout(function () {
elem.off('blur');
elem.removeAttr("tabindex");
if (!success) {
callback(false); // false
}
}, 1000);
} else if (Browser.name === "Safari") {
if (myappinstalledflag) {
location.href = url;
success = true;
} else {
success = false;
}
callback(success);
}
}
The Safari extension was easy to implement. It consisted of a single line of injection script:
myinject.js:
window.postMessage("myappinstalled", window.location.origin);
Then in the web page JavaScript, you need to first register the message event and set a flag if the message is received:
window.addEventListener('message', function (msg) {
if (msg.data === "myappinstalled") {
myappinstalledflag = true;
}
}, false);
This assumes the application which is associated with the custom protocol will manage the installation of the Safari extension.
In all cases, if the callback returns false, you know to inform the user that the application (i.e., it's custom protocol) is not installed.
You say you need to detect the browser's protocol handlers - do you really?
What if you did something like what happens when you download a file from sourceforge? Let's say you want to open myapp://something. Instead of simply creating a link to it, create a link to another HTML page accessed via HTTP. Then, on that page, say that you're attempting to open the application for them. If it doesn't work, they need to install your application, which they can do by clicking on the link you'll provide. If it does work, then you're all set.
This was a recommended approach for IE by Microsoft support
http://msdn.microsoft.com/en-us/library/ms537503%28VS.85%29.aspx#related_topics
"If you have some control over the binaries being installed on a user’s machine, checking the UA in script seems like a relevant approach:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform
" -- By M$ support
Every web page has access to the userAgent string and if you drop a custom post platform value, detecting this in javascript using navigator.userAgent is quite simple.
Fortunately, other major browsers like Firefox and Chrome (barring Safari :( ), do not throw "page not found" errors when a link with a custom protocol is clicked and the protocol is not installed on the users machine. IE is very unforgiving here, any trick to click in a invisible frame or trap javascript errors does not work and ends up with ugly "webpage cannot be displayed" error. The trick we use in our case is to inform users with browser specific images that clicking on the custom protocol link will open an application. And if they do not find the app opening up, they can click on an "install" page. In terms of XD this wprks way better than the ActiveX approach for IE.
For FF and Chrome, just go ahead and launch the custom protocol without any detection. Let the user tell you what he sees.
For Safari, :( no answers yet
I'm trying to do something similar and I just discovered a trick that works with Firefox. If you combine it with the trick for IE you can have one that works on both main browsers (I'm not sure if it works in Safari and I know it doesn't work in Chrome)
if (navigator.appName=="Microsoft Internet Explorer" && document.getElementById("testprotocollink").protocolLong=="Unknown Protocol") {
alert("No handler registered");
} else {
try {
window.location = "custom://stuff";
} catch(err) {
if (err.toString().search("NS_ERROR_UNKNOWN_PROTOCOL") != -1) {
alert("No handler registered");
}
}
}
In order for this to work you also need to have a hidden link somewhere on the page, like this:
<a id="testprotocollink" href="custom://testprotocol" style="display: none;">testprotocollink</a>
It's a bit hacky but it works. The Firefox version unfortunately still pops up the default alert that comes up when you try to visit a link with an unknown protocol, but it will run your code after the alert is dismissed.
You can try something like this:
function OpenCustomLink(link) {
var w = window.open(link, 'xyz', 'status=0,toolbar=0,menubar=0,height=0,width=0,top=-10,left=-10');
if(w == null) {
//Work Fine
}
else {
w.close();
if (confirm('You Need a Custom Program. Do you want to install?')) {
window.location = 'SetupCustomProtocol.exe'; //URL for installer
}
}
}
This is not a trivial task; one option might be to use signed code, which you could leverage to access the registry and/or filesystem (please note that this is a very expensive option). There is also no unified API or specification for code signing, so you would be required to generate specific code for each target browser. A support nightmare.
Also, I know that Steam, the gaming content delivery system, doesn't seem to have this problem solved either.
Here's another hacky answer that would require (hopefully light) modification to your application to 'phone home' on launch.
User clicks link, which attempts to launch the application. A unique
identifier is put in the link, so that it's passed to the
application when it launches. Web app shows a spinner or something of that nature.
Web page then starts checking for a
'application phone home' event from an app with this same unique ID.
When launched, your application does an HTTP post to your web app
with the unique identifier, to indicate presence.
Either the web page sees that the application launched, eventually, or moves on with a 'please download' page.

IE 8/9 Crashes and Freezes with a message saying "A problem with this webpage caused Internet Explorer to close and reopen the tab?"

I am using Ajax via ICallbackEventHandler in ASP.NET, what happens on the page is that a recursive call is made back to the server every 1000ms using ajax. Here is the code that makes a ajax callback every 1 second:
setTimeout("MessageServerRequest(tempLastDate);", 1000);
function MessageServerRequest(param)
{
WebForm_DoCallback('ChannelControl1','getmessage~' + param,MessageServerResponse,null,null,true);
}
function MessageServerResponse(param, context)
{
if (param.length > 0) {
var splitParam = param.split("~");
var id = splitParam[0];
var messagesHtml = splitParam[1];
var lastDate = splitParam[2];
tempLastDate = lastDate;
$('#' + id).prepend(messagesHtml);
}
setTimeout("MessageServerRequest(tempLastDate);", 1000);
}
What this does is that it gets all the latest messages from the database and returns the new messages back to the client.
Now when i removed the recursive call, IE didnt crash, but the thing is that when i use Mozilla, Safari or Opera everything works fine with the recursive call being used.
I dont understand why its working for all other browsers and not IE 8/9
System Info
Windows 7 ultimate
32 bit
visual studio 2006
IE9, even didnt work with IE8 but i upgraded to IE9
Can anyone help me with this issue please, i would be greatful?
Thanks

Categories