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.

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.

According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

Multiple functions in a JS file

I want to have multiple functions to my JS file. Just not sure how to do that, since I'm really inexperienced with JavaScript. Here's what I have.
$(function(){
$('.incentives').hide();
$('.incentives-click').on("click", function(){
$('.incentives').fadeToggle();
});
$('.incentivesB').hide();
$('.incentivesB-click').on("click", function(){
$('.incentivesB').fadeToggle();
});
})();
I'm trying to add a bit that will make an image change when I hover over it.
$(function onHover(){
$(".button").attr('src', 'images/donate2.png');
)}
$(function offHover(){
$(".button").attr('src', 'images/donate1.png');
)}
BONUS
Also trying to get the image (.incentives-click) to toggle when clicked as well. I have an idea about how to go about this, but will appreciate if anyone wanted to help with this as well.
Thanks.

$(function(){
$('.button').hover(function(){
$(this).attr('src', 'images/donate2.png')
}, function(){
$(this). attr('src', 'images/donate1.png');
});
$('.button').on('click',function(){
$(this).toggle(function(){
#change_image1
}, function(){
#change_image2
});
});
});

I wrote a jQuery plugin which does something similar to what you need. You should be able to modify it to suit your needs with minimal effort.
You could also start with one of the jQuery plugin boilerplates such as:
jQuery Boilerplate.com
jQuery plugin boilerplate
My CollapsiblePanel plugin on Github

jquery "if" something and "else" something

I am just curious how would anyone make this. I am trying to figure out with lack of knowledge and of course I cannot make it.
So it would be something like...
If in jquery there is declared onClick function something like "firstGateway" and "secondGateway" how can I add what if there is first and what if its second.
I can't even explain well.
But let me try.
<a onClick="firstGateway">YES FIRST!</a>
That would be html piece and jquery would need to run following:
<script type="text/javascript" src="http://fileice.net/gateway/mygate.php?id=492b542f45684b42"></script>
onClick=startGateway('123456');
and if it would be in html like this:
<a onClick="secondGateway">YES SECOND!</a>
Then jquery would run following:
<script type="text/javascript" src="http://fileice.net/gateway/mygate.php?id=4465766c4278366467523838"></script>
onClick=startGateway('654321');
Hope you understand me. I will still try to make it work but I do not think I will be able to succeed.

$('a').click(function(e){
if (e.target.innerHTML == "something")
//fooo
else
// Bar
});
You can check anything you want inside the callback. e.target is the anchor that was clicked.
if (e.target.id == "someId")
if ($(e.target).hasClass('fooClass'))

With your current code, if someone clicks on the link nothing happens. Let's fix that first of all:
This:
<a onClick="firstGateway">YES FIRST!</a>
Should be this:
<a onClick="firstGateway()">YES FIRST!</a>
If you want to execute the function firstGateway() whenever the user clicks that link. However, this is still not the best way and I'm going to show you a better way below. (Note that this better way is also needed for my final solution).
Now we turn this into:
<a id='gateway1'>YES FIRST!</a>
No longer do we define the event in the HTML, instead we do so in our javascript using jQuery:
$(document).ready(function ()
{
$('a#gateway1').click = firstGateway; // Do note: this time around there are
// no brackets
}
Using this, you can now do several things. First, you could do this:
$('a#gateway1').click();
It simulates a click on the link, which I believe does the thing you wanted to do.
However, in order to write your code, you have made sure that you knew what function you were connecting to it in your javascript, so you might not even need such a solution anymore as you should be able to do this:
$(document).ready(function ()
{
$('a#gateway1').click = firstGateway; // Do note: this time around there are
// no brackets
firstGateway();
}

jQuery - Click on X, grab the NAME, then use that to show a related element

Here's what's happening.
My page loads. Then jQuery loads a feed which is injected into a contentCol div...
in that feed is:
Comment
There is also:
<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....
For some reason this is not working:
$(".commentWrite").live("click",function(){
cmt2open = $(this).attr('name');
$("#" + cmt2open).show();
return false;
});
Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....
thanks

on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...
another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.
as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.

Following from your comment to this answer
Can you try the following instead of show()?
$("#" + cmt2open).attr('display', 'block');

Can you place your javascript inside;
$(document).ready(function(){
//your code here
});
Not sure this will fix it but it's good practice I find.
Also have you alerted out your variables to see what you get?
What is the error you are getting if any?
Have you tried putting an alert at the top of the function to see if the click event works?
edit
let me know if the above does not fix it and I'll remove this answer to clear out the noise