How to select dynamically created ajax element - javascript

Quick question. I've got html code like that:
<li class='entry'>
<div class='entryContent'>
<p class='entryText'>Entry text></p>
<a href="#" class='entryReply'>Reply</a>
</div>
</li>
When I click on Reply a div with reply form is being appended to 'entry'.
So it looks like:
<li class='entry'>
<div class='entryContent'>
<p class='entryText'>Entry text></p>
<a href="#" class='entryReply'>Reply</a>
</div>
<div class='replyForm'>
//form stuff
</div>
</li>
Now what I want to do is to create user-script which will find that dynamic div.replyForm and append some stuff into it:
<li class='entry'>
<div class='entryContent'>
<p class='entryText'>Entry text></p>
<a href="#" class='entryReply'>Reply</a>
</div>
<div class='replyForm'>
//form stuff
//MyAppendedStuff
</div>
</li>
I've already tried
$("body").on("focus", ".replyForm", function(){
$(this).append('<span>Hello World!</span>');
});
but it didn't work.
Any ideas?

You are creating a focus listener for div.replyForm. You probably want to bind the listener to the form inputs, instead. Something like this:
$('body').on("focus", "div.replyForm input", function () {
$('div.replyForm').append('<span>Hello World!</span>');
});
Working Example (jsfiddle)

Related

How do I use '.replaceWith' to load data from another html page?

Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.
I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.

On click, find next element by class name

I have a mobile menu, and when the user clicks the span with the class of "open", the next footer-menu-accordion opens. However, it also opens when the user clicks on the anchor link "level-1" Men.
What I am trying to do right now, is when the user clicks Men I would like to use jquery to find the NEXT footer-menu-accordion and keep it as display:none (which is the parent div containing the level-2 anchor tags). I know I have to use jquery's next() or find() methods, but I'm not sure how to do it. Can anyone help me out?
function mobileMainNav() {
$('a.level-1.direct').click(function(e) {
window.location = $(this).attr('href');
});
}
mobileMainNav();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu" class=" footer-menu-accordion ">
<div class="dropdown-container ">
<a class="level-1 direct">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion ">
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
</div>
</div>
I wrote this so when I click on level-1, I am directed to the "mens" section of my website. This works fine, however when I clicik level-1 I do not want the next dropdown to open, which it currently does. So I know I need to add some more jquery into this function to do so, I'm just not sure how as I am new to jQuery. Thank you in advance!
I'm not sure if you want to get the nearest footer for your anchor tag with the class level-1 or not ... if so try this :
function mobileMainNav() {
$('a.level-1').click(function(e) {
var nearestFooter = $(this).parent().siblings('div.footer-menu-accordion');
console.log(nearestFooter[0]);
});
}
mobileMainNav();
<div id="mobile-menu" class="footer-menu-accordion">
<div class="dropdown-container">
<a class="level-1">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion">
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also you don't have element with the class (.direct)

How to show a specific div when a link is clicked and hide others?

I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</script>

How to make infinite flip out of the code below?

How to tweak the flip javascript in this link http://desandro.github.io/3dtransforms/docs/card-flip.html so that it will flip to the third content or won't referse flip to the first content
var init = function() {
var card = document.getElementById('card');
document.getElementById('flip').addEventListener( 'click', function(){
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
The contents of each element should be stored separately in the HTML, and retrieved when needed.
<div class="container">
<div class="card">
<div class="face face1"></div>
<div class="face face2"></div>
</div>
<ul class="store">
<li>
<div class="content content1">1</div>
</li>
<li>
<div class="content content2">2</div>
</li>
<li>
<div class="content content3">3</div>
</li>
<li>
<div class="content content4">4</div>
</li>
</ul>
</div>
Answer copied and edited from
If I understand your question correctly, you only want the click event to happen once. If that's the case, and you're alright using jQuery, the jQuery 'one' function should be what you're looking for.
$( "#flip" ).one( "click", function() {
card.toggleClassName('flipped');
});

Get Data attribute using delegation

This works great for me and I am able to get data-club-id:
<!-- this is an example -->
<a class="clubCode" href="" data-club-id= "1234">join with the code</a>
$("a.clubCode").on("click",function(e){
e.preventDefault();
var clubId = $(this).data('club-id');
alert(clubId)
});
but if I need to use delegation like here:
<a class="editReview" data-review-id="123" href="">Edit</a>
$(".eventFeedbackBottomContainer").on("click", "a.editReview", function(e){
e.preventDefault();
var reviewId = $(this).data('review-id');
alert(reviewId);
});
reviewId returns undefined.
<div class="eventFeedbackBottomContainer">
<div class="tabs">
<ul>
<li>Reviews</li>
<li>Hotels</li>
</ul>
</div>
<div class="rightFeedbackBottomContainer">
Add Review
</div>
<div id="panel1" class="panel">
<div class="feedbacksContainer">
<div class="show-reviews"></div><!-- a.editReview is inside each review loaded from a javascript file in this div-->
</div>
</div>
<div id="panel2" class="panel"/>
</div>
How can I do it?
Check this article on event delegation.
I only can think that your element of class 'editReview' wasnt a child of 'eventFeedbackBottomContainer'. Other than that seems to work as you wrote it.
Link to Jsfiddle
<div class="eventFeedbackBottomContainer">
...
<a class="editReview" data-review-id="123" href="">Edit</a>
<a class="editReview" data-review-id="456" href="">Edit</a>
</div>
try this way
$(".eventFeedbackBottomContainer").on("click", "a.editReview", function(e){
e.preventDefault();
var reviewId = $(this).attr('data-review-id'); //use .attr() for accessing attibutes
alert(reviewId);
});
LIVE DEMO for pages prior to html 5:
http://jsfiddle.net/dreamweiver/23XHj/7/
LIVE DEMO in html 5 pages:
http://jsfiddle.net/dreamweiver/23XHj/8/
Happy Coding :)
fixed it. the problem was that
<a class="editReview" data-review-id= "12345" href="">Edit</a>
was inside <div class="current-review"></div>. Everything worked as soon as I moved it outside
here the JSFiddle

Categories