Develop Reference

How to pass value from link to pop up?

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);

click on a link using jQuery on page load

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

Can't get dynamically created modal to close on click | opens with .parents()

I have a module that was built using a Handlebars.js template, I orignally had it opening and closing perfectly, but the information wasn't updated, this can be seen here.
Now I have it so it updates the info, but the toggleClass won't fire when clicking either the 'x' or .overlay. This can be seen here.
Here is my jQuery functions to activate the modal.
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal').toggleClass('modal--show');
});
How can I make it so this modal will both Open and Close, as well as display the correct information?
Some things I've tried...
replacing: $(e.target) with $(this)

The problem with your code is that you are trying to toggle class of all .modal divs. But you need to toggle the class of only .modal.modal--show.
Also in case of overlay, you need to find the parent div not the sibling div. So use .closest() in place of .prev()
So if you modify your code as
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal.modal--show').toggleClass('modal--show');
});

Jquery click function not working for the button inside popover

I am trying to alert an message when clicked on button with id tagit. but the whole form is appearing in the bootstrap popover. i also added the jquery for alerting message,but its not showing any alert dialog boxes,but when i call the same thing in javascript it is showing the alert. but i need it to be in jquery. how can i do this?
var htmlcont ='<table class="pop-table"><tr><td><button class="btn btn-warning" id="tagit">FILTER</button></td></tr></table>';
$('[data-toggle="popover"]').popover({content: htmlcont, html: true});
$("#tagit").click(function(){
alert("hello this is working");
});

You need to use event delegation, like so
$(document).on('click', "#tagit", function() {
console.log("hello this is working");
});

Event delegation for dynamic created DOM elements. Try to use Immediate parent selector to traverse easily and quickly
$(document).on('click', '#tagit', function() {
}):

A way to pass variables (record ids) to jQuery event listeners?

Suppose I generate a list of records on my web page via PHP, and suppose each has a link beside it. And let's say that a modal window pops up when I click the link, and an edit form then shows in the modal.
I could easily make this happen like this:
Edit
But I'd prefer to use a jQuery event listener:
<a class="edit" href="#">edit</a>
$('.edit').click(function(event) {
showEditModal(recordId);
});
As you can see, using an event listener, I do not have a way of knowing which record the user wants to edit via the modal.
How can I allow the user to specify which record to edit while still using an event listener for the edit links?

If using jQuery >= 1.4.3, you can specify a "data-id" attribute (HTML5! woohoo) on the link and grab it using jQuery's data() method:
<script>
$(function() {
$('a.edit').click(function() {
alert( $(this).data('id') );
});
});
</script>
edit
And here's a demo on jsFiddle.

Put the ID in an attribute of the element.

<a class="edit" href="#12345">edit</a>
$('.edit').click(function(e) {
e.preventDefault();
recordId = $(this).attr("href").substr(1);
showEditModal(recordId);
return false;
});