I am using bootstrap confirmation plugin, and I have a table with a list of users. One of the columns has a delete button which goes to a link to delete the user, but before deleting the user I have a confirmation box which needs to be clicked. I want to just use one confirmation dialog that pops up for every button and I want to assign the link of the user id to the delete button.
Now the twist is that the whole table is within a form for multiple deletion as well. So I cant have individual forms for each delete button.
<table class="table table-bordered table-striped mb-none" id="datatable-default">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th class="center">Actions</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even">
<td>1</td>
<td>jane doe</td>
<td>jane#gmail.com</td>
<td>
<a href="#" class="confirmation-callback" data-id="1" data-placement="left">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
<tr role="row" class="even">
<td>2</td>
<td>john doe</td>
<td>john#gmail.com</td>
<td>
<a href="#" class="confirmation-callback" data-id="2" data-placement="left">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
<tbody>
And here my js code:
$('.confirmation-callback').confirmation({
onConfirm: function() {
alert('You clicked: delete');
},
onCancel: function() {
alert('You clicked: cancel');
}
});
In the javascript I just want to get the data-id of the button that is calling the function, something like:
$(this).data(id);
Here is link to jsfiddle/full code: http://jsfiddle.net/mswyxp0u/
I can think of a solution. So here it is : Firstly set the singleton option for confirmation to true. Setting it to true will result in :
Set true to allow only one confirmation to show at a time.
When the newest confirmation element is clicked, the older ones will disappear.
Now we know that only one confirmation box will appear at one time. So now create a global variable to store last clicked delete button attribute for id(data-id). Now bind a event to click of that delete then store data-id inside global variable as you can use easily $(this).data("id") in click event.
Now use this global variable inside onConfirm or onCancel as you can confirm/cancel only after clicking delete button and now if only one confirmation box will appear at a time that means the confirm/cancel callback will be for last clicked button only.
Working demo : https://jsfiddle.net/mswyxp0u/8/
Related
<table id="datatable">
<tr>
<th>no</th>
<th>name</th>
<th>address</th>
<th>ket</th>
<th>act</h>
</tr>
<tr>
<td>1</td>
<td>erik</td>
<td>lampus</td>
<td>Closed</td>
<td><button id="get">get</button>
</tr>
<tr>
<td>2</td>
<td>lupin</td>
<td>ggreek</td>
<td>open</td>
<td><button id="get">get</button>
</tr>
</table>
$('#datatable').on('click', '#get', function() {
const row = $(this).closest('tr')[0];
const ket = row.cells[1].innerHTML;
$('#modal').modal('show');
$('#inputmodal').val(ket);
$('#buttonmodal').on('click', function() {
const ket2 = $('#inputmodal').val();
$('#modaladuan').modal('hide');
row.cells[8].innerHTML = ket2;
});
});
I want to change column ket in data table using modal bootstrap, and when button save modal click, value in input modal to change the column, this code work but when second rows click and save, Previously stored data also changed. how to solved that problem, help me. thank you
The problem is that you're using the button with id get. You can only have 1 element for each ID on a page. So:
Change the id="get" to class based, like class="get".
Then add a data-content (content can be a name of your choice) attribute to the button which should be equal to some value for each row. Here you'll have the value which you'll pass to the modal. If you don't prefer to pass data-* attributes, you could traverse the DOM elements (as you've done in your example), but it's generally not that great an idea.
Change the click to act on .get, then you could access the current target's data-content value, and proceed as you were.
If this doesn't work, put up a reproducible example of your code on JSFiddle and we can debug!
I prepared a little simplified snippet, so we can play things through here. Instead of the modal I am using a prompt() to receive an input value from the user. And, as you are already using jQuery you might as well use it properly: I use the tds jQuery object to collect all TDs of the current row. I grab the text value of the second TD in the row (index=1) and use the prompt for getting the user input for putting it back into the fourth column (index=3). The 9th column (index=8) does not exist in your example.
$('#datatable').on('click', '.get', function() {
const tds = $(this).closest('tr').find('td');
tds.eq(3).text(prompt("Enter a new value for "+tds.eq(1).text()));
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="datatable">
<tr>
<th>no</th>
<th>name</th>
<th>address</th>
<th>ket</th>
<th>act</h>
</tr>
<tr>
<td>1</td>
<td>erik</td>
<td>lampus</td>
<td>Closed</td>
<td><button class="get">get</button>
</tr>
<tr>
<td>2</td>
<td>lupin</td>
<td>ggreek</td>
<td>open</td>
<td><button class="get">get</button>
</tr>
</table>
I have a page one.html that contains a hyperlink
<a href="#">Open second page<a/>
When this link is clicked I want to open second.html in a pop up modal.
My second page contains a simple table which I want to show, like:
<html>
<div class="table-responsive-md">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>adidas</td>
<td>one of the top sport brand.</td>
</tr>
</tbody>
</table>
</div>
</html>
If the content you want to display is on an other site the only way is to use iframes. So you would have your modal with the iframe inside it pointing to the external source and being set invisible. When clicking on the link, a Javascript Eventlistener would set the modal visible (i.e. manipulate CSS display). The href attribut of the link is empty.
But using iframes ist kind a out of date. Instead modern Web Apps use Rest Endpoints to request the data in a format like json, parse it and render the data within your App.
i am using the DataTable plugin to display data in my backend page. The plugin works so far very good except in one situation: I have a table showing all products. For each line of the table i have a link for AJAX activation / deactivation of one product. If i am on the first page the activation / deactivation works fine, but when i choose another page using the DataTable Pagination i cannot activate / deactivate the chosen product. It does not display any error in the Firebug, so i am assuming that somehow the link is not correctly displayed.
Here is my HTML code:
<table id="products" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Copy</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Copy</th>
<th>Status</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Iphone</td>
<td><span class="glyphicon glyphicon-floppy-disk"></span></td>
<td><span id="span_1" class="glyphicon glyphicon-ok-sign"></span></td>
<td><span class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
and right after the HTML code, comes the Javascript:
<script>
$(document).ready(function() {
$('#products').DataTable();
$('table#products td a.status_product').click(function() {
// activate / deactivate
});
$('table#delTable tr:odd').css('background',' #FFFFFF');
});
</script>
You need to use event delegation by providing selector as a second argument in on() call, see example below:
$('table#products').on('click', 'a.status_product', function() {
// activate / deactivate
});
From jQuery on() method documentation:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.
See "Direct and delegated events" in jQuery on() method documentation and jQuery DataTables – Why click event handler does not work for more information.
So I have this table:
<table class="table table-bordered">
<tr>
<th style="width: 10px">#</th>
<th>Location</th>
<th style="width: 20px">Actions</th>
</tr>#foreach (var item in Model) {
<tr>
<td>#Html.DisplayFor(modelItem => item.LocationID)</td>
<td>#Html.DisplayFor(modelItem => item.LocationName)</td>
<td>
<a href="#Url.Action(" Edit ", new { id = item.LocationID})">
<i class="glyphicon glyphicon-edit"></i>
<span class="sr-only">Edit</span>
</a>
<a href="#Url.Action(" Delete ", new { id = item.LocationID})">
<i class="glyphicon glyphicon-erase"></i>
<span class="sr-only">Edit</span>
</a>
</td>
</tr>}
<tr>
<td><i class="glyphicon-plus"></i>
</td>
<td colspan="2">#Html.ActionLink("Create New", "Create")</td>
</tr>
</table>
the edit, delete, and add buttons are all working but they are taking me into a new page to perform the edit, add and delete. Is it possible that when I click the edit, the corresponding row becomes editable and edit button become save button to post/save it to database? Can anyone show me how its done or point me where I can see some example pls im new to web development.
There are many ways to achieve what you're after. My preferred method is to use a dialog for new/edit rather than inline, but I've used inline plenty of times. It depends on how many inputs there are - if just LocationName then inline is fine.
One simple method is to include the editor on the view, then show/hide it as required.
Change this:
<td>#Html.DisplayFor(modelItem => item.LocationName)</td>
to:
<td>
<div class='inline-view'>
#Html.DisplayFor(modelItem => item.LocationName)
</div>
<div class='inline-edit' style='display:none;'>
#Html.EditorFor(modelItem => item.LocationName)
</div>
</td>
and change the edit button to call some javascript
<div class='inline-view'>
<a href='#' onclick='startEdit();return false;'>edit</a>
</div>
<div class='inline-edit' style='display:none;'>
<a href='#' onclick='cancelEdit();return false;'>cancel</a>
</div>
(of course, be a purist and add the click event via javascript, for illustrative purpose only)
You also don't need all the div's - just added for clarity.
then add some js:
function startEdit() {
// you could use fadeOut/fadeIn or slide etc to make it a bit nicer here
// maybe flash the background of the input to show something's changed
// etc
$(".inline-view").hide();
$(".inline-edit").show();
}
function cancelEdit() {
$(".inline-edit").hide();
$(".inline-view").show();
}
(again, production code should use proper namespaces)
You'll then need to post the edit - add a small save button next to the EditorFor and either use Ajax to post or add <form> tags.
An alternative approach is to load the inline form when the edit button is clicked - create a PartialView for the edit form and use an ajax call to load it in and replace the existing table row/cell - on save, load a PartialView for the view part and overwrite. The ajax approach ensures you're editing up-to-date data, but is a little more complicated.
I have two links in the same class, but only need to remove one of them.
<table class="LinksTable" cellspacing="0" cellpadding="0">
<tbody class="LinksTableFormat">
<tr>
<td>
<a class="LinksText" href="Default.aspx?Page=Shopping Cart Upload">Shopping Cart Upload</a>
</td>
</tr>
<tr>
<td>
<a class="LinksText" href="default.aspx?page=admin page">Admin</a>
</td>
</tr>
</tbody>
The Admin link is set to only show when certain users sign into the site, but Shopping Cart Upload shows to any user. I need to remove the Shopping Cart Upload link without affecting the Admin link.
Is there any way to do this with jQuery, since they are both in the same class?
You can use the attribute contains selector:
$(".LinksText[href*='Shopping']").remove();
Can try with selectors:
$('.LinksText:first').hide(); or .remove()
or
$('.LinksText:last').hide() or .remove()