Develop Reference

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.

Code works fine in JSFiddle but not in my browser

I'm working on multiple dropdown menus to be used for ranking. I found this excellent code from stackoverflow:
How to prevent duplicate values in multiple dropdowns using jQuery
It works nicely on JSFiddle, but I can't seem to get the code to work offline in my Chrome or IE browser. Can someone help?
<script type="text/javascript">
$(document).ready(function() {
$(".go").change(function() {
var selVal = [];
$(".go").each(function() {
selVal.push(this.value);
});
$(this).siblings(".go").find("option").removeAttr("disabled").filter(function() {
var a = $(this).parent("select").val();
return (($.inArray(this.value, selVal) > -1) && (this.value != a))
}).attr("disabled", "disabled");
});
$(".go").eq(0).trigger('change');
});
</script>

It depends on what "doesn't work" means for you. :) Can you see any errors on your console? Can you see all the 5 selects? Did you copy correctly the codes? The JSFiddle code works perfectly for me with 2.1.4 jQuery.

jQuery script stops working with 1.7 - any ideas why?

I was running this script to highlight the active page in bold. I had to run jQuery 1.7 for Fancybox and now the scripts broken.
Any ideas and even better, solutions - would be much appreciated!! :)
<script type="text/javascript">
$(document).ready(function(){
var parts = window.location.pathname.split('/');
var page = parts[parts.length-1];
$('.statusBar a[href*=' + page + ']').addClass('activeBold');
});
</script>

This may not be the issue, but you should quote your attribute selectors.
$('.statusBar a[href*="' + page + '"]')

jQuery .click(function() not working in IE7

Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.
OUTLINE OF THE ISSUE:
I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.
HERE IS THE CODE:
Part 1 - this loads the slider gallery on page load on the first tab:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
$('#gallery1').nivoSlider();
return false;
});
});
</script>
THIS IS WHAT I'VE TRIED SO FAR:
I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:
$('#target').click(function() {
alert('Handler for .click() called.');
});
This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.
any help would greatly be appreciated.
D

Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
e.preventDefault();
$('#gallery1').nivoSlider();
});
});
</script>

I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?
EDIT:
From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?

The best solution I found was to simply load all the galleries on page load using the:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.
Thanks for everybody's help in this.
D

I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using
$('body').click(function() { ... });

jQuery masonry plugin - Have trouble getting the divs to stack properly in IE7

I have a problem with the Masonry plugin to jQuery.
If you take a look at this link: http://iloveinternet.org/kunder/omk/ and scrolls down to the brown field with a pink line on top. Can you see the div boxes there? They are supposed to be stacked next to eachother in rows of three with the masonry plugin. This works fine in most browsers except from IE7 in windows XP in parallels on my mac.
Does anyone know what I´m doing wrong? Is it bad html kode or is it something in the script?
By the why... if you could check if you experience the same problem in IE or not, it would be great to know.
Thank you :)

Your script is causing an error for me on line 36 in index.php where document.location.hash is an empty string.
Not sure that this will fix the column issue but better begin with a working page before trying to debug layout/css issues.
var destination = $( document.location.hash ).offset().top;
Try something like this:
var $el = $( document.location.hash );
var destination = 0;
if ( $el.length ) {
destination = $el.offset().top;
}
$("html:not(:animated),body:not(:animated)").scrollTop( destination );