I am trying to pass a value to a popup window I have.
I am uploading a list of dealers with WP store locator plugin, each dealer has different email. So when clicking a button "Email dealer" I have a popup that should get a "data-attribute" value from the link.
So now I have Popup maker plugin that works on that link click. But I can't pass a value from the link.
Here's my js file for this click
jQuery(document).ready(function ($) {
console.log("Here's console output"); // I get this in console
$('.emailDealerBTN').click(function(){
console.log("Clicked button"); // Nothing in console
emailDealer=$(this).attr("data-emaildealer");
console.log(emailDealer); // Nothing in console
});
});
And here is a code from store locator plugin that forms that button-link:
$listing_template .= "\t\t\t" . '<div class="button-wrapper"><a href="#" class="button-red button emailDealerBTN" id="emailDealerBTN" data-emailDealer=<%= formatEmail( email ) %> >Email a dealer</a></div>' . "\r\n";
So I tried to have same track on clicked button outside the code of "dealer locator plugin":
jQuery(document).ready(function ($) {
console.log("Here's console output");
$('.emailDealerBTN').click(function(){
console.log("Clicked button");
emailDealer=$(this).attr("data-emaildealer");
console.log(emailDealer);
});
$('.locator-cta').click(function(){
console.log("Clicked Apply to become a dealer");
link=$(this).attr("href");
console.log(link);
});
});
Here's the result in console
I am not sure if the problem is with store locator plugin.
The JS file above is loaded before DOMContentLoaded. However, I was sure that "jQuery(document).ready(function ($) {" will give me an opportunity to check clicks after the document is ready. AND it works with the same button link outside the code of plugin.
Yes, I have checked other Q&A here on slack and other resources.
Thanks for your help!
May be the problem here is your click() event is called before the button is generated..
Use .on() jQuery method.
.on() allow to add events on dynamically loaded content.
Try This:-
$(document).on('click','.emailDealerBTN',function(){
console.log("Clicked button");
var emailDealer = $(this).data("emaildealer");
console.log(emailDealer);
});
better you use element id as a selector. Try like this.
$(document).ready(function(){
$('#emailDealerBTN').click(function(){
alert($(this).attr('data-emailDealer'))
});
});
Try using on event to make sure your script will still runs if the html element is added or modified dynamically. Its also a bad practice to define your variable globally.
( function($) {
$(document).ready( function() {
console.log('My script loaded')
});
$('body').on('click', '.emailDealerBTN', function() {
var emailDealer = $(this).data('emaildealer'); // or $(this).attr('data-emaildealer');
console.log('Clicked button');
console.log(emailDealer);
});
})(jQuery);
Related
I need help.
With bootstrap 3 I made a modal with little form to let administrators/users change the user's password.
I've tried to made the same with bootstrap 4, but I am not be able to execute javascript triggered from anchors or buttons that are inside a modal.
Can you help me??
Example that not working:
$('.classFromElement').on('click', function (e) {
e.preventDefault();
alert('hello world');
});
The modal is probably a dynamically added html element. So it is not part of the DOM yet. You have to go around (delegate the event) via "document" or "html, body" for new elements that are added after window load. I prefer to use "document" because I had times that even the html or body element wasn't even rendered yet + it has a better performance.
Best option and best performance
$(document).on('click','.classFromElement', function(e) {
e.preventDefault();
alert('hello world');
});
OR... Use 'body, html' (Why both? For browser support, they back each other up)
$('body, html').on('click','.classFromElement', function(e) {
e.preventDefault();
alert('hello world');
});
I used to try this and it worked well.
This is when you open the bs modal, then apply event to your button.
$('#myModal').on('show.bs.modal', function () {
$('.classFromElement').on('click', function (e) {
e.preventDefault();
alert('hello world');
});
})
I'm sorry,
I 've seen my error.
I've put the modals before the scripts.
This is the problem. Now is solved.
:(
I have a link with a script in that opens a view of products. I don't have access to the html, and I need to have this view open on default. Until the behavior is fixed the correct way, which will take long time unfortunaly, I want to automatically make the link click on pageload.
I tried with the script below first - but since the link itself triggers a pageload, this obviously just keeps firing over and over again.
So how do I do this with jquery or vaniall JS, is this even possible?
Script:
$(document).ready(function () {
$('.action')[0].click();
});
My link:
Toon alle
$(document).ready(function () {
$('.action:first').trigger("click");
});
to manually trigger an event u need to use trigger() ,click is to only assign a handler
$(document).ready(function () {
$('a.action').click(function(){
... handler code
});
$('a.action').trigger("click");
});
The click() method triggers the click event.
Syntax :
Trigger the click event for the selected elements:
$(selector).click();
http://www.w3schools.com/jquery/event_click.asp (example)
In your case :
$(document).ready(function() {
$('.action:first').click();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Toon alle
Edit :
If you don't want to trigger in a specific page. do like this.
$(document).ready(function () {
if (!location.href.indexOf("someurl") > -1)
$('.action:first').click();
});
Can you tell me why you add [0], if you need to add it for first element then use following code :-
$(document).ready(function () {
$('.action:first').trigger("click");
});
otherwise you can directly use these :-
$(document).ready(function () {
$('.action').trigger("click");
});
Change your link tag with following :-
Toon alle
I am new to jQuery and am making a few .click() functions for my website, but no matter what I try, I can't get them to work.
jquery:
$(document).ready(function(){
$("#underlay-img-container-btns-add").click(function(){$("#underlay-img-container-form-file").click();});
$("#underlay-img-container-btns-submit").click(function(){document.forms['underlay-img-container-form'].submit();$("#underlay-img-container-general_loader").css("display","inline-block");});
$("#underlay-img-container-form-file").change(function(){readURLImg(this);});
$("#underlay-gif-container-btns-add").click(function(){$("#underlay-gif-container-form-file").click();});
$("#underlay-gif-container-btns-submit").click(function(){document.forms['underlay-gif-container-form'].submit();$("#underlay-gif-container-general_loader").css("display","inline-block");});
$("#underlay-gif-container-form-file").change(function(){readURLImg(this);});
});
readURLImg (displays an image preview before submission. This is part of a file uploading script.):
function readURLImg(input){if(input.files&&input.files[0]){var reader=new FileReader();reader.onload=function(e){$("#underlay-img-container-preview").attr("style","background-image:url("+e.target.result+");color:#fafafa");}
reader.readAsDataURL(input.files[0]);}}
I am sure my ids are correct. I have been trying to find the answer for hours with no success.
i have checked your website
then I've clicked on button upload you picture > opened the terminal and test
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
and the results appears
So, your problem is to call the events when the popups are ready
to Understand the concept
close the popup and try the same code it will retrieve empty array '[]'
<div class="btn" id="green" >
<div class="icon-image"></div>
<span>Upload your picture</span>
</div>
and add
$('.btn#green').click(function() {
$('.overlay').html($('.overlay').html().replace(/!non_select_tag!/g, 'img'));
$('.overlay').html($('.overlay').html().replace(/!non_select_txt!/g, 'Picture'));
// add you events
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
$('.overlay').show();
})
this will work
try
$("#underlay-img-container-btns-add").on( 'click', function () { ... });
may not work because content is dynamically created.
try
$("#underlay-img-container-btns-add").bind( 'click', function () { ... });
To bind events to dynamically generated elements in DOM, you may use
$('document').on( 'click', '#selector', function () {
...
});
This binds event to the DOM rather than to the element directly, which may not exist all the time.
try
$("body").delegate("#underlay-img-container-btns-add",'click',function(){
....
});
I have a table with dynamically created rows. Each row has a link button that you click on to delete that row. This is the click function here:
$(".deleteButton").on('click', function(){
console.log("Delete Hit");
var successful = deleteEntry($(this).attr('id'));
if(successful == true){
$(this).parent().parent().remove();
}else{
alert("Delete Unsuccessful.");
}
});
Some of the buttons are created with one function when the page first loads. Those work, but this other function seems to create a button with the right classes for the event to fire. It creates a link like this.
<a class="deleteButton dButton" href="#">
while the one that works right creates a link like this,
<a href='#' class='deleteButton'>
I have checked in the inspector and it says that the button has the class deleteButton, which is required to fire the event, but it seems to be ignoring it entirely. The Delete Hit never shows in the console.This has really confused me for some time, and I'd appreciate the help anyone can give.
You need to use delegated events for elements that doesn't exist on DOM when you bind event handler
$(document).on('click', '.deleteButton', function(){...}
Where document can be any .deleteButton container that exists at handler bind time.
You can delegate your events.
$(document).on('click', '.deleteButton', function(e){
//do something
});
here is a similar post where I explain the differences between bind live and "on".
How Jquery/Javascript behave on dynamic content updation?
The existing buttons get their event handlers on page load, but the new button is added to the DOM afterwards. You would have to update your JavaScript code, like this:
$(document).on('click', '.deleteButton', function(){
console.log("Delete Hit");
var successful = deleteEntry($(this).attr('id'));
if(successful == true){
$(this).parent().parent().remove();
}else{
alert("Delete Unsuccessful.");
}
});
Find more info in the jQuery docs at http://api.jquery.com/on/#direct-and-delegated-events.
I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CSS, and scripts. When it comes to the actual pages that load when clicking on the tabs however, I can't seen to get preventDefault() to work with .on() on these newly created DOM elements.
I'm using jQuery BBQ with my tabs so I can't have "#"s being appended to the URL. This is caused when links within the tab panels are clicked.
I've been able to successfully use preventDefault() on DOM elements that are initially loaded, but not ones that are being fetched into the tabs widget via AJAX.
My function for a content toggler is...
$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
I'd like to combine the preventDefault() from this function into it.
// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
I've tried several ways using .on("click", function(work)), etc. I've used .on() in a separate function and also tried to combine it in the first function above. Does anyone know what I'm doing wrong? The code works on tab content that is static, just not content loaded via AJAX. Any help would be greatly appreciated. Can't seem to figure this out. Thanks in advance.
the part $(".showMoreOrLess").click just applies to already accessable links on your page
try to use event delegation (here the clicks are captured on an every time existing element and you just pass the selector it is watching for... as a nice side effect you save listeners
$(document).on("click", ".showMoreOrLess", function(event) {
event.preventDefault();
//here you can also do all sort of things
});
rather than document use a certain id from your page $("#myContainerId") (EDIT: of course the elements you are clicking on need to be inside of the element with the id)
$("body").on('click', ".showMoreOrLess", function(event) {
event.preventDefault();
var self = $(this);
if (self.hasClass('clicked')) {
self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
}else {
self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
}
});