I have a table (Datatable) filled with records, I do not need to showing Edit button in each row, I want the user to select row and then press edit button (below the tabel) to open a bootstrap modal filled with selected row data.
Can I do that and How ?
I'm trying to pass the selected row ID to Bootstrap Modal, Let say I have an variable with selected record ID, and the record ID number was 25:
$id= 25;
and here is the edit button:
<button data-toggle="modal" data-target="#EditRecordModal<?php echo $id;?>" type='button' class='btn btn-primary btn-sm'>Edit</button>
The Modal Id will be:
<div id="EditRecordModal<?php echo $id;?>" class="modal fade">
Not working :(
You can enable multi select option in Datatable and use data attr to get the values and make another Datatable
Something like this
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
More detail here
or can try even this example
Related
I have page where user can dynamically create new forms. For every new form button is created. Form is hidden by default. I need to toggle form visibility on that button click. Right now i am using javascript code below and its working
$(document).ready(function(){
$("#button1").click(function(){
$("#1").css({"display":"block"});
$("#2").css({"display":"none"});
$("#3").css({"display":"none"});
});
$("#button2").click(function(){
$("#2").css({"display":"block"});
$("#1").css({"display":"none"});
$("#3").css({"display":"none"});
});
...
Now when user create form i manually modify javascript but problem is that i have too many forms right now and ill have even more.
I need solution to bind button for form and toggle its visibility. Any advice is appreciate.
EDIT
Code i am actually using:
while ($row = $result9->fetch_assoc())
{
echo "<input class='btn btn-default' type='button' id='".$row['o_ime']."' name='button' value='".$row['o_ime']."'>";
}
echo "<form class='form-inline' role='form' name='$i' id='$i' style='display:none' action='naruci.php' method='POST' onsubmit='return validateForm()'>";
form elements
echo "</form>";
First of all, you cannot have the same ID in your DOM.
So instead of IDs use classes. And use jquery's class selector.
So to capture the event, just use the class selector.
And also use hide and show jquery APIs to show/hide elements.
$(".new-btn").click(function(){
$("form").hide(); // close all forms
$("this").closest("form").show(); // show parent form
});
And the next thing I notice, for dynamic elements it cannot be captured by normal click event. Use jquery on API.
$(".new-btn").on('click', function(){
$("form").hide(); // close all forms
$("this").closest("form_").show(); // show parent form
// This is the reason it is not working because I forgot the underscore
});
Update:
It should look like this:
while ($row = $result9->fetch_assoc())
{
echo "<input class='btn btn-default' type='button' id='".$row['o_ime']."' name='button' value='".$row['o_ime']."'>";
// We changed the form ID in this section
echo "<form class='form-inline' role='form' name='$i' id='form_".$row['o_ime']."' style='display:none' action='naruci.php' method='POST' onsubmit='return validateForm()'>";
form elements
echo "</form>";
}
In my query I will create an event to capture my button clicks:
$('.btn').on('click', function(){ // Listen all click events of buttons with class `btn`
var id = $(this).attr('id'); // Get ID of focus button
var formName = 'form' + id; // Append form string in the id to match form's ID
$('form').hide(); // Hide all forms
$('#' + formName).show(); // Show exact form
});
you'll find the best way of what you want to do by following the example here in this link
http://www.w3schools.com/jquery/eff_toggle.asp
$("button").click(function(){
$("p").toggle();
});
You can add unique class for all of your forms. Refer this code
<form class="test" id="1"></form>
<form class="test" id="2"></form>
<form class="test" id="3"></form>
$(document).on("click",".test",function(event){
$(".test").css({"display":"none"});
$(this).css({"display":"block"});
});
Just make your own class for display block.
.db{
display:block;
}
Then on your jquery just toggle class.
$("button").click(function(){
$("#1").toggleClass('db');
})
\\对于动态生成的元素需要使用`on`来监听事件的触发
Try the following
$(function(){
//动态构造form元素
//Dynamic construction of form elements
$('#cnf').on('click',function(){
$('#container').append('<div>' +
'<button>toggle</button>' +
'<form><input value="value"></form>' +
'</div>')
});
//通过冒泡监听按钮事件
//The bubble monitor button event
$('#container').on('click','button',function(){
$(this).next().toggle();
})
})
祝顺利！
why that my button only give me the value of my first column inside a table when i clicked the other button it give me the same output as the first column.
here is the code in showing the item inside the table
try {
while($row=$query->fetch(PDO::FETCH_NUM))
{
echo
'<tr>
<td ><div id="studID">'.$row[0].'</div></td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
<td>
<button class="button active"
name="button"value="'.$row[0].'">view</button>
</td>
</tr>';
}
echo '</table>';
} catch(PDOException $e ){
echo "Error: ".$e;
}
and here is the coded when i clicked the button
<script type="text/javascript">
$(".button").click(function(){
var id =$('.button').val();
alert (id);
});
</script>>
thanks in advance.
Use this object like below:
<script type="text/javascript">
$(".button").click(function(){
var id =$(this).val();
alert (id);
});
</script>>
Click event always get first matching element from dom. If you want to get all buttons get then by for() loop , each loop, map function, or you can follow underscore library.
Don't give your button the value, instead in your click function do
$("td").each(function() {
var id = $('td').val();
alert(id);
});
This way it will iterate over each of your td elements and produce an alert with the value of it. Or you can do this:
var valueArray
$("td").each(function() {
var id = $('td').val();
valueArray.push(id);
});
alert(valueArray);
Which should hopefully do an alert with all the values in it.
and for your button do:
<button class="button active" name="button">view</button>
But bear in mind that this will do it for all td elements on your page so if you have more than one table this will do an alert for every td in every table you have. To avoid this give the table an id and replace $("td") with $("#tableID td").
You need to iterate through all the classes available using jQuery.each() function. While here you are only fetching the first element value.
You can try something like below:
<script type="text/javascript">
$(".button").click(function(){
$( ".button" ).each(function( index ) {
alert( $( this ).val() );
});
});
</script>
How to show value in textbox of popup form.
function eopen(id) {
edialog.dialog("open");
item_id = id;
//show id in span field.
$('#item-id').text(item_id);
//how to show related columns for a id in text box below..
$('#editname').val(??????);
And this is data content loaded from database...
echo '<div><span class="item-name">'. $item[$i]['gitem_name'] . '</span>';
echo '<a class="edit-name" id="'. $item[$i]['gitem_id'] .'">edit</a>';
This is my click function for value edit..
$('.edit-name').click(function (e) {
e.preventDefault();
eopen($(this).attr("id"));
});
And this is popup form values..
<span>Global ID : </span><span id="item-id" class="dialog-text"></span>
<input type="text" id="editname" style="width: 100%;" name="editname">
Use .closest and .find
function eopen(id) {
edialog.dialog("open");
item_id = id;
//show id in span field.
$('#item-id').text(item_id);
var value=$("#"+id).closest('div').find('.item-name').text();
//get its parent with .closest and find item-name in it and get its text
$('#editname').val(value);
}
I have a table(1) with checkbox against each row. When i click a checkbox its value is shown in another table(2). In table(2) each row has a remove option. If i click remove, the row will be removed. In the same way if i uncheck the checkbox in table(1), the corresponding row in table(2) should be removed.So how should i remove a row on uncheck.I have placed this part of code in else block.
$(document).ready(function(){
$('.isSelected').click(function() {
var pdtname = $(this).attr('data-productname');
if ( $('.isSelected:checked').length > 0) {
$("#result").show();
var table = $('<table></table>').addClass('tfoo');
var row = $('<tr></tr>').addClass('rfoo').text(pdtname);
var link = $('<a href="javascript:void(0);">/a>').addClass('lfoo').text('Remove');
row.append(link);
table.append(row);
$('#result').append(table);
$("#result").on('click','.lfoo',function(){
$(this).parent().parent().remove();
});
} else {
$('.isSelected[data-productname="pdtname"]').on('click','.lfoo',function(){
$(this).parent().parent().remove();
});
}
});
});
HTML
<div id="result" ></div>
<td><form method='post' action='<c:url value="compareproducts.html"/>' >
<input class="isSelected" type="checkbox" name='id' value='${product.id}'
data-productname="${product.productName}" >
</form>
As per our conversation in the chat. A quick solution would be to add a data-productname to the table so when you uncheck a checkbox, it removes the table with the same data-productname (notice that for this to work, the productname must be unique).
You can see an example on this jsfiddle: http://jsfiddle.net/4g8nL9t5/1/
I've inline create of row in table in my index view.when user click on add row button it pre-append new editable row to the table .
at the end of the row there is button for save the data of the new row.when user click on save I disable the textboxes and checkboxes and
remove the button of create, what I need is instead add to this row the button of edit and delete, which is default for all table rows, how should I do that?
Here is the code for disable the row fields:
//Hide the create button
$('#btnsubmit').remove();
//Change the name property to disabled
$('input').attr('readonly', true);
$('#name').css("border", "none");
Here is the defult button for all the rows(if i press on create and refresh the page I will see the button also in this new saved row but I want to
add them when the row is added and the page was not refreshed...
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
This is how I add the new row with the create button when user click on create new row
var html = '<tr><td>#Html.TextBox("name")</td><td>#Html.CheckBox("checkBox1")</td><td>#Html.CheckBox("checkBox2")</td><td>#Html.CheckBox("checkBox3")</td><td><input id="btnsubmit" type="submit" value="Create" class="btn btn-default" /></td><td></tr>';
function addRow() {
if ($('#btnsubmit').length == 0) {
//Append new row to the table
jQuery(html).prependTo('#data-table');
UPDATE
this is the example of the table which for every row there is edit/delete button
UPDATE 2
I try to add the following but the button is not added when click on create
$('#btnsubmit').click(function () {
$.post("/Roles/Create", { name : $("name").val() }, function(NewID){
var oTD = $("#btnsubmit").parent();
oTD.append("<a href='/Roles/Edit/"+ NewID +"'>Edit</a>");
oTD.append("<a href='/Roles/Delete/"+ NewID +"'>Delete</a>");
});
You will have to return the ID in response of ajax call and add append anchor with the returned ID
function SaveData()
{
$.post("/[Controllar]/Savedata", { firstname : $("txtFirst").val(), lastname : $("txtLast").val() }, function(NewID){
var oTD = $("#btnsubmit").parent();
oTD.append("<a href='/[ControllarName]/Edit/"+ NewID +"'>Edit</a>");
oTD.append("<a href='/[ControllarName]/Detail/"+ NewID +"'>Detail</a>");
oTD.append("<a href='/[ControllarName]/Delete/"+ NewID +"'>Delete</a>");
//Hide the create button
$('#btnsubmit').remove();
//Change the name property to disabled
$('input').attr('readonly', true);
$('#name').css("border", "none");
});
}