I have a checkout page in my e-commerce with jquery validate, in firefox/chrome it works correctly but in internet explorer 8 to 10, I receive the following error:
"object doesn't support this property or method jquery validate"
I have tried older/newer version of validate and jquery, jquery 1.10, 2.0, in 2.0 it does work with IE9 and 10, but we need support to IE8 and jquery 2.0x doesn't support anymore. And yes, I am instantiating correctly the validate.js but simply doesn't work!
Locally it works when I refresh the page, but when I navigate to the link I receive the error, it's completely insane!
Here my code:
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery-1.7.1.min.js"></script>
<script src="https://www.moip.com.br/transparente/MoipWidget-v2.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.bgiframe-2.1.2.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.placeholder.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.swfobject.1-1-1.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.jqzoom-core.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.meio.mask.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.validate.1.8.1.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.validate.additional-methods.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jcarousellite_1.0.1.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.cycle.all.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.easing.1.3.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.lazyload.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.popupWindow.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/jquery/jquery.colorbox.min.js"></script>
<script src="http://192.168.0.24/client/public/template/site/default/javascript/tools/tools.js"></script>
<script>
$(window).load(function(){
$('#identificacao').validate({ // I receive the error in this line
rules: {
email:"required",
senha:"required"
},
messages: {
email:"Por favor, entre com seu e-mail.",
senha:"Insira sua senha."
}
});
This was my last try, I tried version 1.7 with validate 1.8 (that worked in another e-commerce), and already tried last version of both, still get the error, I have no clue what happens, anyone had the same error?
I'm using this plugin of validate:
http://jqueryvalidation.org/
Quote OP:
object doesn't support this property or method jquery validate
and
"Locally it works when I refresh the page, but when I navigate to the link I receive the error, it's completely insane!"
Yes it's insane... it's Internet Explorer and it doesn't work reliably with $(window).load(). What you describe about refreshing the page is a symptom of this common issue.
See: http://api.jquery.com/load-event/
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Try this instead...
$(document).ready(function() { // fires on DOM ready event
$('#identificacao').validate({
// your rules, options, etc.
});
});
See jQuery DOM ready event handler.
If you still need the $(window).load() event for some other reason, it's perfectly acceptable to place it inside of the DOM ready handler.
$(document).ready(function() { // <- fires when DOM is ready
$(window).load(function() { // <- supposed to fire when all assets have loaded
....
});
});
Related
I'm getting a warning message:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
when performing an asynchronous AJAX request that contains a script (that has local src), which is injected into HTML, using $.html() method. I've changed the given script to contain async="async", yet the warning message still remains.
I've started debugging the issue to discover that my appended <script> is handled via jquery AJAX call from jQuery.ajaxTransport (http://code.jquery.com/jquery-1.10.0.js, #8663), where async is set to false (that's probably where the issue comes from).
Now - what can I do about this?
The message appears in newest version of Chrome as well as Firefox.
While I cannot provide a test case on jsfiddle, here's a test case that displays the issue:
test.html
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: '/response.html',
success: function(response){
$(document.body).html(response);
}
})
});
</script>
</body>
</html>
response.html
<script type="text/javascript" src="/json.js" async="async"></script>
json.js
console.log('hi');
AJAX request is not necessary to trigger the warning - all is needed is inserting a <script>
test2.html
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script>
$(document).ready(function(){
$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');
});
</script>
</body>
</html>
It's worth noting that this has been fixed, per https://github.com/jquery/jquery/issues/2060
UPDATE: This has been fixed in jQuery 3.x. If you have no possibility to upgrade to any version above 3.0, you could use
following snippet BUT be aware that now you will lose sync behaviour of
script loading in the targeted content.
You could fix it, setting explicitly async option of xhr request to true:
$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
options.async = true;
});
Browsers now warn for the use of synchronous XHR. MDN says this was implemented recently:
Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Synchronous_request
Here's how the change got implemented in Firefox and Chromium:
https://bugzilla.mozilla.org/show_bug.cgi?id=969671
http://src.chromium.org/viewvc/blink?view=revision&revision=184788
As for Chrome people report this started happening somewhere around version 39. I'm not sure how to link a revision/changeset to a particular version of Chrome.
Yes, it happens when jQuery appends markup to the page including script tags that load external js files. You can reproduce it with something like this:
$('body').append('<script src="foo.js"></script>');
I guess jQuery will fix this in some future version. Until then we can either ignore it or use A. Wolff's suggestion above.
Even the latest jQuery has that line, so you have these options:
Change the source of jQuery yourself - but maybe there is a good reason for its usage
Live with the warning, please note that this option is deprecated and not obsolete.
Change your code, so it does not use this function
I think number 2 is the most sensible course of action in this case.
By the way if you haven't already tried, try this out: $.ajaxSetup({async:true});, but I don't think it will work.
I was plagued by this error message despite using async: true. It turns out the actual problem was using the success method. I changed this to done and warning is gone.
success: function(response) { ... }
replaced with:
done: function(response) { ... }
if you just need to load script dont do as bellow
$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');
Try this
var scriptEl = document.createElement('SCRIPT');
scriptEl.src = "/module/script/form?_t="+(new Date()).getTime();
//$('#holder').append(scriptEl) // <--- create warning
document.body.appendChild(scriptEl);
In my case this was caused by the flexie script which was part of the "CDNJS Selections" app offered by Cloudflare.
According to Cloudflare "This app is being deprecated in March 2015". I turned it off and the message disappeared instantly.
You can access the apps by visiting https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com
In my case if i append script tag like this :
var script = document.createElement('script');
script.src = 'url/test.js';
$('head').append($(script));
i get that warning but if i append script tag to head first then change src warning gone !
var script = document.createElement('script');
$('head').append($(script));
script.src = 'url/test.js';
works fine!!
im having a strange problem. i just did a fresh installation of Opencart on my server and for some reason none of the jquery functions work.. sliders, popups and even the add to cart button or even a simple alert box dont work (i created a button with the ID test)
$( "#test" ).click(function() {
alert( "clicked" );
});
Below is how the theme files are loaded
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="catalog/view/theme/theme2/js/bootstrap.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.formstyler.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.carouFredSel-6.2.0-packed.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.touchSwipe.min.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.cookie.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.minicolors.js"></script>
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<script src="catalog/view/theme/theme2/js/script.js"></script>
checked all the files and they are place correctly. no missing files. All are freshly uploaded.
i even changed to the default theme which hasnt been touched, but still same. when i even click on add to cart or any other button it doesnt work
i tried accessing the site with and without www , still it doesnt work
the main problem is it does not show any error though the console or firebug which makes it hard to debug. can someone tell me what might be causing this?
Button #test does not exist on page load, so .click() function does not recognize it.
Try using .on():
$(document).on('click', '#test', function() {
alert("clicked");
});
Can't comment yet on SO, but #LiveEn, I tested your link and it works on Chrome x64 v39, Win. 8.1.
Onclick Add-to-cart: Size: * Size required!
Onclick Size select: Dropwsdown menu
As usual, I want to alert users to unsaved changes when leaving a page. I have this test page:
<html>
<head>
<title>Testing</title>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/base.js"></script>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/edit.js"></script>
<script language="JavaScript1.1">window.onbeforeupload=moveAway</script>
</head>
<body onLoad="init()">
Google
</body>
</html>
The moveAway function is defined in "edit.js" like this:
function moveAway ()
return "foo";<br>
}
The event doesn't fire, or at least it just leaves the page silently (using IE8, Firefox 15, and Chrome 20). I've tried breakpointing the function in Firebug and it never gets to the breakpoint. I've tried it from the web server (an SSL server, the test version of which runs at 127.0.0.1:8443) and I've tried opening the file directly with the browser (which is why I used absolute URLs for the first two <script> tags). I've tried removing the "src=" attribute from the script tags.
On the other hand, this page has an example which does work (at least in Firefox):
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
There is also a very similar example at MSDN which also works:
http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
I really can't see the difference between what they do and what I'm doing. can anyone tell me why their code works and mine doesn't?
use jQuery bind function.. it works great for me..
see bellow
$(window).bind('beforeunload', function() {
return "Want to leave?";
});
onbeforeupload , really ? it should be onbeforeunload. Is that a spelling mistake, or is that how your actual code is ?
You have a syntax error, the function should be:
function moveAway () {
return "foo";
}
This is how I'm trying to hook into the mobileinit event:
$(document).bind("mobileinit", function() {
console.log("Mobile init");
});
But this doesn't work on Chrome (Latest version), Ripple v0.9.1 and on a BlackBerry bold 9790 running OS7.0.
Note: I also tried using .on() instead of .bind() but no luck. Both jQuery mobile versions (1.0.1 and 1.1.0) failed.
I've used this and it does work.
Is it possible something else is breaking the script or the mobileinit isn't being fired?
Does Chrome fire mobileinit?
I just found some code I used in jQuery Mobile 1.0 and we just upgraded to 1.1.0 and it works.
You're making sure to also include regular ol' jQuery, right?
jQueryMobile's docs do it, so I'm sure it works. Something else must be wrong. Sorry I'm not much help. Do you have any more info? Or try with a different device.
[edit] On that same self page, it says "Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:"
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- Note your script before jqm -->
<script src="jquery-mobile.js"></script>
Looks like the script order can matter.
Here is another simple example that works with me (for android and ios)
<script type="text/javascript" src="files/resources/lib/jquery/jquery-1.8.2.js"> </script>
<script type="text/javascript">
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
{
// your logic here
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
{
// your logic here
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
}
});
</script>
<script type="text/javascript" src="files/resources/lib/jquerymobile/1.3.2/jquery.mobile-1.3.2.js"></script>
include the main jquery file
bind mobileinit before jquery mobile
include jquery mobile js file
I have a website with a form that uses TinyMCE; independently, I use jQuery. When I load the form from staging server on Firefox 3 (MacOS X, Linux), TinyMCE doesn't finish loading. There is an error in Firefox console, saying that t.getBody() returned null. t.getBody(), as far as I understand from TinyMCE docs, is a function that returns document's body element to be inspected for some features. Problem doesn't occur when I use Safari, nor when I use Firefox with the same site running from localhost.
Original, failing JavaScript-related code looked like this:
<script type="text/javascript" src="http://static.alfa.foo.pl/json2.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.ui.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({ mode:"specific_textareas", editor_selector:"mce", theme:"simple", language:"pl" });
</script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.jeditable.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.tinymce.js"></script>
<script type="text/javascript" charset="utf-8" src="http://static.alfa.foo.pl/foo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* jQuery initialization */ });
</script>
I tried changing script loading order, moving tinyMCE.init() call to the <script/> tag containing $(document).ready() call—before, after, and inside this call. No result. When tinyMCE.init() was called from within $(document).ready() handler, the browser did hang on request—looks like it was too late to call the init function.
Then, after googling a bit about using TinyMCE together with jQuery, I changed tinyMCE.init() call to:
tinyMCE.init({ mode:"none", theme:"simple", language:"pl" });
and added following jQuery call to the $(document).ready() handler:
$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",true,this.id); });
Still the same error. But, and here's where things start to look like real voodoo, when I added alert(i); before the tinyMCE.execCommand() call, alerts were given, and TinyMCE textareas were initialized correctly. I figured this can be a matter of delay introduced by waiting for user dismissing the alert, so I introduced a second of delay by changing the call, still within the $(document).ready() handler, to following:
setTimeout('$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",true,this.id); });',1000);
With the timeout, TinyMCE textareas initialize correctly, but it's duct taping around the real problem. The problem looks like an evident race condition (especially when I consider that on the same browser, but when server is on localhost, problem doesn't occur). But isn't JavaScript execution single-threaded? Could anybody please enlighten me as to what's going on here, where is the actual problem, and what can I do to have it actually fixed?
The browser executes scripts in the order they're loaded, not written. Your immediate scripts -- tinyMCE.init(...) and $(document.ready(...)); -- can execute before the files finish loading.
So, the problem is probably network latency -- especially with 6 separate scripts (each requiring a different HTTP conversation between the browser and server). So, the browser is probably trying to execute tinyMCE.init() before tiny_mce.js has finished being parsed and tinyMCE is fully defined.
If don't have Firebug, get it. ;)
It has a Net tab that will show you how long it's taking all of your scripts to load.
While you may consider the setTimeout to be duct taping, it's actually a decent solution. Only problem I see is that it assumes 1 second will always fix. A fast connection and they could see the pause. A slow connection and it doesn't wait long enough -- you still get the error.
Alternatively, you might be able to use window.onload -- assuming jQuery isn't already using it. (Can anyone else verify?)
window.onload = function () {
tinyMCE.init(...);
$(document).ready(...);
};
Also, was that a direct copy?
<script type="text/javascript">
$(document).ready(function(){
/* jQuery initialization */ }
</script>
It's missing the ) ending ready:
<script type="text/javascript">
$(document).ready(function(){
/* jQuery initialization */ })
</script>
Missing punctuation can cause plenty of damage. The parser is just going to keep reading until it finds it -- messing up anything in between.
Since this is the first page which came in google when I asked myself the same question, this is what i found about this problem.
source
There's a callback function in tinyMCE which is fired when the component is loaded and ready. you can use it like this :
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed) {
console.log('Editor is loaded: ' + ed.id);
});
}
});
If you are using jquery.tinymce.js then you don't need tiny_mce.js because TinyMCE will try to load it with an ajax request. If you are finding that window.tinymce (or simply tinymce) is undefined then this means that the ajax is not yet complete (which might explain why using setTimeout worked for you). This is the typical order of events:
Load jquery.js with a script tag (or google load).
Load TinyMCE's jQuery plugin, jquery.tinymce.js, with a script tag.
Document ready event fires; this is where you call .tinymce(settings) on your textareas. E.g.
$('textarea').tinymce({ script_url: '/tiny_mce/tiny_mce.js' })
Load tiny_mce.js this step is done for you by TinyMCE's jQuery plugin, but it could happen after the document ready event fires.
Sometimes you might really need to access window.tinymce, here's the safest way to do it:
$(document).tinymce({
'script_url': '/tiny_mce/tiny_mce.js'
'setup': function() {
alert(tinymce);
}
});
TinyMCE will go so far as to create a tinymce.Editor object and execute the setup callback. None of the editor's events are triggered and the editor object created for the document is not added to tinymce.editors.
I also found that TinyMCE's ajax call was interfering with my .ajaxStop functions so I also used a setTimeout:
$(document).tinymce({
'script_url': '/tiny_mce/tiny_mce.js'
'setup': function() {
setTimeout(function () {
$(document).ajaxStart(function(e) {/* stuff /});
$(document).ajaxStop(function(e) {/ stuff */});
}, 0);
}
});