I am using the following piece of jquery code for displaying a loading.gif when the user has clicked on a link/button on a page.
<div class="progress-indicator">
<img src="/myapplication/images/loading.gif" alt="" />
</div>
<script>
$j(window).bind(
$j.browser.opera ? 'unload' : 'beforeunload',
function(){
//display image container
$j('.progress-indicator').css( 'display', 'block' );
//set a little timeout and force re-displaying of the image
//this can work around IE behavior, that 'freezes'
//animations during a submit
setTimeout( function() {
$j('.progress-indicator > img').attr( 'src',
$j('.progress-indicator > img').attr('src')+'?reload' );
}, 50 );
} );
</script>
It was working great with 'jquery version 1.5.1', until I upgraded jquery to version 1.10.0. The code no longer works.
Can anyone please help me with it? Thanks a lot for all your help and suggestions.
.browser() was removed in jQuery 1.9
http://api.jquery.com/jQuery.browser/
You should use the jQuery Migrate plugin to check your scripts when upgrading.
http://jquery.com/upgrade-guide/1.9/#jquery-migrate-plugin
Here is an upgrade guide
1: http://jquery.com/upgrade-guide/1.9/ and migration plugin
Try looking for the problem
Related
I'm trying to use owl carousel in a wordpress ACF custom block.
owl carousel works if I don't put jQuery(document).ready in my script.
But if I have jQuery(document).ready, the console tells me "jQuery (...). OwlCarousel is not a function".
Then i don't know if there is link beetwen both but i have thumbnail gallery to click for launch slider on specific image and that code :
jQuery('.single_image_gallery').click(function(){
mySlide = parseInt(jQuery(this).attr('data-slide'));
jQuery(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
})
not working at all.
i know there is problem with jQuery migrate for wp 5.5 but I tried with the plugin "Enable jQuery Migrate Helper" and the result is the same....
Try doing this.. Sometimes plugins can interfere with jQuery
jQuery(function($) {
// then use it like this
$('.single_image_gallery').click(function(){
mySlide = parseInt($(this).attr('data-slide'));
$(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
});
});
This way you import $ locally and it should prevent it from interfering with other global scripts or plugins
I have this old code which is now not working with the new jQuery library. It works well with 1.7.2 but I'm using 3.2.1 now. Is there anything to change in the code so it would work with the new library?
<div class="last-screem-open" id="last-screem-open" onclick="$('#last-screem-open,#last-screem-text,#last-screem-open-button').animate({left: '-=60'}, 200, 'linear');$('#last-screem-wrapped').delay(300).animate({left: '+=250'}, 200, 'linear');">
<b class="last-screem-open-button" id="last-screem-open-button">▸</b><span id="last-screem-text">TExt</span>
</div>
(function($) {
$('.macro-post-poster img, .post-block-poster img').show().lazyload({
effect: 'fadeIn',
threshold: 200
});
$("img.lazy").lazyload({
container: $("#right")
});
})(jQuery);
You can use Jquery migrate, add it after your working jquery library (1.7.x) and it will highlight what you need to change to get your code to work in version 3.x.
Just check the console for the output.
I'm trying to make jQuery UI work, but it doesn't. Here's what happens.
I'm loading dependencies:
<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>
That's my main.js file:
$(function () {
$("input[type=submit]")
.button()
.click(function (event) {
event.preventDefault();
});
});
$(function () {
$("#circum").buttonset();
});
$(function () {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
When I run the code in Brackets jQuery UI is loaded but doesn't work, however, when I comment my main.js file out and then bring it back that's the error I get in the console and UI is suddenly working. It's extremely weird.
jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined
I've found this thread discussing the issue, but still wasn't able to fix it.
Github
Cheers.
What version is your jQuery UI? I had the same issue with jQuery UI 1.11.4 and jQuery 3.0.
After installing jQuery UI 1.12.0-rc.2, the problem was fixed.
Adding the jQuery 3 Migrate Plugin resolves this issue as noted here, updated UI will be coming out soon.
NOVEMBER 5, 2018 UPDATE
If using latest jQuery and jQuery UI , use latest jQuery migrate to prevent compatibility warnings/issues.
Turns out this is a compatibility between jQuery 3.x.x and jQueryUI prior to 1.12.0.
including below script resolved the issue for me.
https://code.jquery.com/jquery-migrate-3.0.0.min.js
After doing all of the updates and STILL having the problem, I just fixed it in the code:
Look for this:
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}
Enter this just before it:
if (!elem.getClientRects()) {
return { top: 0, left: 0 };
}
I updated our legacy site, from jquery 1.12 to jquery 3.5 and hit this same problem.
The site is using jquery-ui 1.10 but sadly updating to jquery-ui 1.12 broke other things so I couldnt use that option.
Running the production site with the migration plugin felt wrong so instead I looked how this problem was fixed in jquery-ui 1.12.
Patching jquery-ui 1.10 with the fix from jquery-ui github "Position: Guard against passing window to Offset" worked for me.
This is an old post, but if someone like me need to update legacy sites, maybe this information can be useful.
I had same issue with jquery-3.0.0. I have just included jquery-migrate.3.0.0 reference after jquery reference. Issue is resolved and its working fine now.
> npm remove jqueryui
> npm i -S jquery-ui-dist
This will download a version of JQuery UI which can be included directly with <script> tags.
I had the same problem when I was trying to get X and Y position of the mouse using " .pageX/.pageY " on a click event.
Try to change the source of the libraries in order to get the latest update of them, making sure that they are compatible.
Those links are now working and they could fix the issues.
I use sortable function to be able to sort some textareas (I want to be able to sort textarea and to color text inside those textarea.)
It is working fine when using 1.7.2 version of jQuery, but it is not working anymore when using jQuery 1.11.2
here my code in js.do (the code is with 1.7.2, but if you change 7 for 11 the sortable functionality wont be working anymore)
Here line 29,30,31 of my code
//LINES_ISSUE_START
$('.sortable').sortable({
cancel: '.textarea,.block_bouton_color'
});
//LINES_ISSUE_END
Any idea about how to fix it?
You have to change this
cancel: '.textarea,.block_bouton_color,',
to this
cancel: '.textarea,.block_bouton_color'
and include the jQuery migrate plugin.
OK now it is working
here the changement I made
1/ I use jquery_1.11.2 as I wanted (standard to user bootstrap)
2/ I switch for jquery_UI_1.11.4 (last version at the time I am writing)
3/ As recommanded by meskobalazs I modify the line cancel as follow without ","
cancel: '.textarea,.block_bouton_color'
4/ Finally I had to add
$(".sortable").sortable();
HERE THE CODE (BEFORE ANY MODIFICATION)
$(".sortable").delegate(".bouton_ordre_drag_and_drop","mouseover",function(){
$(".sortable").sortable("enable");
$(".sortable").sortable({
cancel: '.textarea,.block_bouton_color,',
});
});
HERE THE CODE (AFTER MODIFICATION)
$(".sortable").sortable();
$(".sortable").delegate(".bouton_ordre_drag_and_drop","mouseover",function(){
$(".sortable").sortable("enable");
$(".sortable").sortable({
cancel: '.textarea,.block_bouton_color'
});
});
I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.
I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.