Javascript works in Chrome, Safari and Opera but not Firefox - javascript

Site here.
Basically the box in the middle doesn't generate random string from my database in Firefox as it does in the other browsers. I can't seem to find the problem, my JS skills aren't amazing.
I haven't tested it in IE as I don't have access to it right now.
Any ideas?
Thank you!

The problem is that form is not defined where you're using it in firefox, you could write it a bit differently to be cross-browser compatible like this:
function get() {
$('#dare').fadeOut(500);
$.post ('data.php', $("form").serialize(), function(output) {
$('#dare').html(output).fadeIn(500);
});
}
The .serialize() function will take every input element in the form a serialize it, resulting in the same request all the other browsers are making...in a lot less code :)

Check the error message in firebug:
form is not defined
$.post ('data.php', {name: form.name.value, mode: mode, player: player},

The following error is generated when you view the site in Firefox:
Error: form is not defined
Source File: http://saucydares.freehostia.com/saucy.php
Line: 29
The line in question is
$.post ('data.php', {name: form.name.value, mode: mode, player: player},
I think the correct method for what you're doing here (if I interpret what you're doing here correctly) is to obtain the form's name with jQuery.

Related

SCRIPT5 : Access is denied on IE-10 after Security Update : jquery-1.4.4.min.js

There was an IE-10 security update on Sept-10. After that, in my application there seems to be an issue accessing a standard div using jquery.
Here is the quick scenario :
I have a jsp layout template where there is a div defined :
<div id="abc"></div>
In that I include a js file k1.js, the following function in that is triggered upon a click of a button
function sample() {
jQuery.get("/fetchmedata.do?a=true", function(data) {
jQuery("#abc").html(data);
});
This was totally functioning across all browsers including ie-10 till Sept -10. After 10th, it still works fine on IE-9 and old IE-10 builds, but on new IE-10 build throws the error in console :
SCRIPT5 : Access is denied
The call stack pointed to internals of Jquery code which I couldn't decipher/understand the context.
The quick fix was to replace the jquery with Javascript, and it worked :
function sample() {
jQuery.get("/fetchmedata.do?a=true", function(data) {
document.getElementById('abc').innerHTML = data;
});
The jquery version was jquery-1.4.4.min.js.
Please advice on what could have been the issue, is it again probably related to not using XDomainRequest instead of XHR, so that we could take precautions in the code to avoid future issues.
Also what is the best practices around it ?
Please advice.

Access native JSON object when JSON2 has overloaded it

I am implementing a bookmarklet which communicates with a iframe through a JSON-RPC protocol.
However some sites, such as cnn.com load JSON2 into window.JSON although the browser already has a native JSON object.
The problem is that within my iframe I would not like to follow the same bad practice, and JSON2 does not seem to be compatible with the native JSON on Mozilla Firefox and Chrome:
So when I run stringify on the native JSON and JSON2, I get the following results:
JSON.stringify({key: "value"})
JSON2
{key:"value"}
Native JSON
{"key":"value"}
(Key is wrapped in ")
The problem is that the native JSON does not like it when the " is missing in the JSON2-produced string and throws an error:
Mozilla Firefox: SyntaxError: JSON.parse: expected property name or '}'
Google Chrome: SyntaxError: Unexpected token k
To solve the problem for good, I need to make sure that I use the same JSON library to encode the string as I do for decoding it.
One way of doing it is to make sure to use JSON2 or JSON3 on both sides, but I'd like to use the native json library where possible.
So now that sites like cnn.com have overriden the native JSON library, how can I get back to it?
I could perhaps create an iframe that points to the same domain and fetch the JSON object from its contentWindow, but that would be highly inefficient.
Isn't there a better way?
not sure if i understand your problem correctly
if you place an empty iframe like this
<iframe id="testFrame" name="testFrame" src="about:blank" style="display:none;"></iframe>
then you can also call from js
testFrame.JSON.stringify(obj);
the only problem is that if you use it in https: src could be javascript:false if you need to support IE6
EDIT: I still think i don't deserve the answer being accepted, so i've come up with a modified version of your code
(function($) {
var frm;
$.getNative = function(objectName, callback) {
if (!frm) {
frm= $("<iframe>", {
src: "javascript:false",
style: "display:none;"
}).appendTo("body").load(function(){
callback(this.contentWindow[objectName]);
// $(this).remove(); <-- this is commented to cache the iframe
});
}
callback(frm[0].contentWindow[objectName]);
}
})(jQuery)
this will enable you to use $.getNative() multiple times in a document without recreating the frame each time.
So far the best solution is to use an iframe, but as Crisim Il Numenoreano has pointed out, it should be pointed to about:blank or javascript:false. This seems to work fine so far:
function getNative(objectName, callback) {
$("<iframe>", {
src: "javascript:false",
style: "display:none;"
}).appendTo("body").load(function(){
callback(this.contentWindow[objectName]);
$(this).remove();
});
}
//Use like this:
getNative("JSON", function(JSON) {
console.log(JSON.stringify({key: "value"}));
});
Note that for bookmarklets jquery must be fetched from reliable sources and protected within a local scope too.

Why does JavaScript only work after opening developer tools in IE once?

IE9 Bug - JavaScript only works after opening developer tools once.
Our site offers free pdf downloads to users, and it has a simple "enter password to download" function. However, it doesn't work at all in Internet Explorer.
You can see for yourself in this example.
The download pass is "makeuseof". In any other browser, it works fine. In IE, both buttons do nothing.
The most curious thing I've found is that if you open and close the developer toolbar with F12, it all suddenly starts to work.
We've tried compatibility mode and such, nothing makes a difference.
How do I make this work in Internet Explorer?
It sounds like you might have some debugging code in your javascript.
The experience you're describing is typical of code which contain console.log() or any of the other console functionality.
The console object is only activated when the Dev Toolbar is opened. Prior to that, calling the console object will result in it being reported as undefined. After the toolbar has been opened, the console will exist (even if the toolbar is subsequently closed), so your console calls will then work.
There are a few solutions to this:
The most obvious one is to go through your code removing references to console. You shouldn't be leaving stuff like that in production code anyway.
If you want to keep the console references, you could wrap them in an if() statement, or some other conditional which checks whether the console object exists before trying to call it.
HTML5 Boilerplate has a nice pre-made code for console problems fixing:
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
As #plus- pointed in comments, latest version is available on their GitHub page
Here's another possible reason besides the console.log issue (at least in IE11):
When the console is not open, IE does pretty aggressive caching, so make sure that any $.ajax calls or XMLHttpRequest calls have caching set to false.
For example:
$.ajax({cache: false, ...})
When the developer console is open, caching is less aggressive. Seems to be a bug (or maybe a feature?)
This solved my problem after I made a minor change to it. I added the following in my html page in order to fix the IE9 problem:
<script type="text/javascript">
// IE9 fix
if(!window.console) {
var console = {
log : function(){},
warn : function(){},
error : function(){},
time : function(){},
timeEnd : function(){}
}
}
</script>
Besides the 'console' usage issue mentioned in accepted answer and others,there is at least another reason why sometimes pages in Internet Explorer work only with the developer tools activated.
When Developer Tools is enabled, IE doesn't really uses its HTTP cache (at least by default in IE 11) like it does in normal mode.
It means if your site or page has a caching problem (if it caches more than it should for example - that was my case), you will not see that problem in F12 mode. So if the javascript does some cached AJAX requests, they may not work as expected in normal mode, and work fine in F12 mode.
I guess this could help, adding this before any tag of javascript:
try{
console
}catch(e){
console={}; console.log = function(){};
}
If you are using AngularJS version 1.X you could use the $log service instead of using console.log directly.
Simple service for logging. Default implementation safely writes the message into the browser's console (if present).
https://docs.angularjs.org/api/ng/service/$log
So if you have something similar to
angular.module('logExample', [])
.controller('LogController', ['$scope', function($scope) {
console.log('Hello World!');
}]);
you can replace it with
angular.module('logExample', [])
.controller('LogController', ['$scope', '$log', function($scope, $log) {
$log.log('Hello World!');
}]);
Angular 2+ does not have any built-in log service.
If you are using angular and ie 9, 10 or edge use :
myModule.config(['$httpProvider', function($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// Answer edited to include suggestions from comments
// because previous version of code introduced browser-related errors
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);
To completely disable cache.
It happened in IE 11 for me. And I was calling the jquery .load function.
So I did it the old fashion way and put something in the url to disable cacheing.
$("#divToReplaceHtml").load('#Url.Action("Action", "Controller")/' + #Model.ID + "?nocache=" + new Date().getTime());
I got yet another alternative for the solutions offered by runeks and todotresde that also avoids the pitfalls discussed in the comments to Spudley's answer:
try {
console.log(message);
} catch (e) {
}
It's a bit scruffy but on the other hand it's concise and covers all the logging methods covered in runeks' answer and it has the huge advantage that you can open the console window of IE at any time and the logs come flowing in.
We ran into this problem on IE 11 on Windows 7 and Windows 10. We discovered what exactly the problem was by turning on debugging capabilities for IE (IE > Internet Options > Advanced tab > Browsing > Uncheck Disable script debugging (Internet Explorer)). This feature is typically checked on within our environment by the domain admins.
The problem was because we were using the console.debug(...) method within our JavaScript code. The assumption made by the developer (me) was I did not want anything written if the client Developer Tools console was not explicitly open. While Chrome and Firefox seemed to agree with this strategy, IE 11 did not like it one bit. By changing all the console.debug(...) statements to console.log(...) statements, we were able to continue to log additional information in the client console and view it when it was open, but otherwise keep it hidden from the typical user.
I put the resolution and fix for my issue . Looks like AJAX request that I put inside my JavaScript was not processing because my page was having some cache problem. if your site or page has a caching problem you will not see that problem in developers/F12 mode. my cached JavaScript AJAX requests it may not work as expected and cause the execution to break which F12 has no problem at all.
So just added new parameter to make cache false.
$.ajax({
cache: false,
});
Looks like IE specifically needs this to be false so that the AJAX and javascript activity run well.

'JSON' is undefined error in JavaScript in Internet Explorer

We are using jQuery in our application. We have used a jQuery plugin to implement JavaScript session.
It is working properly in Firefox and most Internet Explorer 8 browsers.
But in some Internet Explorer 8 browsers it does not work. It gives the following error.
Message: 'JSON' is undefined
Line: 6
Char: 3
Code: 0
Message: '$.namesession' is null or not an object
Line: 53
Char: 2
Code: 0
`
The version of Internet Explorer in both the cases is same.
But there were some differences in Internet Explorer settings like Use SSL3.0 and Enable Smart Screen filters check boxes in the Advanced tab in the Internet options were unchecked.
When we checked it, it started working. When we unchecked them it was still working.
What is the actual problem in IE8?
Maybe it is not what you are looking for, but I had a similar problem and i solved it including JSON 2 to my application:
https://github.com/douglascrockford/JSON-js
Other browsers natively implements JSON but IE < 8 (also IE 8 compatibility mode) does not, that's why you need to include it.
Here is a related question: JSON on IE6 (IE7)
UPDATE
the JSON parser has been updated so you should use the new one: http://bestiejs.github.io/json3/
<!DOCTYPE html>
Otherwise IE8 is not acting right. Also you should use:
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
Please add json2.js in your project . i was faced the same issue i have fixed.
please use the link: https://raw.github.com/douglascrockford/JSON-js/master/json2.js
and create new file json.js, copy the page and past into newly created file , and move that file into your web application.
I hope it will work.
Check for extra commas in your JSON response. If the last element of an array has a comma, this will break in IE
Change the content type to 'application/x-www-form-urlencoded'
I had the very same problem recently. In my case on the top of a php script I had some code generationg obviously some extra output to the browser. Removal of empty lines (between ?> and html-tag ) and simple cleanup helped me out:
<?php
include('../config.php');
//
ob_clean();
?>
<!DOCTYPE html>
I had this error 2 times. Each time it was solved by changing the ajax type. Either GET to POST or POST to GET.
$.ajax({
type:'GET', // or 'POST'
url: "file.cfm?action=get_table&varb=" + varb
});

onclick event not working in firefox but works fine in IE

I got a simple form and it works fine in ie but not working in firefox
onclick="login('loginuser','../private/loginuser.php?username='+email.value+'&pass='+passw.value,'loginresult');"
Any help appreciated.
You should start by putting some alert calls in your login function to make sure that your arguments are getting quoted properly. Something like
function login (username, password, result) {
alert(username);
alert(password);
alert(result);
.... rest of function
}
That's not really a form, just an attribute snippet. Install Firebug add-on for Firefox (https://addons.mozilla.org/en-US/firefox/addon/1843/) and eliminate the guesswork by debugging the javascript. You can set a breakpoint in your login() function and see if everything is ok there or if at least if it gets called.

Categories

Resources