I want to get the id name thanks to a href value that is set in a variable.
To do this, I want to:
get the attr('href') of a clicked element (that works).
put it in a variable (OK).
search this href in a every class called ".link" (not in #prev-ajax, #next-ajax id) (problem)
Get the parent id.
I tried this :
$('#prev-ajax,#next-ajax').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$(".link[href*= href ]:not('#prev-ajax,#next-ajax')");
var ajax = $(this).parents('.element').attr('id');
alert(ajax);
});
As you're using a JavaScript variable, you need to escape the quotes. Also, don't wrap items in the :not selector in quotes.
Try this:
$(".link[href*= '" + href + "']:not(#prev-ajax, #next-ajax)");
Edit: Looking at your fiddle, you're also not doing anything with that selector. See this:
$(".link[href*= '" + href + "']:not(#prev-ajax, #next-ajax)");
var ajax = $(this).parents('.element').attr('id');
It should be:
var link = $(".link[href*= '" + href + "']:not(#prev-ajax, #next-ajax)");
var ajax = link.parents('.element').attr('id');
Demo: http://fiddle.jshell.net/UKyT4/1/
Related
Trying to apply an anchor based on child and then create the ID for the anchor with same value. First half, the anchor, is working.
Applying this
$(".horizontal-tab-button a").each(function() {
var anchorid = $(this).attr('href', '#' + $(this).children('strong').html().replace(/ /g,"_").toLowerCase());
$(".horizontal-tab-button a strong").attr('id', anchorid);
});
To this
<li class="horizontal-tab-button">
<a href="#">
<strong>Application</strong>
</a>
</li>
Gives
<li class="horizontal-tab-button">
<a href="#application">
<strong id="[object Object]">Application</strong>
</a>
</li>
The error is [object Object], it should be <strong id="application">
.attr('id' + anchorid); doesn't give anything.
Live example https://jsfiddle.net/qyr0xk1e/1/
When you use .attr() to set an attribute it returns a jQuery object, not the attribute string. Just store the attribute in a variable and then use it to set the attributes.
$(".horizontal-tab-button a").each(function() {
var anchorid = $(this).children('strong').html().replace(/ /g,"_").toLowerCase();
$(this).attr('href', '#' + anchorid).find('strong').attr('id', anchorid);
});
This is because your variable is actually executing a method.
var anchorid = $(this).attr(...);
Try this instead:
var anchorid = $(this).children('strong').html().replace(/ /g, "_").toLowerCase();
$(".horizontal-tab-button a strong").attr('id', anchorid);
$(".horizontal-tab-button a strong").attr('href', '#' + anchorid);
// don't forget to actually reassign the href, since it has now been moved out of the variable
$(this).attr(...) doesn't return the value of the attribute. It returns jQuery.
So when you do this:
var anchorid = $(this).attr('href', '#' + $(this).children('strong').html().replace(/ /g,"_").toLowerCase());
anchorid is jQuery, not "application". Which you then set as the id on your strong element, hence the stringified object: [object Object]
I want to change the src of an image file. Tried the below using with the variable, but it actually doesnt change it. Where did I made a mistake on using variable ?
jquery
var p2begen = "416";
$("[id=i'" + p2begen + "']").attr("src", "check.png");
html
<img src="nocheck.png" id="i416" \>
To reference an id in jquery you need to add the #. See here in the jquery docs. It is important to note that ids must be unique, but you can use a class on as many elements as you like.
var p2begen = "416";
$("#i" + p2begen).attr("src", "check.png");
If you wish to use classes instead your code should look like this:
<img src="nocheck.png" class="i416" \>
var p2begen = "416";
$(".i" + p2begen).attr("src", "check.png");
add the # at the start.
var p2begen = "416";
$("#i" + p2begen).attr("src", "check.png");
if you want to stick with the attribute selector, use:-
var p2begen = "416";
$("[id='#i" + p2begen + "']").attr("src", "check.png");
by adding the # and moving the ' back 2 places.
The simplest way for doing that is to use selector for ids, and your selector will looks like this:
var p2begen = "416";
$('#i' + p2begen).attr("src", "check.png");
I have this html code
<div>
<div><input id="wpsl-search-input1"/></div>
<div><a id="wpsl-search-button1" href="#" target="_self">submit</a></div>
</div>
And this jquery
<script>
$('#wpsl-search-button1').click(function() {
var url = '/pages/location-search/?';
$('#wpsl-search-input1').each(function() {
url += 'zip=' + $(this).val() + "&";
});
window.location.replace(url);
});
</script>
But for some reason it doesn't work. Any help ?
Let me try to explain to you what you did and what you need to do to make your code work in the way you intended.
<script>
$('#wpsl-search-button1') // jQuery method to retrieve an element with the ID "wpsl-search-button1"
.click(function() { // Attach a "click" listener to the element
var url = '/pages/location-search/?'; // Declare a variable with the name "url" containing a string "/pages/location-search/?"
$('#wpsl-search-input1') // retrieving the element with the id "wpsl-search-input1"
.each(function() { // looping over all elements found by the id selector (ID's are unique, so the query above should always return one jQuery element. No need for a loop here)
url += 'zip=' + $(this).val() + "&"; // append a "zip" parameter with the value of the found element (this is refering to the current element of the iteration -> the input)
});
window.location.replace(url); // replace the current resource with the one in the "url" variable
});
</script>
If you just want to redirect to a url based by the input value use this code:
<script>
$('#wpsl-search-button1').click(function() { // you dont need the .each, because you are selecting by id
var inputURL = $('#wpsl-search-input1').val();
window.location.href = `/pages/location-search/?zip=${inputURL}`; // Redirecting to the passed url (also working relative to the current URL)
return false; // Cheap way to call the "event.preventDefault()" method
});
</script>
Try executing it after the DOM has loaded, like this:
<script>
$(function() {
$('#wpsl-search-button1').click(function() {
var url = '/pages/location-search/?';
$('wpsl-search-input1').each(function() {
url += 'zip=' + $(this).val() + "&";
});
window.location.replace(url);
});
});
</script>
When selecting an element by id, you need a pound sign:
$('#wpsl-search-input1')
I have a table in my page that contains many rows, each row has an image which has an <a href> this <a href> has two attributes class and data-delete-id, so I have a multiple <a href> that has the same attributes and the same value for class.
each <a href> has a different value for the data-delete-id attribute.
In my JavaScript I have this code :
<script>
$(function() {
$('.deleteButton').confirmOn('click', function(e, confirmed){
// get jquery object access to the button
var $thisButton = $(this);
// this gets that data directly from the HTML
var id = $thisButton.data('delete-id');
if(confirmed) {
alert("<?php echo site_url('users/deleteUser')?>" + '/' + id);
}
});
});
</script>
So when I click on some <a href> that function well be fired, and it gets the id value from the data-delete-id attribute.
The problem is that id value it's always the value for the first <a href> in my HTML code.
I only want to get the value for the data-delete-id attribute for the clicked <a href>.
How can I do that ?
I checked the code for confirmOn here and it does not seem to register with each item in a set of selected elements. This is a bug with the plugin, but a workaround would be to wrap the whole thing in an each.
$(function() {
$('.deleteButton').each(function() {
$(this).confirmOn('click', function(e, confirmed){
// get jquery object access to the button
var $thisButton = $(this);
// this gets that data directly from the HTML
var id = $thisButton.data('delete-id');
if(confirmed) {
alert("<?php echo site_url('users/deleteUser')?>" + '/' + id);
}
});
});
});
I need to assign an <a> tag to a textarea value, separated with a comma. I'm trying to insert email IDs I get from a response of an ajax request. How do I achieve this using JS?
I tried using:
$('reminder_email').value += "<a href='#' id='+id'>+email+</a>";
Assuming that 'reminder_email' is the id of the relevant textarea, and that the response is an array of emails:
var emailAddressesArray = ['emailAddress#host.tld', 'emailAddress2#otherHost.tld'];
$('#reminder_email').val(emailAddressesArray.join(', '));
JS Fiddle demo.
If, on the other hand, you're trying to create the HTML of an a element with a mailto protocol (for copying/pasting elsewhere):
var email = 'emailAddress#host.tld';
$('#reminder_email').val('' + email + '');
JS Fiddle demo.
Note that you can't create clickable links within a textarea, as they can't contain HTML (just text).
If, though, you have an object from which to create your value:
var email = [{
'address': 'emailAddress#host.tld',
'id': 'emailOne',
'text': 'UserNameOne'
}, {
'address': 'anotherAddress#host2.tld',
'id': 'emailTwo',
'text': 'UserNameTwo'
}];
$('#reminder_email').val(function(_, v){
for (var i = 0, len = email.length; i < len; i++){
v += '' + email[i].text + ', ';
}
return v.slice(0, v.length - 2);
});
JS Fiddle demo.
The reason your code:
$('reminder_email').value += '<a href='#' id='+id'>+email+</a>;
didn't work is twofold:
$('reminder_email') is a selector looking for reminder_email tags (which don't exist); assuming that it's an id you're looking for you'll need to use: $('#reminder_email') instead,
A jQuery object/collection has no .value property, instead use the val() method (without arguments to get the current value, or with an argument to set a new value).
hoping you have jquery imported, try this:
$('reminder_email').val("<a href='#' id='"+id+"'>" + email + "</a>");
are you appending it? why do you use += ?