We Keep Coding

How to execute js code again whenever a class name change?

Sorry for my editting format in advance cos it's been a long time since I asked a question. I will try my best to follow all the rules.
So I have this list which works like an image carousel:
<div class="carousel">
<ul>
<li class="past"><img src="img1.png"/></li>
<li class="past"><img src="img2.png"/></li>
<li class="current"><img src="img3.png"/></li>
<li class="future"><img src="img4.png"/></li>
<li class="future"><img src="img5.png"/></li>
</ul>
</div>
Whenever I click on an image, the clicked item's class name will change to "current" and I will translateX <ul> to make "current" <li> look "centered". All of these are in "carousel" <div>.
However I have another div which has a background of an empty-screen iPhone mockup:
<div class = "iphone_screen">
<div>
<img class="display" src="blank_screen.png"/>
</div>
</div>
and I want to do this to the "iPhone" <div>:
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
But this jQuery will only be executed once when I load the page.
So how do I execute my jQuery code again whenever I lick one of the <li> items and make the class name current change?
Update: Thank you all for the replies! I feel so stupid......I don't know why I ask this question.........I added a click function before and it didn't work.Then I started to look for alternatives. Now when I think about it, the selector must be wrong.

Since the event that drives everything comes from a click on the li you could run on a click for any li's (inside a ul) inside the carousel classed div.
$(".carousel > ul > li").click(function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});

put your code in a function.
$(".carousel li").on("click" ,function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});

$(document).on('click') event fires without clicking. using e.stopPropagation() doesn't seem to work

I am using jQuery to set and receive a cookie. If the cookie is set, show some HTML code to the user specific to the cookie set next time the page is loaded. If you click a vertical nav on the page, this will set the cookie to a new value to pull up different HTML next time the page is loaded.
The problem:
The click handler is executing the code inside of it when the page is loaded, which sets the cookie to an incorrect value. I looked into bubbling and preventing it, and using the stopPropagation() method is not working. All of the js is contained within $(document).ready()
The javascript:
if ( $('#courseTab').length ) {
$('#courseTab li').on('click', function(event) {
var cookieValue = $(this).find('a').attr('id');
setCookie("current_flex_tab", cookieValue, 30);
console.log("INSIDE CLICK EVENT " + getCookie("current_flex_tab"));
event.stopPropagation();
});
if ( getCookie("current_flex_tab") ) {
console.log( "OUTSIDE OF CLICK EVENT " + getCookie("current_flex_tab") );
var currentFlexTab = getCookie("current_flex_tab");
var currentFlexTabId = "#" + currentFlexTab;
// Prepares and sends ajax request for current flex study tab
var params = {"view" : $(currentFlexTabId).attr('href').substring(1)}
ajaxHandler.requestData( $(currentFlexTabId).attr('value') , params, "POST", currentFlexTab);
}
}
Screenshot of Console Output:
!image of console output
The HTML:
<div class="col-xs-2 visible-md visible-lg" id="courseTab">
<h6 class="text-muted">FLEX STUDY</h6>
<ul class="nav nav-pills nav-stacked">
<li>
<a class="data" id="subject_outline_tasks" data-toggle="tab" href="#subject_outline" value="course.getTaskData">Outlines
<input type="hidden" name="view" value="subject_outline">
</a>
</li>
<li>
<a class="data" id="video_tasks" data-toggle="tab" href="#video" value="course.getTaskData">Lectures
<input type="hidden" name="view" value="video">
</a>
</li>
<li>
<a class="data" id="essay_tasks" data-toggle="tab" href="#essay" value="course.getTaskData">Essay PQ
<input type="hidden" name="view" value="essay">
</a>
</li>
</ul>
</div>
Can someone help me figure out why the click event is firing when the page is loaded? I have also opted not to include the setCookie plugin as it has been working 100% ok throughout the rest of the site. If there is a need, I can definitely add it to the post. Thank you

When I've run into issue with attaching event handlers, I've resolved the issue by using the on() method to attach click handlers instead of jQuery's "shortcut" methods.
Try using this syntax.
$(document).on('click', '.mySelector', function(e) {
e.preventDefault()
// do stuff
}

how to add this class using .append()

I have the following html code:
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
</ul>
</nav>
I need to add the following code before the </ul> tag:
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
However, to do so, I have to use jquery's append(). But I don't know the correct way to add the script type="text/javascript", src="https://app.ecwid.com/script.js?4549118"></script> and <script type="text/javascript">xMinicart("style=","layout=Mini"); </script> inside the append().
Thanks!
EDIT 1:
So you can see what I'm trying to do:
what I need is the following http://jsfiddle.net/u3NKD/5/ The results are two links. However, the second link (the one which says "sacola de compras), must be done with append(), not html. That's what I'm trying to do
EDIT 2:
I tried the code in this Jsfiddle http://jsfiddle.net/u3NKD/7/ and it works perfectly in Jsfiddle, but it does not work in my Squarespace website.
The code in my website is the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
window.onload=function(){
$('nav ul').append('<li id="hello"></li>');
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
}
</script>
Any idea why it doesn't work in squarespace?
Thanks!

Have you tried using something like
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini");
});
to load the script and then activate the xMinicart object afterwards? I can't really understand why you're trying to do this on the fly without more context so that's the best suggestion I can offer.
https://api.jquery.com/jQuery.getScript/ (Load a JavaScript file from the server using a GET HTTP request, then execute it.)

If you really need to place it into that particular spot, then Try this: create a separate html file in the same directory, call it something like myli.html,
then you place this into it:
<ul id="myli">
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
</ul>
Then in your original page where you want this appended you do this, you have to create a dummy container like this
$('<div/>', {id:'dummycont', css: {display: 'none'}}).appendTo('body');
then
$('#dummycont').load('myli.html #myli, function(){
var li = $(this).find('#myli').html();
$('nav ul').prepend(li);
});
So basically this load event will load that particular #myli in the myli.html into a temp dummy container. Then you grab grab that content and prepend it to the target ul.
Let me know if that works for you. I havent tested it yet.

What you are doing is that you are just appending the script as a Text or innerText in the HTML DOM structure.
Call the Js using the getScript or Ajax call. (Ajax call with return type script is a getScript)
And in its return function Call the xMinicart function.
In you Dom just Append a 'li' with a specific id and in the getScript success function pass the id to xMinicart function/
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
<li id="hello"></li>
</ul>
</nav>
Your Js call should be
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
This will load the cart on the page.
Check the Jsfiddle here http://jsfiddle.net/u3NKD/6/

write html when a href is clicked

In an unordered list i have some a's with some href's. When clicked I want some html from an external file written. I cannot use any server side languages since it only gonna be running localy.
The structure of my file is:
<body>
<ul>
<li><a href="#">item1</li>
<li><a href="#">item2</li>
<li><a href="#">item3</li>
<li><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
Thanks in advance

Since it looks like you're trying to load a script, there's a better way to do that, by using jQuery.getScript():
$('#triangle').click(function() {
$.getScript("js/triangle.js");
});
Also, as arieljuod points out, you haven't actually loaded jQuery in your HTML file. You'll need to do that to use it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
(Or pick your favorite jQuery version and CDN; this is one of many.)

You don't want document.write().
You probably want this instead, depending on where you want the new HTML to go:
$('head').append('<script src="js/square.js"></script>');

You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.
Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a
Pasting the content of the code editor here:
<body>
<ul>
<li id="item1" class="item"><a href="#">item1</li>
<li id="item3" class="item"><a href="#">item2</li>
<li id="item4" class="item"><a href="#">item3</li>
<li id="item5" class="item"><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
//JS
//convert some file content to html
var genHtmlContent = function(content){
//do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
return content.htmlContent;
}
//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
var selectedId = event.target.id;
var url = "http://www.mysite.com/" + selectedId + ".json";
$.get(url, function(content) {
var htmlContent = genHtmlContent(content);
$("#content").val(htmlContent);
})
})
//sample json file on server
//item1.json
{htmlContent: "<div>I am Item 1</div>"}

A quick and easy solution will be an iframe. Add as many iframes as you want, each having a different url. Give them a common class and hide them using CSS or jQuery. On clicking a link, prevent default and show the corresponding iframe, like;
<ul>
<li><a href="#" id="item1">item1</li>
</ul>
<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe>
</div>
and in your JavaScript, add this;
$('.iframes').hide();
$('#item1').click(function() {
event.preventDefault();
$('#iframe1').show();
});

Changing the div content with a link in an div which leads to an externa

I have a task to solve and I am quite new in js and stuff, so please help me out on this.
I've got this in php(I use php cause I need to use databases as well):
What I want is to put external html contents in the container without reloading the whole page. Lets call the external contents link1.html;link2.html...
When load the page I want the container with the content of link1.html whick is also available and can be recalled by clicking link1.
I tried jquery and stuff but it was not really work for me. I'd like to use external js or ajax or jquery or something like that.
Please help!!!
Thank you in advance for everyone!
<div id="links">
<ul>
<li id="link1">link1</li>
<li id="link2">link1</li>
<li id="link3">link1</li>
<li id="link4">link1</li>
</ul>
</div>
<div id="container"></div>

You can use load(), $.get() or $.ajax for loading stuff, an example:
<div id="links">
<ul>
<li id="link1"><a href='path'>link1</a></li>
...
</ul>
</div>
$('#links a').on('click', function(event) {
event.preventDefault();
$('#container').load(this.href);
});