Javascript Not Working On Page? - javascript

I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?

In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.

In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.

just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...

Related

Twig (or Symfony?) doesn't run my jQuery script

I currently am trying to create a website using Symfony 4. The issue is that one of my pages is in need of a jQuery script to work, part of it is working but functions like these aren't called, why ?
Example of code not being called :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents(); //this is another external function that I don't
//manage to call, even when called in the
//executed part
});
});
I am sure it doesn't come from my javascript as I tested it "off-symfony".
Thanks in advance, Crikripex
Alright, so after hours trying to figure out what and where the issue is, I came to the conclusion (thanks to #fyrye) that there might be compatibility issues between jQuery and Symfony4 or Webpack Encore.
I then decided to "translate" my code from jQuery to Javascript without any library and it worked fine.
To summarize, I went from :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents();
});
});
to :
for(i=0;i<maxId;i++){
document.getElementById("contain_" + i).onclick = function(event){
event.preventDefault();
document.getElementsByClassName("focused")[0].classList.remove("active");
document.getElementsByClassName("focused")[0].classList.remove("focused");
document.getElementById(this.id).classList.add("active");
document.getElementById(this.id).classList.add("focused");
refresh_contents();
}
}
I know it doesn't look as fancy, it's not as easy to code as jQuery, but so far that's the only solution I found that actually works.
Thanks for your help everybody.

What version of jquery do i use for my script

I was looking to find out what version of jquery do i used based on the following script that my friend wrote for me, unfortunately he is on holiday so I can't get in touch with him.
I have added the following code within my body tag and then calling it below that:
$(document).ready(function() {
$('.top_cols_hide_arrow').click(function() {
$('.finishing_top_cols_hide').toggle("top");
});
$('.top_cols_hide_arrow').click(function(){
$(this).toggleClass('active');
});
});
and the HTML part:
<div class="finishing_top_cols_hide_arrow_mn">
<span class="finishing_top_cols_hide_arrow">open</span>
</div>
I am trying to run this on my localhost but whenever I click the arrow nothing happens and then I realised that I dont really have a script source for this to function and I'm not sure what I need to link to, in order to get this to work.
If somebody could please advise.
You can use this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
The code that your friend wrote for you is simple so most of Jquery versions will support it.

insertBefore - swap two divs

If you look at my website link to website, you will find an ID for the content (#content) and one for the sidebar (#sidebar).
(It's located in "#wrapper > #main > .avada-row > #content/#sidebar")
I have tried to switch order/place so #sidebar comes before #content. I tried with this code:
<script type="text/javascript">//<![CDATA[
$(function(){
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});//]]>
</script>
Here is a JSFiddle example (it works in JSFiddle but not on my website):
JSFiddle
I really hope someone can help me!
NOTE!:
This line of javascript works too in JSFiddle but not on my website:
$('#sidebar').insertBefore($('#content'));
I guess there is no need to use each function?
And sorry - I forgot to say that I know nothing about javascript programming. I just try my best with no luck I guess :/
Best Regards
I can't comment my own question, so I will do it here:
Karl-André - Yeah, I am aware of the error "Uncaught TypeError: undefined is not a function" but i don't know how to fix it.
Arjun - I tried that too but $ is being overriding and therefore is does not work :/
Zessx - Can you help me find out what is overriding $ ?
The code:
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Did not work when I insert it in head.
Thank you so much! I really appreciate it !!!!!!!!!!!!
Something is overriding the jQuery $ :
> $
undefined
> jQuery
function (a,b){return new n.fn.init(a,b)}
If you change your script by this one, you'll see it works :
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Now, we need to define what is overriding $.
As a workaround, you still can use this code in your <head>, as mentioned in jQuery doc (search for "Aliasing the jQuery namespace") :
jQuery(function($) {
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});
if you just want to add the content above the selected div just use
$('#sidebar').insertBefore('#content');
-Thanks.

jQuery No Conflict Wrapper Not Working

I'm getting the dreaded Uncaught TypeError: undefined is not a function error in WordPress. I'm pretty sure that I've properly enqueued my jQuery script (it's showing up properly in the footer), and I've used the following no conflict wrapper at the start of my code: jQuery(document).ready(function($) {.
I've tried replacing all $ variables with jQuery. I've also defined var $j = jQuery; and replaced all $ variables with $j.
There are other theme-generated jQuery scripts on the page that are working (embedded, not enqueued), so there might be potential conflicts, but I'm not sure how to debug that.
Any help appreciated. I can provide link to the site if that helps.
EDIT
I had this script working perfectly earlier from within the jQuery UI Widgets plugin, but that plugin seemed to be causing serious issues (crashed my site). So I disabled the plugin, and I haven't been able to get the script working since.
That doesn't look quite right. Try this
(function($) {
$(document).ready(function() {
console.log("dom is ready");
});
})(jQuery);
You could try this:
var j = jQuery.noConflict();
j(document).ready(function () {
...
//replacing all Dollar Signs with the j
});
That's what worked for me

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.

Categories

Resources