Apply one click event handler to multiple elements - javascript

I'm trying to get my javascript to pop up a message under for each comment when its clicked.
I have 3 comment boxes, each has 1 "popup" button under it, and when the "popup" is clicked, it would alert a message ("Ouyeah!")
Only clicking the first "popup" link on the top alerts the message "Ouyeah!", and the message is alerted 3 times. Clicking on other 2 "popup" links has no action.
Code:
<div class="media">
<div class="media-body">
<p align="right">
<span>popup</span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span>popup</span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span>popup</span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
JS:
<script type="text/javascript">
$("#reply_open").parent().parent().parent().parent().children(".media-body").children("p").children("span").children("#reply_open").click(function(){
alert ("Ouyeah!");
</script>
Only clicking the first "popup" link on the top alerts the message "Ouyeah!", and the message is alerted 3 times. Clicking on other 2 "popup" links has no action.
How to fix this? Many thanks,

You cannot have duplicate IDs.
Using id="reply_open" thrice (more than once!) is wrong and makes your HTML invalid.
JSFIDDLE DEMO -> http://jsfiddle.net/LC9gg/4/
This may be what you want. Make the IDs as classes & write the below code.
$(".reply_open").click(function () {
alert("Ouyeah!");
});

First of all, your HTML is incorrect in a few ways:
Your id's must be unique
You didn't close your .media div tags.
You're using JavaScript for a empty href
Try this instead:
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
I removed the id's altogether, they're not necessary. The .media divs are properly closed, and the JavaScript was removed from the hrefs.
Then, instead of searching through the DOM like you're doing with chained .parent() calls, try this js:
<script>
$('.media .media-body a').click(function(){
alert("Ouyeah!");
});
</script>
This adds a event handler to each a, that should alert the desired text.
Working example

Related

Image Not Appearing in JQuery Script

I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.

How can I protect ckeditor change my source code?

I am making laravel cms system using ckeditor now.
However, ckeditor changes may source code, it means when I copy and paste html to ckeditor in Source code status, after that, I reopen html in Source code status, html is already changed.
Html is as follows;
<section class="page-link">
<div class="container">
<div class="page-link__box">
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<a href="#philosophy">
<h4 class="head-h4">aaaa</h4>
</a>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<a href="#greeting">
<h4 class="head-h4">bbbb</h4>
</a>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<a href="#aboutcompany">
<h4 class="head-h4">cccc</h4>
</a>
</div>
</div>
</div>
</div>
</section>
And, ckeditor changes it as follows;
<section class="page-link">
<div class="container">
<div class="page-link__box">
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<h4 class="head-h4">
aaaa
</h4>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<h4 class="head-h4">
bbbb
</h4>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<h4 class="head-h4">
cccc
</h4>
</div>
</div>
</div>
</div>
</section>
After all, <h4> tag and <a> tag positions are changed with each other;
Please tell me the reason why?
How can I protect ckeditor change my html.
You can not protect your code, CKEditor will always touch HTML, because it's wysiwyg.
But there's something you can do.
Add buttons with the functionality you need.
Disallow Advanced Content Filter:
config.allowedContent = true;
config.extraAllowedContent = 'a h4';
But I would not recommend to use CKEditor for complex HTML-code. It's intended for paragraphs and something simple. You can use Ace editor instead of CKEditor, when working with html and blade templates. And include simple text content, received from CKEditor, to the templates. I think, it's better way.

Adding div inside another div without separate scope

I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}

Want to show the video by jquery but click event doesn't work

I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.

Bootstrap 3 Collapse events not triggering

I am creating a menu for mobile devices and am trying to use Bootstrap 3's collapse feature.
I already have a collapse working on a different page, so I copied over the structure, gave the panel group a different id, and changed the 'data-parent's and 'panel-collapse' ids appropriately. However, this new accordion just does not work. The 'in' class does not get applied to the target .panel-collapse div, and the hrefs (ex: #navCollapse(x) ) are appearing in the address bar, instead of the normal functionality.
Here is the problematic code. (trimmed to 2 panels for brevity. Still not working as is)
<div class='panel-group' id='accordionNav' >
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse1"> <h3>About</h3></a>
</div>
<div class='panel-collapse collapse in' id='navCollapse1'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse2"><h3>Donors</h3></a>
</div>
<div class='panel-collapse collapse' id='navCollapse2'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
</div>

Categories