I have a form index.asp
<div class="wrapper pop-up" id="pop_up" style="display:none;"></div>
<div class="log_in">
Login
</div>
Login.asp
<div class="authorize" id="authorizeID" >
<a href="#" id="authorize-closeBut" class="authorize-close">
<img src="img/icons/cross.png" />
</a>
<div id="response"> </div>
<div class="authorize-footer">
ForgotPassword
Registration
</div>
</div>
ForgotPassword.asp
<div class="authorize" id="passremainderID" >
<a href="#" id="passremainder-closeBut" class="authorize-close">
<img src="img/icons/cross.png" />
</a>
</div>
I have a javascript
$(".LogInBut").on('click', function(e) {
e.preventDefault();
$.get($(this).attr('href'), function(data) {
alert($('#pop_up').length);
if ($('#pop_up').length) {
$('#pop_up').html(data).show(function() {
$('.authorize-close').click(function(e){
e.preventDefault();
if ($('#pop_up').length) {
$('#pop_up').html("");
$('#pop_up').hide();
}
});
});
}
});
});
So if i insert this javascript into Index.asp page and click #LogIn, I got pop-up window with Login.asp and once alert($('#pop_up').length);, if i click on .authorize-close windows will close. If i click #LogIn again i got the same but alert($('#pop_up').length); appears twice and so incrementing each time i click #LogIn.
So how to prevent incrementing and show only once this alert?
Everytime you click the button.. you are creating a new event click for #pop_up
$('.authorize-close').click(function(e){
Its showing twice, because you created the event twice. you need to delete the old event, than create again.. change the line to:
$('.authorize-close').unbind('click').bind('click',function(e){
Related
/* action dropdown*/
jQuery(document).ready(function(){
jQuery(".action-toggler").click(function(ev){
jQuery(this).children(".action-dropdown").toggle();
ev.stopPropagation();
});
jQuery("body").click(function(){
jQuery(".action-dropdown").hide();
});
});
/* modle-popup*/
jQuery(document).ready(function(){
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
});
jQuery('.sitemodal .sitemodal-dialog').click(function($){
$.stopPropagation();
});
jQuery(".close-popup ,.sitemodal").click(function(){
jQuery("body").removeClass("sitemodal-open");
jQuery(".sitemodal").removeClass("in");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="msg-icon action-toggler" style="float:right;">
<img src="images/dots.png" ></img>
<ul class="action-dropdown">
<li>
<a class="popup-button" data-target="#delete-popup" >Delete</a>
<!-- siteModal content-->
<div class="sitemodal fade" id="reply-popup">
<div class="sitemodal-dialog">
<div class="sitemodal-content">
<div class="sitemodal-header">
<h4 class="sitemodal-title">Delete</h4>
</div>
<hr style="margin-top: 8px;margin-bottom:2px;">
<div class="sitemodal-body" style="padding: 16px 0;">
<h4 class="sitemodal-title" style="font-size: 16px;font-weight: 400;">Are you sure you want to delete this message?</h4>
<form enctype="multipart/form-data" method="Post" action="" name="" onsubmit="">
<hr style="margin-top: 16px;margin-bottom:2px;">
<div class="sitemodal-footer" style="display: flex;margin-bottom: -8px;">
//php code here
</div>
</form>
</div>
</div>
</div>
</div>
</li>
</ul>
</span>
I have a drop down menu which contains a "delete" option when clicked it shows a pop up window
the problem that i am having is that when the "delete" option is clicked nothing happens first time but when clicked second time the pop up shows up
tried to trigger drop down window from the "model-pop" but didn't work
trid to remove the pop-up window outside of the </ul> but didnt work
can you please give me a hint or i am getting wrong at the least
removed some unrelated code to be easier to read
I have an element like this
I want mylink2 to also be clicked whenever somebody clicks on mylink
To start I am trying to get the parent container on click like this
$("#mylink").click(function(){
parentcontainer = this.closest('.myelement');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
But now I am stuck trying to click mylink2 am I on the right track?
You can use closest to get the parent and then find second element and trigger click command but since you have ids maybe you can use them for selecting elements. Keep in mind that id's must be unique.
$("#mylink").click(function() {
const parent = $(this).closest('.myelement');
parent.find('#mylink2').trigger('click')
});
$("#mylink2").on('click', function() {
console.log('click link 2')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
you can trigger the jQuery first click to trigger the second one this way:
$("#mylink").click(function(){
$("#mylink2").click();
});
taking in cosider that #mylink2 has some kind of a click handler function
If your links have ids the easiest way would be to use these ids:
$('#mylink').on('click', function(event) {
console.log('my link click');
$('#mylink2').click();
});
$('#mylink2').on('click', function(event) {
console.log('my link2 click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
Try this:
$('#mylink, #mylink2').on('click', function(event){
console.log($("#mylink1").text());
console.log($("#mylink2").text());
});
It should be straightforward since you are using unique IDs for the two elements.
Triggering the second elements click event in the first elements handler.
$("#mylink").on("click", function(){
$("#mylink2").trigger("click");
});`
I created a button that changes text upon clicking. However, the action only works for the first button on the page. Any button further down in the code, that has the same action, doesn't work. How do I change the JS so that it allows for multiple firings of the event?
Thanks!
HTML:
<div class="addtocart">
<a href="#" class="add-to-cart">
<div class="pretext">
ADD TO CART
</div>
</a>
<div class="pretext done">
<div class="posttext"><i class="fas fa-check"></i> ADDED</div>
</div>
</div>
JS:
<script>
const button = document.querySelector(".addtocart");
const done = document.querySelector(".done");
console.log(button);
let added = false;
button.addEventListener("click", () => {
if (added) {
done.style.transform = "translate(-110%) skew(-40deg)";
added = false;
} else {
done.style.transform = "translate(0px)";
added = true;
}
});
</script>
I think what you want is to select all button elements. Using querySelectorAll.
This will return an array of DOM elements matching the query. Then you loop through and add the event listener to each.
What the above code does is, select the first instance of a DOM element with .addtocart, not every instance, then adds the event listener.
Here is example of working code. You need to use this keyword to get what you want.
<div class="addtocart">
<a href="#" class="add-to-cart" id="addToCardItem1" onclick="addToCart(this)">
<div class="pretext">
ADD TO CART
</div>
</a>
</div>
<div class="addtocart" id="addToCardItem1" onclick="addToCart(this)">
<a href="#" class="add-to-cart">
<div class="pretext">
ADD TO CART
</div>
</a>
</div>
<script>
function addToCart(elem) {
alert(elem.id);
}
</script>
I have a question, and I doubt it is possible. the question is as follows:
How can my onclick be executed without the anchor tag being activated?
The onclick will show the disclaimer message.
Sample code:
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...."/>
</div>
<div class="disclaimer-message">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span onclick="this.parentNode.querySelector('div.disclaimer-message').classList.toggle('disclaimer-show');">?</span>
</div>
</div>
</div>
</a>
Thanks in advance :)
I would write a dedicated function to handle your click.
<span onclick="clickHandler">...</span>
See my click handler below. If you want to prevent the default behavior of a javascript event, which in the case of a click event, you could use e.preventDefault() and e.stopPropagation().
function clickHandler(e) {
e.preventDefault()
e.stopPropagation()
}
This will prevent the browser from following it's default behavior which is to follow that link redirect. e.stopPropagation() will stop the event from bubbling up to its parent, which in this case is the anchor element.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="alert('hello');return false">try me</span>
</a>
Note that when using this approach you should always wrap your script in a try catch block because if your code throws an error the parent link will be clicked.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="try {alert('hello'); } catch(e) {}; return false">try me</span>
</a>
To prevent the anchor link being invoked on click event :
Assign the click listener on the highest parent possible (right after anchor tag)
Prevent the event bubbling up to the anchor by invoking its preventDefault method
var container = document.querySelector('#container');
container.addEventListener('click', function(event) {
event.preventDefault();
var msgBlock = container.querySelector('.disclaimer-message');
msgBlock.classList.toggle('disclaimer-show');
msgBlock.classList.toggle('hide');
});
a {
text-decoration: none;
}
.disclaimer-show {
color: red;
font-weight: bold;
}
.hide {
display: none;
}
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...." />
</div>
<div class="disclaimer-message hide">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span>?</span>
</div>
</div>
</div>
</a>
<a href="websiteurl.com">
<p>Sample text<p>
</a>
<span onclick="this.parentNode.querySelector('div.class-message').classList.toggle('class-show');">try me</span>
Thats the way you should do it as there is no point to hold span tag inside of anchor , "this.parentNode" targets anchor element ,so querySelector won't work unless u got ur div inside of anchor
This code is working and all, but both links are opening the same info, which is the info of link2 `POP2, . If i remove the second link, the first one opens without problem. What am i missing ?
HTML
$(document).ready(function(){
$('.open').click(function() {
$('.pop_background').fadeIn();
$('.pop_box').fadeIn();
return false;
});
$('.close').click(function() {
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
$('.pop_background').click(function(){
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="responsive1">
<div class="pop_background"></div>
<div class="pop_box">
<h1>POP1</h1>
<span class="close">×</span>
</div>
<div class="img">
<a class="open" href="#">
click to open pop
</a>
</div>
</div>
<div class="responsive1">
<div class="pop_background"></div>
<div class="pop_box">
<h1>POP2</h1>
<span class="close">×</span>
</div>
<div class="img">
<a class="open" href="#">
click to open pop2
</a>
</div>
</div>
The codes are all referencing the same object. You have to assign IDs to each.
Update: I have created a javascript function to accept the parameters which is the container id so you can call it once. Its at the bottom of this answer
HTML
<div id="pb1" class="pop_box">
<h1>POP1</h1>
<span class="close">×</span>
</div>
<div class="img">
<a id="openpb1" class="open" href="#">
click to open pop1
</a>
<div id="pb2" class="pop_box">
<h1>POP2</h1>
<span class="close">×</span>
</div>
<div class="img">
<a id="openpb2" class="open" href="#">
click to open pop2
</a>
</div>
</div>
JAVASCRIPT
Repeat the code for pop2
<script>
$(document).ready(function(){
$('#openpb1').click(function() {
$('#pb1').fadeIn();
$('.pop_box').fadeIn();
return false;
});
$('#pb1 .close').click(function() {
$('#pb1').fadeOut();
$('#pb1').fadeOut();
return false;
});
$('.pop_background').click(function(){
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
});
</script>
Using it as a function
<script>
function myPopup(container){
$(container).fadeIn();
$('.pop_box').fadeIn();
return false;
}
$('#openpb1').click(function() {
myPopup('#pb1');
});
$('#openpb2').click(function() {
myPopup('#pb2');
});
</script>
To me it looks like you have only written the JavaScript for the first pop-up? You are not telling the computer which pop-up it should open.