We Keep Coding

Javascript syntax error caused by regex - specific to Internet Explorer(all versions)

I have a web application I ported from a Cordova project which works without problems on all common browsers except for IE. So far I have tested this application in Chrome, Chromium, Firefox, Safari and Edge.
The problem in Internet Explorer returns an error saying that "'submit' is undefined" whenever the following line is added to the code.
usr_id = /\[usr_id\] => (.*?)\n/gum.exec(response);
My guess is that the escape characters are somehow breaking the syntax but playing around with that didn't solve my problem.
The offending part in context below:
function submit(){
uname = $('#txt-uname').val();
password = $('#txt-password').val();
login(uname,password);
}
function login(tc,pass){
$.ajax({
type: 'POST',
url: webserviceURL+'login.php',
data: {'tc':tc, 'password':pass},
complete: function(r){
response = r.responseText;
if (response.indexOf("") > -1){
localStorage.setItem("login", "true");
usr_id = /\[usr_id\] => (.*?)\n/gum.exec(response);
localStorage.setItem("usr_id", 'test');
}
}
});
}

You cannot have u as the unicode flag in Internet Explorer. It is not supported yet. Please change your RegEx to:
usr_id = /\[usr_id\] => (.*?)\n/gm.exec(response);
Also, you can check the support by checking the response of:
RegExp.prototype.unicode
And if it supported for the browsers, use the u flag, as it breaks your original logic without that. With this change, at least, it works in Internet Explorer gracefully. This can be checked using:
(new RegExp()).unicode
It might return undefined in Internet Explorer, while false in other browsers.

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.

jQuery ajax get request not working with IE 11

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);

XMLHttpRequest().send() not working in chrome and opera

The following javascript function works fine for IE, Safari and Firefox. But it fails in Chrome(33.0.) and Opera (16.0.1196). Blank HTML page is displayed on loading.
function readTestXMLFile() {
if (window.ActiveXObject) {
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = 'false';
xmlDoc.load('test.xml');
}
else {
var requ = new XMLHttpRequest();
alert("a");
requ.open("GET", "test.xml", false);
alert("b");
requ.send(null); //This line is not working in chrome and opera
alert("c");
var xmlDoc = requ.responseXML;
alert(xmlDoc);
alert("d");
}
return xmlDoc;
}
Only 'a' and 'b' gets printed. It does not continue after that. Same result is observed if I use requ.send() or requ.send("") instead of requ.send(null).
If I remove the statement requ.send(null), then 'null' value is printed for xmlDoc. Still blank HTML loads.
Please let me know what is the right way to get this work on Chrome and Opera.
Thanks
SRB.

Your error message suggest that you are trying to access a local file which is treated as "Cross origin request" if you try and run local server it should work.
Take a look at this previously asked question with the same problem:
Cross origin requests are only supported for HTTP but it's not cross-domain
Then you would access http://localhost/.../test.xml instead of c:/localhost/.../test.xml
You can also set a flag for Chrome to allow local files to request local files: -allow-file-access-from-files

the call to the XMLHttpRequest.send method is Asynchronous so you need to modify the call a little bit. The modified code below will print the response content when the response is returned successfully:
requ.addEventListener("load", function(e) {
alert(req.responseText);
}, false)
requ.send(null);
Update:
I didn't notice that you made the send request call synchronous.
Edit
You need to launch chrome with this parameter to be able to access local files
--allow-file-access-from-files
ex: c:\Browser\chrome.exe --allow-file-access-from-files

I think that the problem is that you're passing null to the send() method. You are making a GET request, so you should call send without parameters. I think chrome throws an exception because of that. Just remove the null

Internet Explorer 9 in compatibility-mode shows error

While testing my jQuery script in IE 9 it shows error in jquery-1.6.2.js --
SCRIPT5022: Exception thrown and not caught
jquery-1.6.2.js, line 548 character 3
My js file used to work with no problems in other browsers - firefox 3.6, 5.0, opera 11, chromium, chrome. I do not understand. Is there a bug in the jquery source or is there a bug in my js file ? How do I find it ?
It hasen't been long since I started in this area so please I would really appreciate some ideas.
Thank you in advance.
[edited]
I've added the complete code.
I've learnt from :
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-jquery-image-cropping-plug-in-from-scratch-part-ii/
I don't know which part to add. The whole code does not fit in stackoverflow's submit. says "body is limited to 3000 characters; you entered 42121 "
[2nd edit]
I have used 'error' in my ajax submit.
//jquery ajax submit for resizing
function submit(myform,e){
$n.val($image.attr('src').replace(/^[^,]*\//,''));
var mydata = myform.serialize();
$.ajax({
url: $myform.attr('action'),
cache: false,
type:$myform.attr('method'),
data: mydata,
success: function(response){
var img = $("<img />").attr('src', 'images/'+response+'?'+ e.timeStamp) //<-- img name here
.load(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('Incorrect image.');
} else {
$("#result").html(img); //<-- put cropped img here.
}
});
},
error: function(){ //<-- error used here
$('#result').html("Err. Loading Image");
}
});
};

I traced out my problem. IE prevented changing of attribute which let to the jQuery error.
Note: jQuery prohibits changing the type attribute on an or element and
will throw an error in all browsers. This is because the type attribute
cannot be changed in Internet Explorer."
from http://api.jquery.com/attr, just after 1st warning notice.
So I changed my code from earlier
$('input').clone()
to
$('<input />').attr({'type':'hidden'})
and it solved my problem.
Thanks everyone.

jQuery.error() (which throws the message passed as an argument), is totally different to the error handler specified in an AJAX call.
jQuery.error() is used internally by jQuery (search for "error("). You should debug your code and follow the stack trace to find which of your methods is calling the jQuery method which is erroring.

Just a guess, but do you somewhere use $.error() inside your code? If yes: don't use it.
<edit>
However, this error comes from jQuery.error().
The original error-function looks like this:
error: function( msg ) {
throw msg;
}
You may test it without jquery:
(function( msg ) {
throw msg;
})('errormessage');
You'll get the same error.
If you don't use jQuery.error() maybe you use some plugin that uses it.
You may override this (buggy?) function by executing the following right after the embedded jquery.js:
jQuery.error=function(){}
</edit>