This question already has answers here:
jQuery match part of class with hasClass
(6 answers)
jQuery selector for id starts with specific text [duplicate]
(4 answers)
Closed 4 years ago.
Trying to get some help on some JavaScript we are trying to post accross multiple landing pages. We are sending values to hidden fields on a button click 'lp-pom-button-3'.
However, the ID changes depending on the page, but will always have the format 'lp-pom-button-' with the number potentially changing depending on the page. Is there a function similar to 'like' in SQL, or saying any button that starts with or contains 'lp-pom-button-" for this to be triggered on? Thanks for you help!
<script type="text/javascript">
document.getElementById('lp-pom-button-3').addEventListener(
'click', function(event) {
ga(function() {
var tracker = ga.getAll()[0];
var clientId = tracker.get('clientId');
document.getElementById('GACLIENTID').value = clientId;
var userId = tracker.get('userId');
document.getElementById('GAUSERID').value = userId;
});
});
You can use the css selector for attribute value contains.
[id*="lp-pom-button-"]
or attribute value starts with:
[id^="lp-pom-button-"]
In vanilla javascript you can access elements using css selector with querySelector or for getting a list of elements querySelectorAll.
Here is an example:
document.querySelector('[id^="lp-pom-button-"]');
And HERE is a list of all the browsers and browsers version that support this function.
Related
This question already has answers here:
jQuery Event : Detect changes to the html/text of a div
(13 answers)
Trigger for span text/html on changed
(6 answers)
Closed last year.
I really dont know how get the div tag in between value Which in this case is
F064
I have this Hmtl code..
<div class="product--price price--unit">
<span class="price--label label--purchase-unit">articlenumber:</span>
F064
</div>
I want to say if the F064 changes then alert what its changed to.
I want something like this in either JS or JQuery
var divTagVal = $("div.product--price");
$(divTagVal).on('change', function () {
alert(divTagVal);
});
So if F064 changes to F065 the it should alert "F065"
but this doesnt work, what am i doing wrong ?
This question already has answers here:
How can I get the data-id attribute?
(17 answers)
Closed 3 years ago.
Im trying to write a little filter script for a ajax-table and im trying to open a overlay when someone clicks on the element:
<div class="at-filter" data-filter-val="{some_value}" data-filter-type="{some_type}">
...
</div>
How do i access the data-filter-type and value via javascript/jquery? Cant find anything at all via google.
Something like this is what im looking for:
this.table.find( '.at-filter' ).each(
function(index, element) {
var type=$(element).data-filter-type();
var val=$(element).data-filter-val();
self.data.filter[type] = {};
$(element).bind('click', {self:self, val:val, type:type}, type.openContextMenu);
}
)
edit: Mistakes were made!
To get attrbiute value use jquery attr() or in plain JavaScript getAttribute
But
To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
Or
In plain JavaScript setAttribute
console.log($('.me').attr('data-attribute'));
console.log($('.me').attr('data-second-attr'));
$('.me').each(function() {
console.log(this.getAttribute('data-attribute'));
console.log(this.getAttribute('data-second-attr'));
this.setAttribute('data-second-attr', 'foo-bar');
console.log('after change', this.getAttribute('data-second-attr'));
})
$('.me').prop('data-attribute', 'baz')
console.log('after change', $('.me').prop('data-attribute'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="me" data-attribute="foo" data-second-attr="bar">yo</div>
You use attr:
var type = $(element).attr("data-filter-type");
You could also use data:
var type = $(element).data("filter-type"); // Read the note below, though
... but it isn't necessary or really appropriate if all you want to do is access the values of those attributes. Contrary to popular belief, data is not an accessor for data-* attributes. (It's both more and less than that.)
This question already has answers here:
How to put HTML in jQuery .text()
(6 answers)
Closed 5 years ago.
I am trying to grab text inside a page, and put it inside a div/span element using jQuery.
For example, grab <p>Did you know "LARC" is a Medical Term?</p> off a webpage and put it inside of a div like so: <p>Did you know <div class="LARC IS COOL">"LARC"</div> is a Medical Term?</p>
The reason I am asking is because I need to run a function on a specific word with a class but I don't have access to the html where that word is due to the fact it comes from an outside source and is loaded on the page.
This is what I currently have:
jQuery('.gfield_label').each(function() {
var text = jQuery(this).text();
jQuery(this).text(text.replace("LARC", "<div class='LARC IS COOL'>LARC</div>"));
});
But it just outputs this on the webpage:
Did you know <div title='THIS BETTER WORK'>LARC</div> is a medical term?
You will want to use the HTML function when replacing.
see: http://api.jquery.com/text/ and
http://api.jquery.com/html/
jQuery('.gfield_label').each(function() {
var text = jQuery(this).text();
jQuery(this).html(text.replace("LARC", "<div class='LARC IS COOL'>LARC</div>"));
});
Instead of using .text(), try using .html().
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
Here's what I am trying to do in (jquery,html):
The aim is to make it so that when I hit the switch (basic/advanced) a block of html is added to the existing html. Within this new block there will be another switch (less/more) which should added another block.
However I can't seem to (less/more) switch to work. In fact the function is not running at all.
The function that corresponds to the (basic/advanced) switch is:
var selectInvestment = "basic";
function expandInvestment(){
$("input[type=radio][name=expandInformation]").click(function(){
selectInvestment = $(this).val();
var huge = 'huge block of html code in here';
if(selectInvestment == "advanced"){
$('.investmentBlock').empty();
$('.investmentBlock').append(huge);
expandedExpenses();
} else if(selectInvestment == "basic"){
$('.investmentBlock').replaceWith("<...more html code...>");
}
});
}
And it's similar for the less/more switch.
Here is jsfiddle preview. http://jsfiddle.net/1g6uraht/1/
Because you're dynamically adding your new radio buttons, you'll need to use on
$("input[type=radio][name=expandedExpenses]").click(function(){
becomes
$("document").on('click', 'input[type=radio][name=expandedExpenses]', function(){
see jquery on
This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 8 years ago.
What is the best way to bind an event on multiple element .
I wrote this code to do that is there is any good way to do that.
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
I have two input box with first name and last name, i wont to display there first anme and last name into a another element
Give the elements a class and add the event to the class.
$('.theclassnamethatalltheelementsshare').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+""+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
maybe this works
$(document).ready(function(){
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur',function(){
var gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
});
Fiddle