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>
Related
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
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).
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 am trying to get value of a text box by using closest().
My form contains dynamically created table with one text box and button in each row . I want to show the value of text box in button click event.
Table format is given below
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
I have written one javascript code (given below) . when the code will execute, it return a null value.
Function
function UpdateSchedule() {
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
Please let me know why am not getting the null value.
jQuery .closest() goes up from the current element until it finds what you give it to find. jQuery .find() goes down until it finds what you give it to find.
This does the trick:
http://jsfiddle.net/6T3ET/
id must be unique, you need to use class instead:
<button class="schedule schbtn btn btn-primary" type="button">
<input class="amtcls txtamt" type="text" value="500">
an use .click() instead of inline onClick handler since you're using jQuery. So you can do:
$('.schedule').click(function() {
var amt2 = $(this).closest('td').prev('td.amountclm').find('.amtcls').val();
alert( amt2);
});
Please note that the .amountclm input is the child of a td whose is the immediate previous sibling of parent td of your clicked .schedule button.
Try this
replace 'this' with the 'schedule_' class attribute
function UpdateSchedule() {
var amt2 = $(".schedule_").closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
HTML :
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
or try with Jquery as
$(document).on('click', '.schedule_',function(){
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
} );
Use .parent() and .prev() in jquery for this contradiction
$(".schbtn").click(function() {
var amt2 = $(this).parent().prev("td.amountclm").find('.amtcls').val();
alert( amt2);
});
Fiddle
First of all .closest() is not plain JavaScript. It's a function from jQuery.
http://api.jquery.com/closest/
and it traverses up in the element hierachy. And td.amountclm is not in the element hierachy of the button#schedule.
Therefore .closest wont find it.
My button is in a TD and I want to just previous TD on button click event I am doing it following but not getting the value... How should I do it?
$(".prodcs").click(function () {
var test = $(this).attr(".prodcs").prev().find('#DDL option:selected').val();
alert(test);
CustomCategory.OnCustomClick($(this).attr("data-productid"));
});
Below is the HTML
<tr>
<td width="170">
<input type="text" class="form-control" placeholder="1">
</td>
<td width="560">
<select name="DDL" id="DDL" class="form-control"><option value="1">7'' - £10.00</option>
<option value="2">14'' - £15.00</option>
<option value="6">5'' - £5.00</option>
<option value="7">500 M- £15.00</option>
</select> </td>
<td width="102" align="right">
<a data-toggle="modal" href="#myModal" data-productid="3" id="product_3" class="btn btn-primary btn-lg popup prodcs">Customisation</a>
</td>
<td width="101" align="right">
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-shopping-cart" style="font-size: 20px; color: #666"></i>
</button>
</td>
</tr>
Assuming .prodcs is the button
$(".prodcs").click(function () {
var test = $(this).closest("td").prev().find('select').val();
alert(test);
CustomCategory.OnCustomClick($(this).attr("data-productid"));
});
.closest() is used to find the td in which the button is present
.prev() finds the previous td element
.find('select') finds the select element inside the previous td
Note: If there are multiple elements with the id DDL, it is not valid use a class instead
try this:
$(".prodcs").click(function () {
var test = $(this).parent().prev().find('#DDL option:selected').val();
alert(test);
CustomCategory.OnCustomClick($(this).attr("data-productid"));
});
or
$(".prodcs").click(function () {
var test = $(this).closest('td').prev().find('#DDL option:selected').val();
alert(test);
CustomCategory.OnCustomClick($(this).attr("data-productid"));
});
Almost there just remove .attr(".prodcs"):
var test = $(this).prev().find('#DDL option:selected').val();