I have a problem. How to pass the value of the variable to the bootbox in the loop.
I have an array taken from the database and displayed in a loop:
<tr>
<td>Order nr1</td>
<td></td>
<td>
<button id="confirm-delete-modal" type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td>Order nr2</td>
<td></td>
<td>
<button id="confirm-delete-modal" type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
And Js Bootbox:
$('#confirm-delete-modal').click(function() {
var tesst = "aaa";
bootbox.confirm({
message: "Delete?",
buttons: {
confirm: {
label: 'YES',
className: 'btn-danger'
},
cancel: {
label: 'NO',
className: 'btn-success'
}
},
callback: function (result) {
if(result)
{
window.location.href = "/"+ tesst
}
}
});
});
I would like to pass a separate Id to the link for each row in the loop.How can I do this?
I added a data-index="" to the HTML, this way you can send "parameters" to your click function.
$('.btn').click(function() {
var index = $(this).data("index");
alert(index);
});
<button id="confirm-delete-modal" type="button"
class="btn btn-danger btn-sm" data-index="1">Delete</button>
<button id="confirm-delete-modal" type="button"
class="btn btn-danger btn-sm" data-index="2">Delete</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Notice that I also changed your selector, since it was selecting just one HTML element id (you have two elements with the same id). Try to create a new class and selecting this class instead (in this example I used just the normal btn class).
Related
I have a jQuery Datatable and I dynamically add rows. Each row has a cell in which there's a delete button. My problem is that I can't get to delete the rows with the buttons and I can't even manage to target the current row.
Here's my DataTable code :
var tab_presta = $("#tableau_presta").DataTable({
"searching": false,
"paging": false,
"ordering": false,
"info": false,
responsive: true,
"language": {
"emptyTable": "No product added to the contract for the moment."
}
});
Here is how I create the buttons on each row (on a submit event) :
form2.on('submit', function (event) {
tab_presta.row.add(
[
'<center><button type="button" id="btn_supp' + (++idCount) + '" onclick="alert(this.parentNode)" class="btn btn-xs btn-block btn-danger confirmation">Delete</button></center>'
]
)
.draw( false );
// here I dynamically add an id to each button based on a variable
$('.btn btn-xs btn-block btn-danger confirmation').each(function() {
$(this).attr('id', 'suppr' + idCount);
idCount++;
});
});
And here is my code for deleting when clicking on each button :
for (j = 0; j <= btn_count; j++) {
$("#tableau_presta").on("click", btn_supp[j], function(){
//tab_presta.row($(this).parents('tr')).remove().draw(false);
var row = $(this).closest("tr");
console.log(row);
});
}
As you can see I commented the remove() part because it doesn't work, so I tried to find the closest tr of $(this) (button), but I don't get the row in the console as a result. It's empty and I don't understand why because the button actually exists and I can get its id when I click on it if I put a onclick"alert(this.id).
Any idea ?
You don't need to bind the click event inside of a loop. Instead, use a class or an attribute selector. In this case, selecting all elements with an id that ^ starts with btn_supp = [id^=btn_supp].
$("#tableau_presta").on("click", "[id^=btn_supp]", function() {
$(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableau_presta">
<tr>
<td>
<button type="button" id="btn_supp1" class="btn btn-xs btn-block btn-danger confirmation">Delete</button>
</td>
</tr>
<tr>
<td>
<button type="button" id="btn_supp2" class="btn btn-xs btn-block btn-danger confirmation">Delete</button>
</td>
</tr>
</table>
I try to pass view model parameter to javascript function.but i send two parameter javascript function is not work.what it happen ??Please answer me !!!
in HTML
#if (Model != null)
{
int no =1;
for(int i =0; i<Model.purchaseOrderItemVMs.Count(); i++)
{
var count = i+1;
var ss = Model.purchaseOrderItemVMs[i].StockID;
<tr>
<td>
#no
</td>
<td>
#Html.DisplayFor(modelItem => modelItem.purchaseOrderItemVMs[i].StockNo)
#Html.HiddenFor(modelItem => modelItem.purchaseOrderItemVMs[i].StockNo)
#Html.HiddenFor(modelItem => modelItem.purchaseOrderItemVMs[i].StockID, new { #id = "hidstockid" })
</td>
<td>
#Html.DisplayFor(modelItem => modelItem.purchaseOrderItemVMs[i].Amount)
#Html.HiddenFor(modelItem => modelItem.purchaseOrderItemVMs[i].Amount)
</td>
<td>
<input type="button" class="btn btn-xs btn-primary" onclick="myFunction(#count,#ss)" value="Edit"/>
#Html.ActionLink("Remove", "Delete", new { id = Model.purchaseOrderItemVMs[i].StockID }, new { #class = "btn btn-xs btn-danger", #id = "btnDelete" })
</td>
</tr>
no++;
}
}
In Javascript
function myFunction(count, ss) {
alert(ss);
}
Replace onclick function syntax, insetad of:
<input type="button" class="btn btn-xs btn-primary" onclick="myFunction(#count,#ss)" value="Edit"/> write the following code:
<input type="button" class="btn btn-xs btn-primary" onclick="myFunction('#count','#ss')" value="Edit"/>
It should work
Still be a angular learner.
I have my page like
The code is:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div ng-controller="EmpCtrl">
<div>
<h2 align="center">Angular JS Basic Example</h2>
<h5 align="center">Employee List</h5>
<table border="1" cellpadding="10" align="center">
<tr>
<th>
Edit
</th>
<th>
Employee Id
</th>
<th>
Employee Name
</th>
<th>
Address
</th>
<th>
Email Id
</th>
<th>
Delete
</th>
</tr>
<tr ng-repeat="emp in employees">
<td>
<a href="#" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-edit"></i>
</a>
</td>
<td>
{{emp.EmployeeId}}
</td>
<td>
{{emp.EmployeeName}}
</td>
<td>
{{emp.Address}}
</td>
<td>
{{emp.EmailId}}
</td>
<td>
<a href="#"
onclick="return confirm('Delete this Employee?');"
class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
I have the js code for getting all employees. It works well.
app.controller("EmpCtrl", function ($scope, EmployeeService) {
GetAllEmployee();
function GetAllEmployee() {
var getAllEmployee = EmployeeService.getEmployee();
getAllEmployee.then(function (emp) {
$scope.employees = emp.data;
}, function () {
alert('Data not found');
});
}
});
My asp mvc service code to delete methos is
[HttpDelete]
public void DeleteEmployee(int id)
{
using (DatabaseContext db = new DatabaseContext())
{
var employeeList = db.EmployeeModels.ToList();
var temp = employeeList.Find(x => x.EmployeeId == id);
employeeList.Remove(temp);
db.SaveChanges();
}
}
I want to click the edit/delete icon to edit or delete, I guess that I have to add other javascript functions to do that.(Maybe ng-clcik??) But I don't know exactly, so how to edit a cell or delete a row?
//html
<td>
<a href="#"
ng-click="delFn(emp.EmployeeId,$index)"
class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
//this way u can achieve it
$scope.delFn = function(id, index){
var response = confirm('Delete this Employee?');
if(response) {
$http.delete('url/' + id).then(function(result) {
result.data ? $scope.employees.splice(index, 1) : null;
}
}
}
This will depend on how your UI looks. Delete is easy, just declare a function in your controller and pass the index of the row to the function like this:
In your controller:
$scope.delFn = function(index){
var response = confirm('Delete this Employee?');
if(response) {
$scope.employees.splice(index, 1);
}
}
In your view: instead of onclick, use ng-click
<td>
<a href="#"
ng-click="delFn($index)"
class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
where $index is implicitly available from ng-repeat. Or you can do this to make it explicit stated.
<tr ng-repeat="emp in employees track by $index">
Can you figure out the edit yourself? since you are using table tag. It looks like you can make a popup/modal, pass in the index of the row in your edit function, get the selected employee from $scope.employees, display the selected one in the popup and make it editable with input tag.
<a href="#"
ng-click="delFn(emp.EmployeeId)"
class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
//this way u can achieve it
$scope.delFn = function(id){
EmployeeService.delEmployee(id).then(function (data) {
GetAllEmployee();
}, function () {
alert('Data not found');
});
}
then add service
this.delEmployee= function (id) {
return $http.post('controller/delEmployee', data={id:id});
}
I have buttons in my html table. When I click on button I want to change link button to "Un-Extend" and I click on "Un-Extend" switch back previous button. How can I do that?
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.MemberCustomerName
</td>
<td>
#item.PositionCodeDescription
</td>
<td>
#item.MemberMasterCustomer
</td>
<td>
#item.MemberCustomerEmail
</td>
<td>
#if (item.EndDate != null)
{
#item.EndDate.Value.ToShortDateString()
}
</td>
<td>
<button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>
</td>
</tr>
}
Do you want like this.
<button id="btnExtend" type="button" class="btn btn-info btn-xs un-extended" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>
jQuery(document).on("click",".un-extended",function(){
if(!$(this).hasClass("extend")){
$(this).addClass("extend");
$(this).text("Un-Extend");
}else{
$(this).removeClass("extend");
$(this).text("Extend");
}
});
You can do something like this: DEMO
$('button').click(function(){
if($(this).text() == "Extend") {
$(this).text('Un-Extend');
} else {
$(this).text('Extend');
}
});
Do you mean change the button tag to a tag?
As the button elements are inside the loop iteration, you can't use the same ID(s) name, instead put classname btnExtend(you name it), and register click handler for its, like following :
$(document).on('click', '.btnExtend', function() {
$(this).text(($(this).text() == 'Extend' ? 'Un-Extended' : 'Extend'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnExtend" type="button" class="btn btn-info btn-xs btnExtend" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>
You might want to try this.
$("#btnExtend").on("click",function(){
$(this).text($(this).text() == 'Extend' ? 'Un-Extend': 'Extend');
});
Change into below code and apply below funion of jquery into code:
tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.MemberCustomerName
</td>
<td>
#item.PositionCodeDescription
</td>
<td>
#item.MemberMasterCustomer
</td>
<td>
#item.MemberCustomerEmail
</td>
<td>
#if (item.EndDate != null)
{
#item.EndDate.Value.ToShortDateString()
}
</td>
<td>
<button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"' onclick ="showhide(this);" >Extend</button>
</td>
</tr>
}
<script> function showhide(victim)
{
var text = $(victim).closest('td').find('input:button').text();
if (text == "Extend") {
$(victim).closest('td').find('input:button').text('Un-Extend');
}
else {
$(victim).closest('td').find('input:button').text('Extend');
}
} </script>
I am using editable plugin to preform in place edit
This is the code I am using that I got from their Doc page, it is supposed to be used for adding new records, But I want to use it to modify records)
<script>
$(document).ready(function() {
//init editables
$('.myeditable').editable({
url: '/post',
placement: 'right'
});
//make username required
$('#new_username').editable();
//automatically show next editable
$('.myeditable').on('save.newuser', function(){
var that = this;
setTimeout(function() {
$(that).closest('td').next().find('.myeditable').editable('show');
}, 500);
});
//create new user
$('#save-btn').click(function() {
$('.myeditable').editable('submit', {
url: '/newuser',
ajaxOptions: {
dataType: 'json' //assuming json response
},
success: function(data, config) {
if(data && data.id) { //record created, response like {"id": 2}
//set pk
$(this).editable('option', 'pk', data.id);
//remove unsaved class
$(this).removeClass('editable-unsaved');
//show messages
var msg = 'New user created! Now editables submit individually.';
$('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
$('#save-btn').hide();
$(this).off('save.newuser');
} else if(data && data.errors){
//server-side validation error, response like {"errors": {"username": "username already exist"} }
config.error.call(this, data.errors);
}
},
error: function(errors) {
var msg = '';
if(errors && errors.responseText) { //ajax error, errors = xhr object
msg = errors.responseText;
} else { //validation error (client-side or server-side)
$.each(errors, function(k, v) { msg += k+": "+v+"<br>"; });
}
$('#msg').removeClass('alert-success').addClass('alert-error').html(msg).show();
}
});
});
//reset
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null)
.editable('option', 'pk', null)
.removeClass('editable-unsaved');
$('#save-btn').show();
$('#msg').hide();
});
});
</script>
And this is the html
<tr>
<td>adel</td>
<td></td>
<td></td>
<td></td>
<td><img src=""></img></td>
<td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>
</tr>
<tr>
<td>sdqsd</td>
<td></td>
<td></td>
<td></td>
<td><img src=""></img></td>
<td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>
</tr>
<tr>
<td>dzadz</td>
<td>from me with love</td>
<td>anywhere</td>
<td>http://justawebsite.com</td>
<td><img src=""></img></td>
<td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td>
</tr>
Now everything works fine, Except if I edit one of the 2 first rows and hit Ok It will send the details of the last form http://justawebsite.com and sometimes it doesn't send anything, It is really messed up and I spent hours reading te documentation but I couldn't figure out the problem
As I said in my comment, you've got different elements with the same id, so the selectors won't work (id must be unique). Put them as class instead:
<tr>
<td>
adel
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<a href="#" class="myeditable picture" data-type="text" data-name="picture" data-original-title="Enter Picture">
<img src="" />
</a>
</td>
<td width="10%">
<button class="btn btn-primary btn-sm save-btn">Ok</button>
<button class="btn btn-sm pull-right reset-btn">Reset</button>
</td>
</tr>
Here's a fiddle to get you started https://jsfiddle.net/virginieLGB/k2of9xor/1/
On there, you'll see that I've selected the editable elements you want to submit.
$('.save-btn').click(function() {
var that = $(this);
var allEditables = that.parents("tr").find(".myeditable"); // all ".myeditable" elements in the same "tr" as the ".save-btn" that was clicked on
allEditables.each(function() {
// here I've kept your code because I don't know what happens in your file, but maybe you need a bulk action
$(this).editable('submit', {
...
I don't know how your PHP file works, so don't know how you save your user and if you need to submit all fields at once or not. If so, you'll have to modify my answer a bit.
Have you tried refreshing it afterwards?
For me i noticed, that as soon as it was refreshed i got the result that i have been expecting, but only for one of them. However, i couldn't solve the problem yet.
Please let me know what kind of result you get.
Otherwise try debugging...disable one of the first rows and try it again..