Am trying to fetch the data attribute from a dynamically created table using foreach.Currently am getting the value od data attribute serviceid of first row only.
This is my php code :
<?php foreach ($service_arr as $service) {?>
<tr class="odd gradeX">
<td><button id="delete_btn" type="button"
data-serviceid="<?=$service->service_id?>" class="btn btn-default" data-toggle="modal"
data-target="#ServicesDeleteModal">Delete</button></td>
</tr>
<?php }?>
I want to fetch the value serviced from the table. Currently if I have three rows generated in foreach loop, am getting only the serviceid of first row only (<tr>).Why is that?
Jquery Code:
$('#delete_btn').click(function(){
var service_id = $(this).attr("data-serviceid");
console.log(service_id);
});
Please help
Thanks
You have duplicate ids. id selector is only binding the click to first element in matched DOM. Also you should use .data() to get set data attribute. and make sure that click event is binded when DOM is ready. something like this:
$(function(){$('.btn.btn-default').click(function(){
var service_id = $(this).data("serviceid");
console.log(service_id);
});});
The problem with the buttons you are generating is that they all have the same id attribute.
An "id" should be unique !
However, several tags can have the same "class" attribute;
You can replace
<td><button id="delete_btn" type="button" [...]
by
<td><button class="delete_btn" type="button" [....]
and change your jQuery selector by that :
$('.delete_btn').click(function(){ [...]
Related
Hi I'm a bit new to jQuery. I'm trying to get the key value from a button id which is an array when clicked as shown below:
<button id="button[1]">Submit</button>
<button id="button[2]">Submit</button>
<button id="button[3]">Submit</button>
<button id="button[4]">Submit</button>
The expected result is when clicked is 1 or 2 or etc.
In PHP I would achieve this by getting the name which is an array also as shown below:
<html>
<button name="button[1]">Submit</button>
<button name="button[2]">Submit</button>
<button name="button[3]">Submit</button>
<button name="button[4]">Submit</button>
</html>
<?php
key($_POST['button']);
?>
How would I achieve this using jQuery?
The id attribut is a unique label you give to an element, it is a string value and should be used only for selection. So firstly you can't just cast a string button[1] to an array, but this is a misuse of id.
You should use the value attribut to share this kind of information, like <button id="button1" value="1">text here</button> and read it with $('#button1').value()
$( "button[name^='button']" ).on('click',function(){
var str = ($(this).attr('name'));
var matches = str.match(/(\d+)/);
alert(matches[0]);
});
this will make a click listener on all the button with name value satrting with buttton. so when u click on it it will alert the current click button name key attribute value
I would suggest a better way to manage this case , you can use button id attribute you can assign each button a unique number :
<html>
<button id="1">Submit</button>
<button id="2">Submit</button>
<button id="3">Submit</button>
<button id="4">Submit</button>
</html>
and create a jquery function to catch the click event on button:
$(document).ready(function(){
$('button').on('click', function() {
$(this).attr('id'); // here you get the id value of selected button
}
}
I have a table which I load with values from the database. The table has an update button which I want to pull specific data values from the database based on the id.
<tr>
<td><?php echo $result['id'];?></td>
<td><?php echo $rowcount ?></td>
<td><?php echo $result['Level Date'];?></td>
<td><?php echo $result['Recieve Date'];?></td>
<td><button type="button" name ="updateid" id="updateid" class="btn btn-primary" data-toggle="modal" data-target="#previous-detail-modal"> Update</button></td>
Can you advice on how I can get the value of $result['id'] of that particular row so I can use it in a function. Currently it keeps taking the last row count value
I tried many solutions reading the posts from others but I am not able to get the value. Would appreciate some help on this
Based on your comment:
I need the id on the client side
You can emit the ID from your PHP code onto the button itself as a data attribute, the same way you emit it anywhere else:
<button type="button" name="updateid" id="updateid" class="btn btn-primary" data-id="<?php echo $result['id'];?>" data-toggle="modal" data-target="#previous-detail-modal">Update</button>
Then in your client-side code, wherever you're handling the button click or otherwise identifying the button, you can pull the data attribute from that button. For example, if you have a reference to the element in a variable called myButton:
let id = myButton.dataset.id;
Edit: In a comment on the question you show the use of jQuery. In that case you might pull the data value with that:
let id = $('#updateid').data('id');
I have a table that is being populated by a foreach loop to get data from a database:
foreach ($retrieve_data as $retrieved_data) {
$content .= "
<tr id=\"id_$retrieved_data->id\">
<td> $retrieved_data->id </td>
<td> $retrieved_data->posname </td>
<td> $retrieved_data->month </td>
<td> $retrieved_data->year </td>
<td> $retrieved_data->availableinv </td>
<td> $retrieved_data->maxinv </td>
<td> <button type=\"button\" id=\"editImpressionsBtn\" value=\"Edit\">Edit </button>
</tr>";
}
I want to write a jQuery function that gets data from the table like the id, availableinv, and maxinv when the edit button is clicked.
jQuery(document).on('click', 'editImpressionsBtn', function() {}
How can I assign a variable in this function to the data in each of these columns for only the row that the edit button was clicked?
Something like this? One thing I noticed, you need to make sure to add the selector (. or # for class or ID) to the handler.
$('.table_selector tbody').on('click', '.editImpressionsBtn', function(){
row = $(this).closest('tr');
})
Then you can add values or ids and get them like this
var my_id_value = row.attr('id')
Target the TR and then the different TD's
$('#editImpressionsBtn').on('click', function() {
var tr = $(this).closest('tr');
var tds = tr.find('td');
var id = tds.eq(0).text();
var avb = tds.eq(4).text();
});
If you're generating more than one table on the serverside, make sure you don't use the same ID for all of them, use a class instead.
There are three parts to this answer. Two are core to your question, one is a coding option / improvement:
First:
As your table is being built in a loop, I presume you've got multiple rows. Be aware that you can not have multiple buttons with the same ID. This is not only semantically incorrect, it will cause issues with jQuery. So, change the id of the button to be a class instead:
<button type="button" class="editImpressionsBtn" value="Edit">Edit </button>
Second:
Now, in your jQuery, you can access that row fairly easily:
jQuery(document).on('click', 'button.editImpressionsBtn', function() {
var row = $(this).closest('tr');
var id = row.find('td:eq(0)').text();
var posname = row.find('td:eq(1)').text();
// ... etc
});
Third:
Escaping quotes inside of quotes like you are doing is a pain to code, and more difficult to maintain and read. I'd recommend in this case using a HEREDOC.
Example:
$content .= <<<HTML
<tr id="id_$retrieved_data->id">
<td> $retrieved_data->id </td>
<td> $retrieved_data->posname </td>
<td> $retrieved_data->month </td>
<td> $retrieved_data->year </td>
<td> $retrieved_data->availableinv </td>
<td> $retrieved_data->maxinv </td>
<td> <button type="button" class="editImpressionsBtn" value="Edit">Edit </button>
</tr>
HTML;
I have a table of assignments. Within each row is a cell, that when clicked will bring up a hidden div to the right of the table. Within the div is a form that allows a user to associate a selected document with a task.
Currently the table is generated, in part, by a PHP "for" loop; I am cycling through an array and creating a new table row for each array index.
Within each row there are two table cells. I want the contents of one of the cells to be a hyperlink that, when clicked, will display a hidden div. Within the hidden div will be a form. The form will have a hidden input box, and I would like to dynamically set this value when the hyperlink is clicked.
Here is a sample of the table:
<table>
<tr>
<th>Task</th>
<th></th>
</tr>
<?php
for($i=0; $i<sizeof($task_array); $i++)
{ ?>
<tr>
<td><?php echo $task_array[$i]['task'];?></td>
<td>Attach Doc</td>
</tr>
}
?>
</table>
Here is the hidden div and form:
<div id="hidden_div">
<form action="[url]" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<input type="hidden" id="task_id" value="">
<input type="submit" name="submit" value="Submit" />
</form>
</div>
I know that I can do the following with JQuery to display the hidden div:
$("#hiddendiv").show();
I also know that the hidden field 'task_id' can be set with JQuery by using
$("#task_id").val() = 'some value';
The problem I am having is that, since the values are coming from an array, I'm not sure how to specify a specific value. For example, the value of a task id is found in the variable $task_array[$i]['task_id']. I could try this:
$('#show_div').click(function(){
$("#hiddendiv").show();
$("#task_id").val() = ???
});
I'm sort of stuck on specifying for which iteration to use the task id value.
My apologies if that wasn't very clear. Any help would be appreciated. Thanks.
PHP
<?php
for($i=0; $i<sizeof($task_array); $i++)
{ ?>
<tr data-task-id="<?php echo $task_array[$i]['task_id'];?>">
<td><?php echo $task_array[$i]['task'];?></td>
<td>Attach Doc</td>
</tr>
}
?>
See that I added a data-attribute named data-task-id to the tr elements that stores the task_id for that row. We can use this in a click event handler later.
JS
//bind an event handler to the `tr` elements for the `click` event to show the `tr`s children elements (the `td`s)
$('tr').on('click', function () {
$(this).children().show();
//this next line is how we get the `task_id` associated with a row
$(this).attr('data-task-id');
});
//since we bound an event handler to the `tr` elements for the `click` event it's a good idea to stop the propagation of click events on links within the `tr` elements so the event doesn't bubble up the the `tr` elements
$('tr').find('a').on('click', function (event) {
event.stopPropagation();
});
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().
Also, you need to change the #show_div element's ID for each element (IDs must be unique). I recommend just changing it to a class instead of using an id:
<td>Attach Doc</td>
Then you can bind an event handler to it like this:
$('.show_div').click(function(){
$("#hiddendiv").show();
$("#task_id").val($(this).parents('tr').eq(0).attr('data-task-id'));
});
I'm somewhat new to jQuery, so I could use some help here.
This is my issue:
I have a PHP script outputting a dynamic table. Each row has an "edit" button, plus some other fields. Only 3 of those need to be turned into an input box. The edit button should only put that specific row into "edit mode." I got as far as assigning each row a unique class by adding a number to the end of it.
I have been able to use jQuery to change all of the rows into edit mode, but I need it to be specific to a row.
An example row would have classes like name0, price0, and desc0. The next row would go on to classes name1, price1, and desc1 (for the fields that need changed). How can I reference these values and pass them to jQuery so it processes an event on just those elements?
There are two ways of doing this:
Dynamically creating the elements when the button is pressed; or
Hiding and showing elements that already exist.
Too much DOM manipulation can be really slow (particularly on certain browsers) so I favour (2). So for example:
<table class="editable">
<tbody>
<tr>
<td>one</td>
<td>
<div class="view">two</div>
<div class="edit"><input type="text"></div>
</td>
<td>
<div class="view">three</div>
<div class="edit"><input type="text"></div>
</td>
<td>
<input type="button" class="edit" value="Edit">
<input type="button" class="send" value="Send" disabled>
<input type="button" class="cancel" value="Cancel" disabled>
</td>
</tr>
</tbody>
</table>
with:
table.editable div.edit { display: none; }
and
$(function() {
$(":button.edit").click(function() {
var row = $(this).closest("tr");
row.find("input.view").attr("disabled", true");
row.find("div.view").each(function() {
// seed input's value
$(this).next("div.edit").children("input").val($(this).text());
}).fadeOut(function() { // fade out view
row.find("div.edit").fadeIn(function() { // fade in edit
row.find("input.edit").removeAttr("disabled"); // enable edit controls
});
});
});
$(":button.cancel").click(function() {
var row = $(this).closest("tr");
row.find("input.edit").attr("disabled", true");
row.find("div.edit").fadeOut(function() {
row.find("div.view").fadeIn(function() {
row.find("input.view").removeAttr("disabled");
});
});
});
$(":button.save").click(function() {
// ...
});
});