Need to write selector to links in leaflet popup.
I'm try something like this, but it's not work:
L.marker([39.74, -104.99]).bindPopup("<a href='#' class='trigger-to-page'>test</a>").addTo(cities);
$( document ).ready(function() {
$('a[class=trigger-to-page]').click(function() {
console.log("123");
});
});
http://jsfiddle.net/x52j9da7/4/
Can anyone help?
You can only query elements in your popup's HTML content once the popup has opened. The content gets added to the DOM when the popup opens en removed again once it closes. How you want to solve this depends on what you're actually trying to do but there are multiple ways:
Use L.Map's popupopen event and directly get a reference to the popup's content once it opens:
map.on('popupopen', function (e) {
var link = e.popup._contentNode.firstChild;
});
Or don't create the link from a string content but create the actual element and store a reference to that, so you can use it when you need it:
var link = L.DomUtil.create('a');
link.href = '#';
link.textContent = 'Test';
L.marker([39.74, -104.99]).bindPopup(link).addTo(cities);
Related
I've been looking for a question like this but none of them answer my question.
Please forgive me as I sometimes lack the ability to explain myself.
I have a page in sub1.domain.com where all links are formatted as
<a href="/link?param=whatever">
and I'm using jQuery to change the base domain to sub2.domain.com before the /link part that's different to the host to all hrefs on the page. I found this snippet while researching the issue. This is the code:
$('a').each(function() {
$(this).attr("href", function(index, old) {
return old.replace("/link", "https://sub2.domain1.com/link");
});
});
And it works like a charm for static links but the thing is that the page is a search results page that dynamically loads new results even after the page has loaded.
How do I make it dynamic so that all links that are loaded by the search, are modified by this script automatically? In other words, how do I apply this script to links that appear after the page has loaded and new results are cominig in?
base href will not work in this instance as it somehow breaks the whole page.
Thank you.
You could actually bind this event to a click. So when clickinng the link it will run this function and change the link. This would then change any new link also as long as this is bound to a parent or the document for example below
$(document).on('click', 'a', function(e){
e.preventDefault();
var link = $(this).attr( 'href' );
link = link.replace("/link", "https://sub2.domain1.com/link");
window.location.href = link;
});
Welcome to SO. I'd advise you to create a custom event and trigger it on any search or any other action you need. This approach is going to provide you a good flexibility and readability.
const table = $('#table');
let counter = 1;
$('#btn').on('click', function() {
const row = $('<tr>');
const cell = $('<td>');
const link = $('<a>', {
href: '/linktest',
text: 'Test link ' + counter++
});
cell.append(link);
row.append(cell);
table.append(row);
table.trigger('table.updated'); //triggering custom event
});
table.on('table.updated', function() { //custom event handler
$('#table a').each(function() {
$(this).attr('href', '/whatever_you_want');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
<tr>
<td><a href='/link'>Test link</a></td>
</tr>
</table>
<button type='button' id='btn'>
Add row
</button>
I wonder why no one of the other answers mentions that jQuery allows us to target all element with the same querySelector such for example if you want to target all aHref Elements you can just add a space after the letter a just like $("a ")!
const newLink="https://www.mynewLink.com";
$("a ").attr("href", newLink);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="https://www.google.com">Google</a>
<br><br>
<a target="_blank" href="https://www.facebook.com">Facebook</a>
When the popup link is between the <script> tags it does not work.
if(data.userdata["money_back"] == 1){
chat_list += '<a data-popup-open="popup-90">Download</a>';
}
I am pushing the
When it is between the <body> tags it works fine
<body><a data-popup-open="popup-90">Download</a></body>
Does "data-popup-open" not work between <script> tags?
Here is a JSFiddle of basically what I'm trying to do:
http://www.jsfiddle.net/tkkpf9dp
Something like that?
var popup = '<a data-popup-open="popup-90">Download</a>';
document.body.innerHTML += popup;
I think the problem is with the event handling. The event that should open open the pop up window may not be triggering. This is because you are creating a dynamic DOM element. The event handling of dynamic elements works in a different way. If you are using jQuery you can need to use something like this
Just add a class 'popup' to the 'a' tag like this
<a class="popup" data-popup-open="popup-90">Download</a>
and in JavaScript
$('body').on('click','.popup',function() {
var popup = $(this).data('popup-open');
console.log(popup); // For this example you will get the output 'popup-90' in the console
// You can write the code to open the pop up here
});
I have a page with many links that execute certain actions on click. Example:
<a class="x" onclick="somefunction(does_something)" href="javascript:void(0)">x</a>
I want to use a javascript injection to click all of them on the page. So far, I tried:
javascript:document.getElementsByClassName("x")[0].click();
But that doesn't seem to work. What am I doing wrong?
If your JS is inline, you can simply call what you need right in the href...
<a href="javascript:functionName('parameter1','parameter1','parameter1')">
Click to execute JS</a>
...but not wise if the parameters aren't predefined by you. Definitely don't do this if your parameters take user input and update/execute against your database, but it does work.
First of all, I'd suggest using jQuery, it's a lot easier to understand. Next, you can't really 'click' links dynamically and run it's function. You need to simply run a function on all the links and use it's address.
window.open( $('.x').attr( 'href' ), '_blank' );
Iterating through all links and opening them inside a container...
jQuery
$('#some_link_container').find('a').each(function() {
var link = $(this); // This is the current link in the iteration
window.open( link.attr( 'href' ), '_blank' ); // Prepare for mass computer lag
});
HTML
<div id="some_link_container">
A link
A link
A link
A link
</div>
If you are trying to run a function onclick, it's best to use a event listener rather then onclick. Something like the following
Event Listener Demo
Here we listen to a click on any link inside our container, then we run a function.
$('#some_link_container').find('a').each(function() { // Each link inside our div container
var link = $(this); // The current link
link.on('click', function(e) { // When the link is clicked
e.preventDefault(); // Stop the link from forwarding to that page
goodbye( link.attr('href') ); // Run our function onclick
});
});
var goodbye = function(link) {
alert( 'Goodbye guest! Forwarding you to: ' + link );
window.open( link, '_self' );
}
this webpage is built for firefox, but it has to display a link which is to be opened in IE. So I am trying to use a code I found on net. but it is not working. what am I missing?
javascript code:
<script type="text/javascript">
$(document).ready(function(){
function myFunction()
{
alert("opening now....");
var localFile = Components.classes["#mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
var process = Components.classes["#mozilla.org/process/util;1"].createInstance(Components.interfaces.nsIProcess);
var url = content.document.location.href;
var args = ["-new-tab", url];
localFile.initWithPath("C:\\Program Files \(x86\)\\Internet Explorer\\iexplore.exe");
process.init(localFile);
process.run(false, args, args.length);
}
});
HTML Code:
<p>Click the link top open in IE</p>
open in IE
When I click on link, it opens the google page: in same window, in same borser, in same tab.Pl advice.
thank you.
myFunction is not defined in the global scope. Adding it to the dcoument ready callback guarantuees this.
You could move myFunction outside of the document ready callback. However:
In this case I would attach a click handler using jquery as follows
$(function() {
$("a").click(function() {
// do stuff
});
})
Note this selects all anchors and applies the same event handler. Ideally you would use a selector.
$("#myGoogleLink").click(function() {
})
Add the id myGoogleLink to your html anchor
I have a jQuery function that replaces thumbnails with the main image.
This is the code that I use for replacing the main image:
$(document).ready(function(){
$(".wheelFinishThumbs a").click(function() {
var mainImage = $(this).attr("href");
var mainTemp = mainImage.replace(/-mid/,'');
var mainTemp = mainTemp.replace(/png/,'jpg');
$("#main_view img").attr('src', mainImage );
$("#main_view a").attr('href',mainTemp);
return false;
});
I use a PHP function to download (save) images by changing their header values. This is the HTML code that I use to download images
Click to download
but since "image.jpg" has to be my dynamic variable some how I've got to call this argument in the jQuery image replacement function and replace "image.jpg" dynamically each time I change the main image. I want to replace image.jpg with var mainImage from my image swapping function.
My jQuery knowledge is really limited, so If somebody can help me to do it, would be great.
This should work, assuming you are using jQuery 1.7+
Assuming your a tag markup is like this after you dynamically set the href to new image
Download Image
JavasScript
$(function(){
$(document).on("click","#main_view",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href")+,'_self', 'download', 'status=0');
});
});
Note that this function will work only of a single a element because we are targeting binding the functionality to the element with id main_view. Since ID's should be unique in the DOM, If you want to have the functionality to many a tags, i would add a common class selector to the a tag like this
<a class="aDownloadble" href="urltoSomeImage2.jpg" id="main_view">Download Image2</a>
<a class="aDownloadble" href="urltoSomeImage4.jpg" id="main_view">Download Image4</a>
And Update my script like this
$(function(){
$(document).on("click",".aDownloadble",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href"),'_self', 'download', 'status=0');
});
});
jQuery on is nnot necessary. you can simply use the click event binding directly. But if you are loading the markup of those links via ajax / injecting to the DOM dynamically, you should use on or live.
$(document).ready(){
$("#main_view a").click(function() {
// Code to run when user clicks on link
});
});