Develop Reference

How to add jQuery code after js snippet is fully loaded?

I'm having trouble adding click function to the button which is loaded with JS snippet, because when I try doing the function like this on document.ready
jQuery(document).ready(function( $ ){
$(".esis__heading").on('click', function(event){
console.log('123123');
})});
it fails because the element is not loaded and visible yet.
I was thinking maybe timeout is a solution but I started to think it's not a perfect solution.
If someone has any advice on how to deal with this it would help a lot.
This is the link to a page which has a snippet that loads after some time https://samsung.plutonium.rs/samsung/
Thanks in advance.

You solve this by delegating the click to a parent element, at worst this can be the document itself
$(document).ready(function( $ ){
$(document).on('click', ".esis__heading", function(event){
console.log('123123');
});
});

You can defer the load of the script using the defer attribute
Defer documentation (w3schools.com)
The only downside is that it works only on external scripts (script tags with src attribute).

Is it feasible to run inline jQuery script inside a WordPress page?

Is it not possible to run jQuery in the middle of a page (inline)?
I tried to run this code inside a custom WordPress template....
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery(".upb_row_bg").css("filter","blur(30px)");
});
</script>
However it seems to have no affect on the element in question. In fact if cannot even select the element -
console.log('jQuery(".upb_row_bg).length; shows 0.
If I put the same code right before the closing tag after the wordpress wp_footer() function, it works. If I place it before wp_footer, then it does not.
Any ideas? I have another script on another page where I was able to use a simple inline script that is generated by a wordpress filter...
<script>jQuery( "figure" ).replaceWith( "<div class=\”new-class\”>” + jQuery( "figure" ).html() + "</div>" );</script>
This works as expected even though with this snippet there is no event to trigger it, it just runs and replaced the preceding element. So inline scripts must work.
I am a bit confused.

Your syntax looks strange.
<script type="text/javascript">
$(document).ready(function() {
$('.upb_row_bg').css('filter', 'blur(30px)');
});
</script>
'figure' does not look like a valid selector, use a class or ID.
As far as what you're trying to accomplish with your second code snippet just do:
<script>$('#figure').addClass('new-class')</script>
Or, if you really need figure to be out of the question
<script>$('.figure').addClass('new-class'); $('.new-class').removeClass('figure')</script>

Conflict between pages in Jquery easy tabs, trying to solve with jquery noconflict

I have an easy tabs page,with three different pages(TAB1,TAB2,TAB3).
Tab.php
Tab1|Tab2|Tab3
//Tab1 has an slider plugin(with Jquery UI)
//Tab2 has an autocomplete for select list
The conflict come from because two function wants to use jquery variable.
Two pages contains jquery plugins but with only jquery version(jquery-1.11.1.min.js)
The tabs only works properly(elements showing,jquery methods correctly running) when only one tabs is enabled(just commenting the link).
I use the jquery no conlict to try to solve this problem(before that there was conflict between the main tab page and the invidual page):
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var s = $.noConflict();
</script>
So on the sub page(tab1) i use like:
s(document).ready(function(){.....}
I also try to define a second shortcut(first i try to use the same 's' there too) :
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var j = $.noConflict();
var s = $.noConflict();
</script>
to use this at the Tab2 page.It was not a solution for me.Diseable Tab1 and using 'j' also works good.
One more importent thing is the firts downloaded page shown correctly each time,so i know the conflict is becuse of the jquery variable(overwrite it or something like this).
I try to find a solution by my self but i couldn't.Please help me
Update1:
As i note before i made a lot of research before that:
Jquery tabs conflicting with revolution slider
This question is very similar for my problem,but the difference i have more tabs,more conflict so i thought if i use more shortcut it will solve the issue.
Update2:
It is more interfering between the plugins than conflict.
using
var s = $.noConflict(true);
totally throw awey the full page,even the tabs does not want to work
First the tab.php load,it is using the jquery global variable,
than if i click on Tab1 it is also wants to use the global variable,
After if i click on Tab2 also need jquery variable
So bumm the interfering is ready
Update3:
After a lot of research,i found the problem is not with the noconflict.
The Tab2(upload.php) page is correctly rendered when i full reload the page.
s(document).ready(function(s) {//without the ready it does not rendered even after F5
s("#modell").select2(); });

I believe that you are trying to load jQuery with a different variable name. I would suggest that you use:
$.noConflict();
jQuery( document ).ready(function( blah ) {
//You can now use blah as the jquery method (e.g. blah("#button").click();)
});
I've made an example here: http://jsfiddle.net/me66st8w/. You can find out more about this in the official documentation here: http://api.jquery.com/jquery.noconflict/.

My Javascript isn't working in Joomla 3, is something conflicting?

I have very siple javascript working in jsFiddle but for some reason when I add to Joomla 3 CMS it doesn't work. The content stays static and does not move. I am putting the html and js in a HTML Module with no WYSIWYG editor and even tried putting the js in external file and no dice. Any thoughts?
function ticker() {
$('#jsTicker li:first').slideUp(function() {
$(this).appendTo($('#jsTicker')).slideDown(1500);
});
}
setInterval(ticker, 6000);
fiddle: http://jsfiddle.net/KevinOrin/Zh3wU/
site: http://bit.ly/13GerYd

You wrote <script type="javascript"> instead of <script type="application/javascript">
EDIT
You've also forgot an extra }); in the end.

you can use jQuery no conflict as :
var jat = $.noConflict();
now replace $ in your code with jat

Running the provided code in a console on the example page shows it working, so I think you have a document ready issue.
You should run the function in a jQuery document ready statement. http://learn.jquery.com/using-jquery-core/document-ready/
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});

jQuery inside Media Wiki pages (not just in the Monobook.js or extensions)

I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?

If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.

I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.

Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.