Get value from an attribute using JQuery - javascript

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

Related

AJAX Targeting individual anchor elements

I have a PHP-generated table of items. Each row has a link that, when clicked, should expand the row with additional information.
I've tried using JQuery to get the data and return it, which works - but only for the first row. Every link in each row returns data into the first row only. This is because this row has a static ID, which is what I'm targeting.
I thought about trying to assign a dynamic ID when PHP generates each row by dropping a variable in there, but I'd then need to have JQuery return the id of the parent td element whenever the link is clicked so that it targets that specific row, but I don't know how to go about this.
AJAX Function
$(document).ready(function() {
$("a.test").click(function(event) {
$.post("includes/modal.php", { id: event.target.id }, function(response) {
var ticket = document.createElement("p");
ticket.innerText = response;
document.getElementById('myDiv').appendChild(ticket);
});
$(document).ready(function(){
$("button").click(function(){
$('p').hide();
});
});
});
});
PHP Generated rows and columns
echo "
<tr>
<td>$dateChange</td>
<td>$ticketSubject</td>
<td id='myDiv'>
<a class='test' type='button' href='#' id=$ticketID>
View Ticket
</a>
<button>Hide</button>
</td>
<td>$ticketState</td>
</tr>";
I would like the user to click the link on each row and have that row expand with the new data returned by the JQuery.
I can envision this working if the getElementById() part could somehow pull the appropriate column id, which would be dynamically assigned, like so:
<td id=$postID>
I don't know if this would be the best way to go about this, but it's my current thinking. I don't know of any JQuery method that targets each unique instance clicked.
Modify your markup as:
echo "
<tr>
<td>$dateChange</td>
<td>$ticketSubject</td>
<td>
<a class='test' type='button' href='includes/modal.php?id=$ticketID'>
View Ticket
</a>
<button>Hide</button>
</td>
<td>$ticketState</td>
</tr>";
Here, I add href attribute with the link to required page. Also I removed id='myDiv' as id must be unique on the page.
In javascript you just do a POST-request to this href:
$(document).ready(function() {
$("a.test").click(function(event) {
// $(this) gives you the clicked element as jQuery object
$.post($(this).attr('href'), function(response) {
// according to your markup you can do:
$(this).parent().append('<p>' + response + '</p>');
// Instead of these lines below
/*var ticket = document.createElement("p");
ticket.innerText = response;
document.getElementById('myDiv').appendChild(ticket);*/
});
// return false to prevent default action on `a` click
return false;
// I don't know what you expect when put `ready` into `ready`
/*$(document).ready(function(){*/
$("button").click(function(){
$('p').hide();
});
/*});*/
});
});
You need to add unique number in your div id say $ticketID
echo "
<tr>
<td>$dateChange</td>
<td>$ticketSubject</td>
<td id='myDiv$ticketID'>
<a class='test' type='button' href='#' id=$ticketID>
View Ticket
</a>
<button>Hide</button>
</td>
<td>$ticketState</td>
</tr>";
And in your JQuery
$(document).ready(function() {
$("a.test").click(function(event) {
$.post("includes/modal.php", { id: event.target.id }, function(response) {
var ticket = document.createElement("p");
ticket.innerText = response;
document.getElementById('myDiv'+event.target.id).appendChild(ticket);
});
$(document).ready(function(){
$("button").click(function(){
$('p').hide();
});
});
});
});
Hope it helps!

How to change the value in the input field while we click on dynamically created edit icons?

Here in the code there is ajax which assigning the values to the fields but there is the edit icon which is created dynamically it means that how many address you added in the database then number of times edit icon will be created. My need is that when I click on first button then it will alert its id value and when I clicked on the other one then it will alert its id value
Following is my code I tried:-
var full_url = document.URL; // Get current url
var url_array = full_url.split('=') // Split the string into an array with / as separator
var UserId = url_array[url_array.length-1]; // Get the last part of the array (-1)
$.ajax({
url:"url,
type: "GET",
dataType: 'json',
async: false,
data:{"UserId":UserId},
success: function(response){
if (response.response.total_record[0].status === "active") {
$('#email').html(response.response.total_record[0].email);
$('#name').html(response.response.total_record[0].first_name+" "+response.response.total_record[0].last_name);
$('#first').val(response.response.total_record[0].first_name);
$('#last').val(response.response.total_record[0].last_name);
$('#phone').val(response.response.total_record[0].phone_number);
$('#alternative').val(response.response.total_record[0].alternative_number);
$('#id').val(response.response.total_record[0]._id);
$('#status').val(response.response.total_record[0].status)
if (response.response.total_record[0].status === "active") {
$('#activate').hide();
}
if (response.response.total_record[0].status === "deactivate") { $('#activate').show();
$("#deactivate").hide();
}
$.each(response.response.total_record[0].address,function(i,item){
console.log(response.response.total_record[0].address[i])
$('#edit_id').val(response.response.total_record[0].address[i]._id)
$('.cards').append('<div class="location-list"><header class="header_title"><div class="location_heading"><h3>Location:</h3></div><div class="edit_icon"><a class="editByAnchor" id='+response.response.total_record[0].address[i]._id+' href="#" data-toggle="modal" data-target="#edit_address"><i class="fa fa-edit"></i></a></div></header><div id="dAddress" class="location-detial"><p><span id='+response.response.total_record[0].address[i]._id+'>'+response.response.total_record[0].address[i].address+'</span></p></div></div>');
});
}
}
});
Html
<input type="hidden" id = "edit_id" value= "">
Jquery for finding the clicked
$('.editByAnchor').change(function() {
alert("You just clicked checkbox with the name " + this.id)
});
Produces the output
<a class="editByAnchor" id="1" href="#" data-toggle="modal" data-target="#edit_address"><i class="fa fa-edit"></i></a>
/*more like this but id will be change base on the dynamically fields*/
The above output anchor tag having id attribute it will assigned dynamically as you see my code so how will I get the id attribute of each icon by clicking them.
For dynamically created element use on(). Also you have to use click event instead of change:
$('.editByAnchor').on('click', function() {
alert("You just clicked checkbox with the name " + this.id)
});
By taking the reference of this link I post a answer for this everything is alright I have to change my code by following
$(".editByAnchor").click(function(){
var id = this.id;
alert(id)
});

How to select an id through a class when you have multiple elements in the same page that have same class

I have this data Table in which I assigned the id of the rows of the table to a link, essentially having a unique id for each link. I also assigned a class to each link.
What i want to achieve is essentially when i click the button i can assign the value of the id to a textbox by selecting the id through the class.
This is the link that I assigned the class and id to. It is repeated throughout the data table for each item in the table. I run this link in a ajax method in a controller which is why there are pluses in the id as it is a string in the controller.
<a href='{0}' data-toggle='modal' data-target='#DivAppendToPartialView' id='"+item.mobileNumber+"' class='messageBtn'>
This is the function for assigning to the textbox
$(".messageBtn").click(function () {
var mobileNumberId = $(".messageBtn").attr("id");
$("#mobileTxtBox").val(mobileNumberId);
})
$(".messageBtn").click(function () {
var data = $(this).attr("id");
$("#mobileTxtBox").val(data);
})
Try with $(this), it selects the current 'clicked' button. if you use $('.messageBtn) to save in the var , you save all elements with that class.
$(".messageBtn").click(function () {
var mobileNumberId = $(".messageBtn").attr("id");
console.log(mobileNumberId);
$("#mobileTxtBox").val(mobileNumberId.substring(mobileNumberId.indexOf('+')+1, mobileNumberId.lastIndexOf('+')));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle='modal' data-target='#DivAppendToPartialView' id='"+item.mobileNumber+"' class='messageBtn'>click</a>
<input type="text" id="mobileTxtBox">
assigned the exact value of id by removing the + which is coming in your id
Use val() method for inputs and text() or html() method for another elements.
$(".messageBtn").click(function () {
var mobileNumberId = $(".messageBtn").attr("id");
$("#mobileTxtBox").val(mobileNumberId);
$("#mobileP").text(mobileNumberId);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="mobileP"> </p>
<p>
<input id="mobileTxtBox" type="text">
</p>
<a href='#' data-toggle='modal' data-target='#DivAppendToPartialView' id='"+item.mobileNumber+"' class='messageBtn'>Click ME</a>

add dynamic id to links using Javascript?

I have many links on a page generated dynamically. Now I want to attach ids to them based on a link just before them.
I have written the following function to return me the value I want to add as id to the href I want.
<script>
function movingid(){
var res = location.href.replace(/.*student\/(.*)\/subject/, '$1');
var subjectid = res.split("/")[2];
var classid = res.split("/")[1];
var sectionid = res.split("/")[0];
return classid+"-"+sectionid+"-"+subjectid;
}
</script>
So what I did is
<a href="javascript:void(0);" id= "javascript:movingid();" >Move To</a>
But the HTML thus generated is not calling the function. Instead its adding the id as plain text form like this id= "javascript:movingid();". How can I call the function?
Please help
Create the links this way:
<a href="javascript:void(0);" id= "" >Move To</a>
Maybe wrapping the links with a div, which gets the id "mylinks". After this call a function adding the id with this code:
i = "1";
$( "div#mylinks a" ).each(function( index ) {
$(this).attr("id",i);
i++;
});
Instead of i take your code from the movingid function you already posted.

using jquery to create array of elements in a given class then selecting a random link within that class and opening it

var linksInCategory = document.id($('.CategoryTreeLabel').href);
var randomLinkArray = new Array(linksInCategory);
//CategoryTreeLabel is the class all the anchor tags have that contain the href with the link to the page I want
function goThere(link)
{
var the_url = function pickRandomURL () {
var random_url = randomLinkArray[Math.floor(Math.random()*randomLinkArray.length)];
the_url = random_url;
}
var good_url = fixURL(the_url);
var new_window = window.open(good_url,"new_window","menubar, resizeable. location, toolbar, status, scrollbars");
}
function fixURL(the_url) {
var the_first_seven = the_url.substring(0,7);
the_first_seven = the_first_seven.toLowerCase();
if (the_first_seven != 'http://')
{
the_url = "http://" + the_url;
}
return the_url;
}
</script>
</head>
<body>
<form name="the_form">
<input type="button" name="the_url" class="broadGroups" onClick="goThere(this)" src="the_url" value="Sports"></input>
<input type="button" name="the_url" class="broadGroups" onClick="goThere(this)" src="the_url" value="Film"></input>
Basically I want to create an array of all the href links within the same tag as the class="CategoryTreeLabel" Then I want to create a function goThere () that will open a new window with the URL of good_url. the_url needs to be randomly selected from the list of links we grabbed from the tags with a class of "CategoryTreeLabel" in the document.
Each of the buttons should call the goThere(this) function and pick a random URL out of the array we created, check if it has http:// (it always will redirect to a page without it, but i left it in for fun), then open that page
The return from the jQuery function is an array-like object, that is to say that it has a .length property and can be accessed with array-style [] bracket notation, so you don't really need to create a separate array variable too.
I notice that your buttons seem to be for different categories of links, like sports or film, so perhaps your intention is that the "Sports" button will select a random sports-related link while the "Film" button will select a random film-related link? If so you could have each button pass the category through to your goThere() function and select a random link from within that category. Something like this:
function goThere(category)
{
// assume that the parameter is the class name for links
// in the desired category
var $myLinks = $("a." + category);
// check if there are any matching links
if ($myLinks.length === 0) {
alert("Sorry, no links in the " + category + " category.");
return;
}
var url = fixURL($myLinks[ Math.floor(Math.random()*$myLinks.length) ].href);
var new_window = window.open(url,"new_window",
"menubar, resizeable. location, toolbar, status, scrollbars");
}
You'd then set up your anchor tags to have class names with appropriate categories, something like this:
<a class="sports" href="http://somesportssite.com">Super sports</a>
<a class="film" href="http://moviesRus.com">Movies</a>
<a class="film" href="http://animationplus.com">All about animation</a>
<a class="sports" href="http://football.com">Football site</a>
<a class="sports" href="http://skydiving.com">Let's jump!</a>
And the associated buttons would be:
<input type="button" value="Sports">
<input type="button" value="Film">
And you could set inline handlers like you had, onclick="sports", or you could do something like the following in your document.ready handler to set them all up with a single jQuery .click() call that assumes the appropriate classname/category is a lowercase version of the button label:
$('input[type="button"]').click(function() {
goThere(this.value.toLowerCase());
});

Categories

Resources