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.
Related
For the product, the mouse click options are wrote for action gear icon only. So if we left click on Task button(action icon), it will show options near to that icon.
and corresponding inspect(F12) html file is here:
<tr id="ember25477" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<td id="ember25657" class="ember-view content-data item-number item-number-view container-view item-number-view-core_component_data-view-mixin container-view-core_component_data-view-mixin itemNumber">
<div id="ember25660" class="ember-view view">
<div>
</div>
</div>
</td>
<td id="ember25666" class="ember-view container-view">
<rs-icon id="ember25669" class="ember-view action-menu auto-actions-menu-button icon clickable-icon" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
<span id="ember25672" class="ember-view view">
</span>
</td>
<td id="ember25678" class="ember-view content-data view view-core_component_data-view-mixin description">
<div class="container">
<div class="content">
<div class="aria-hidden">Empty cell</div>
</div>
</div>
</td>
</tr>
But Now the new requirement is options have have to wherever click (both on right click and left click) on that corresponding row. So I have tried the below code:
click: function (event) {
var eventResult = this.get('tableView').clickRow(event, this.get('object'));
if (eventResult !== false) {
this.get('element').focus();
$('.content-row').bind('contextmenu', function(e) {
e.preventDefault();
var rowParentId = $(this).closest('tr').prop('id');
$('#'+rowParentId).find( ".action-menu" ).click();
});
}
return eventResult;
},
When I'm using the above code, right click option is working fine at the corresponding row. But the options are coming near to the gear icon only. I need the options needs to come near to wherever I click on that row.
Please provide me any other suggestion for this. Your help will be appreciate. Thanks in advance.
I'm not 100% sure exactly what you're trying to achieve here but I will attempt an answer based on what I understand. This example will likely be a more "Ember Way" of doing it instead of breaking out to jQuery so please let me know if you can get it working and if not I will update my answer.
First of all, I would recommend that you use Ember's internal implementations of event binding, there are some strange specifics about interactions of dom events and Ember events so you should be very careful here. You can see a full list of events that can be handled automatically by a component in the Ember Guides.
The first thing that we do is we create a component for a table row so that each row is able to handle its own actions. We then use that component in the main template (either your route's template or a table component):
<table>
<tbody>
{{#each model as |item|}}
{{table-row item=item}}
{{/each}}
</tbody>
</table>
In the component javascript file table-row.js you have the following code:
import Component from '#ember/component';
export default Component.extend({
tagName: 'tr',
showContextForEvent(event) {
this.set('showContextMenu', true);
this.set('x', event.clientX);
this.set('y', event.clientY);
},
contextMenu(event) {
this.showContextForEvent(event);
return false;
},
});
The key part of this is the contextMenu(event) call, this will be called with a dom event that you can use for whatever you need it to do. The showContextMenu boolean and the x and y are unlikely to be used in your setup and were just things that we did to get this working for the demo we were building in the video linked below.
We have recently uploaded a video of us answering your question (or one very similar to it) here https://youtu.be/mG8NbMh7_Ck. You can also see a full code snippet here https://github.com/stonecircle/ember-rightclick-example
Using Play 2.3.x, I am trying to implement a form based on one of Play!'s 2.2.x sample forms that dynamically adds/removes fields using an add/remove button, as described in this answer.
I've successfully implemented a delete button that will delete it's parent div, using a className, and an add button that adds a new div to the form based on a hidden template, using an ID. However, in each div element added to the page, the JavaScript event for the nested delete button doesn't seem to fire or get recognized by the page. I've reviewed a few other questions (wrap with anonymous function, re-add control at page load, etc) and discussed with other developers, but still can't resolve the issue. I've been working with JS for about 2 weeks now, and it's likely that I don't know the right documentation to review to find a resolution. Any advice regarding resolution, an explanation as to the cause of the issue, and even tips for better coding practice would be appreciated.
I've stripped out the Play! references in an effort to minimize down to the problem and provided an executable version of the same:
<div class="well weekly">
<div class="alignRight">
<a class="btn btn-default remove"><i class="glyphicon glyphicon-trash"></i></a>
</div>
<table class="formtable"><tbody>
<tr>
<td colspan="2">title</td>
</tr>
<tr>
<td>category</td>
<td>content</td>
</tr>
</table>
</div>
<div id="template" class="weeklyTemplate">
<div class="alignRight">
<a class="btn btn-default remove"><i class="glyphicon glyphicon-trash"></i></a>
</div>
<table class="formtable"><tbody>
<tr>
<td colspan="2">title</td>
</tr>
<tr>
<td>category</td>
<td>content</td>
</tr>
</table>
</div>
<a class="btn btn-primary add">Add</a>
And this is the JavaScript for the add and delete buttons:
<script>
$('.remove').on('click', function() {
$(this).parents('.weekly').remove();
});
$('.add').on('click', function() {
$("#template").before('<div class="well weekly">' + $('#template').html() + '</div>');
});
</script>
Attach them to the parent:
$('body').on('click', '.remove', function() {
$(this).parents('.weekly').remove();
});
$('body').on('click', '.add', function() {
$("#template").before('<div class="well weekly">' + $('#template').html() + '</div>');
});
This way the click event bubbles up to the parent and we catch it there, even from dynamically created objects.
I'm using $('body') selector simply because I can't see from your code example which is the correct parent. You might want to use $('#template') or $('.formtable') or some other container.
http://api.jquery.com/on/
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/
I put a calendar of events put together using angular and jquery. A styled button saying +My Schedule adds the data to localStorage which is then pulled in to another page for user's reference. The localStorage function worked fine until it was brought into the Angular template. Clicking the link now cause the page to jump up and there is nothing recorded in the console or localStorage.
A working example of what I am trying to do is at the following url, this page was all hard coded and I am trying to implement the same thing in an Angular template: http://events.latimes.com/festivalofbooks/the-festival/schedule/
Any help would be appreciated.
Here is a fiddle: http://plnkr.co/edit/gaKFWTsACxwCg0i4JCiw?p=preview
Here is the shortened template as I had to paste code here:
<table class="target-stage stage-only" border="0" cellspacing="0"
cellpadding="0" style="border:none;" >
<tr>
<td width="190" valign="top" class="ev-time">{{item.time}}</td>
<td valign="top" class="ev-desc">
<p class="ev-date">{{item.day}}, {{item.date}}, 2015</p>
<strong>{{item.first_name}} {{item.last_name}},</strong> Author of
<em>" {{item.work_title}}"</em><br />
{{item.stage}}
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span
class="addSchd"><b>+ MY SCHEDULE</b></span>
</td>
</tr>
</table>
I'm seeing a few problems here.
First of all, your html is broken. The p-tag is never closed.
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span class="addSchd"><b>+ MY SCHEDULE</b></span>
Second, as far as I've seen from taking a quick look you are dynamically adding content. You can't use (selector).click() on dynamic content, because the selector won't exist at the point that code is called. Instead use on(), which will be applied to dynamically generated content as well like this:
$(document).on("click", ".button", function() {
// do this when class with .button is clicked
});
I have a complicated view that holds another partial view. The partial view has a submit button.
The submit button and everything works fine in Chrome but in Firefox, even though Firebug shows no errors, absolutely nothing happens when I click the submit button.
Are there any typical issue to be aware of here? Maybe Chrome is more lenient with Javascript errors?
Anyone got any idea what could be happening?
The views are pretty huge so will not post everything
Edit: I will post the view with the submit button. I have put a form in a table to capture the values that I want to save:
<table>
<tbody>
<tr>
#using (Html.BeginForm("RowPost", "Controller"))
{
<td class = "editor-field">
#Html.EditorFor(model => model.Minutes)
#Html.ValidationMessageFor(model => model.Minutes)
</td>
<td>
#Html.DropDownList("WorkType")
</td>
<td>
#Html.TextAreaFor(model => model.description)
#Html.ValidationMessageFor(model => model.description)
</td>
<td>
<input type="submit" value="Save" />
</td>
}
</tr>
</tbody>
</table>
Maybe its something to do with the form inside a table row?
Your view is not well formed and will result in invalid HTML, which in turn causes undocumented behaviour.
<tr>
#using (Html.BeginForm("RowPost", "Controller"))
{
<td class = "editor-field">
Results in something like:
<tr>
<form>
<td class = "editor-field">
which is obviously not ok. You shouldn't be putting forms inbetween rows and cells. Try putting the entire table inside the form for more predictable results.
In future you could save yourself lots of headaches if you get to know and love the WC3 Markup Validation Service. If your html fails that, then get it fixed before worrying about anything else.