Get attr(id) with a known href variable - javascript

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

Set id from variable for each item

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]

Using a variable in jquery selector

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

jquery post and redirect onclick

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

Get value from an attribute using JQuery

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

Assign html <a> tag to a textarea value

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 += ?

Categories

Resources