Another query on a JQuery function as a newbie in this. With the help of you guys I was able to modify the code to return the corresponding value from an input tag.
The problem that I am facing now is that on the Add button click I want the <p class="item-quantity">0</p> to display the value returned by the JQuery .get() in the corresponding row.
Here's my HTML:
{% for item in menu_category %}
<tr class="item">
<td><p class="item-name">{{item.item_Name}}</p></td>
<td><p class="item-price">{{item.item_Price}}</p></td>
<td>
<button type="button" class="btn btn-primary add-item" data-name="{{item.item_Name}}" data-price="{{item.item_Price}}" data-id="{{item.item_Id}}">+</button>
</td>
<td><p class="item-quantity">0</p></td>
<td>
<button type="button" class="btn btn-primary remove-item" data-name="{{item.item_Name}}" data-price="{{item.item_Price}}" data-id="{{item.item_Id}}">-</button>
</td>
</tr>
{% endfor %}
And my function:
<script>
$(function() {
$('.add-item').on('click', function() {
$.get('{{ url_for("func_add_to_cart") }}',
{
item_id: $(this).attr("data-id"),
},
function(data) {
$(this).parents().find(".item-quantity").html(data);
});
return false;
});
});
</script>
Thanks for your help!
Related
I try to move this working solution to jQuery.
<table>
<tr th:each="l : ${lst}">
<td>
<input type="button" th:onclick="foo ([[${l}]])"/>
</td>
</tr>
</table>
....
function foo (x)
{
}
How can I do this the jQuery way? Is it a good idea to do so?
I tried this but I do not know how to get the parameter ${l} into the function also how to differ the differnt buttons.
<table>
<tr th:each="l : ${lst}">
<td>
<input type="button" id="mybutton"/>
</td>
</tr>
</table>
...
$("#mybutton").click (function ()
{
});
Fix your HTML to look like:
<table>
<tr th:each="l : ${lst}">
<td>
<input class="mybutton" type="button" value="${l}">
<!-- Fix the above's ${l} to be the desired output value -->
</td>
</tr>
</table>
Then in jQuery use:
function foo () {
// Do something
console.log(this.value); // whatever is returned by `${l}`
};
$("table").on("click", ".mybutton", foo);
If you need some other text for the button other than ${l}, use a HTMLButtonElement:
<table>
<tr th:each="l : ${lst}">
<td>
<button class="mybutton" type="button" value="${l}">Click me!</button>
<!-- Fix the above's ${l} to be the desired output value -->
</td>
</tr>
</table>
I am using angular xeditable text and I am trying to edit a text in a table row. whenever I click on a text it creates a textbox properly but it does not put the data in which should be edited. I do not know how to assign that text to the $scope object.
please help!
Here is my HTML table code
<tbody>
{% for user in User %}
<tr>
<td> {{ user.uid }} </td>
<td> {{ user.taskname }}
<span style="padding-right:3px; padding-top: 3px; display:inline-block;" ></span>
<input type="image" class="deleteImg"
src="static/img/trash_can.png" height="15px"
width="18px" name="removeId"
value={{user.uid}} ></input>
<input type="image" src="static/img/editbtn.svg"
height="15px" width="18px" name="editId"
value={{user.uid}} ></input>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
Here is my Script
<script>
var newItem ={};
var app = angular.module("app", ['xeditable']);
app.controller('myctrl', function($scope) {
$scope.myname="Howdy";
$scope.user={
taskname: 'Here goes the main logic'
};
});
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//').endSymbol('//');
});
app.run(function(editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});
</script>
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..