I have a table that is built from items in a DB and they contain sensitive information that I don't want to display until you click on a link contained in another table cell.
|item1|item2|click to show item3|(hidden span within cell)|
When you click on the link in cell 3 it will then show cell 4. I know how to accomplish this in typical jquery, but am not sure how to accomplish this in emberjs. Any ideas?
A JS fiddle of your setup would make this easier, but basically you would set a property on your controller from an action.
<span {{action showCell4}}>click to show item3</span>
on your controller have the showCell4 action:
actions: {
showCell4: function() {
this.set('cell4visible', true);
}
}
then for the table add a class binding
<td {{bind-attr class="cell4visible:visibleClassName:hiddenClassName">
sensitive info here
</td>
Related
I have a list of items, and each one has a link to click to edit it. I am using stimulus to make the edit "modal" form visible when they click that edit link. The id of what is going to be edited is present as an id= on the corresponding link tag of the list
So, the edit link looks like this:
<td>
<a data-action="click->content#edit"
data-target="content.editBtn"
id="<%= url_for(content) %>")>
Edit
</a>
</td>
And the idea is that the content#edit action in the stimulus controller examines the and locates the id of it and uses that to edit the right row.
However the problem I am having is, I think, that as a result all the rows of this list have a data-target with the same name and the wrong one (the first one?) gets bound to the target..
However if I wanted to make each data-target different by e.g. appending the id to it, now I have a long list of targets in the controller.js so that doesn't make sense.
What's the right way to handle?
If you're using Rails as the backend like your other questions seem to indicate, there may be a simpler, non-Stimulus solution. To use Stimulus, you'd need to fetch the data for the item from the server or from the DOM, display it in a form, then submit the correct form with the correct ID to the server through JavaScript. Why not just have a remote link_to button to the edit action for each item? Rails gets a JS request to the edit controller action, and you can load the modal form with the data that you have from your Ruby object.
If you use Stimulus for anything on the form, I'd use this opportunity to craft a Stimulus controller that listens to the ajax->send/error/complete events and automatically disables/enables buttons, sets loading spinners on buttons, and closes the modal. Those would be good areas to sprinkle in some functionality that Stimulus makes very simple.
This is actually a good use of Stimulus since it is modular. You add a controller for each row instead of having the controller around the page or table.
<tr data-controller="content">
<td>
<a data-action="click->content#edit" data-target="content.editBtn" id="<%= url_for(content) %>")>
Edit
</a>
</td>
</tr>
I was just having a similar problem.
This helped:
https://codepen.io/smashingmag/pen/ExPprPG
Basically you can loop over the targets like:
for(let tgt of this.mySameNameTargets) {
tgt.innerHTML = "Some Value"
}
This assuming you have this in the controller:
state targets = ["mySameName"]
You can also use "Action Parameters" to put the id in each row:
https://stimulus.hotwired.dev/reference/actions#action-parameters
From those docs it looks like this:
<div data-controller="item spinner">
<button data-action="item#upvote spinner#start"
data-item-id-param="12345"
data-item-url-param="/votes"
data-item-payload-param='{"value":"1234567"}'
data-item-active-param="true">…</button>
</div>
// ItemController
upvote(event) {
// { id: 12345, url: "/votes", active: true, payload: { value: 1234567 } }
console.log(event.params)
}
You can set the id of the item in that row in a param, and then when they click on that row you can dig it out of the params.
I have table structure has created in
https://jsfiddle.net/u8sdko1a/1/
in Button Click i want to set value in table input fields.
Js Code:
$('#regform tr#cny-1131').each(function() {
$(this).find("input.dedicate").val(name);
$(this).find("input.chinese_name").val(chinese_name);
});
This code is working in Firefox but not in IE and Chrom.
Please anyone help to resolve this issue
There are plenty of errors in your jsfiddle. First you have not included the JQuery to load on the page load. Then you have used the id selector regform-0 and regform which is id for <td> and from that you have used $('#regform-0 tr#cny-cny-1130') which will look for a <tr> that is the child of element with id #regform-0. Since the element with id regform-0 is itself a <td> how can it find a <tr> as a child. Another mistake was in the class name for dedicated, it's dedicate. Overall the working code is like this
$(document).ready(function () {
$(".cny_order").on("click", function(e) {
$('#chinese tr.cny_item').find("input.dedicate").val("Tesst");
$('#chinese tr.cny_item').find("input.chinese_name").val("erer");
});
});
For your workaround here is the link to JSFIDDLE
I am developing a webapp using Spring, jsp, javascript, jquery.
I display a table using datatables.
When I click on a table row I want it to change all fields to an inline edit inputs, selects etc. In addition I want to show some extra input fields in the next row and a save button.
Now I see several ways of doing this. I am not sure which one to take.
I can get a handle to selected row and then iterate over the td and transform them to input/select fields. I can then insert an extra row for the new fields and the save button.
I don't see this as a clean solution. I will have to issue a Post manually instead of using the Spring ModelAttribute binding for the form. (Can I still use ModelAttribute here?)
I can create an edit form in a jsp file which looks like:
<form:form action="" commandName="">
<td> <input ... > </td>
<td> <select ... > </td>
</tr>
<tr>
<td> <label> <input new field> </td>
<td> <button> </td>
</tr>
Note I do not have a beginning in a jsp file as I plan to reuse the tr from the existing row in the table.
This way I would be able to have a clean form and also use the update method I have already written which binds the form to a Java class. Also I do not have to bother about the alignment of input fields with the column names.
The generated html looks like
...
The problem with this approach is the placement of form element in the html causes the entire form to be cramped into one cell of the table which does not look good and messes up the whole layout. Is there a way out? Should I just replace the contents of the table with a having a colspan and then put divs inside this element and fine tune the css to ensure that the input fields align with the column names in the table?
Is there a better solution you can suggest?
In case the question is not very clear I can fill in more details.
This is what I would do (coming from a server-side development background, as I know developers love easy solutions)
Wrap the table with a single form
on Edit row (clicking row) open an ajax request that returns pure html that looks like the exact tr, only with whatever extra you want to include:
<tr><td><input type="text" name="text1" ... /></td><td>second row... </td></tr>
<tr><td colspan="2">And hey, here is more, and the save button ... </td></tr>
in jQuery replace tr with content retrieved (myTr.replace($(ajaxResponse))) or something similar
now Save button is a regular submit for the form
if you want to submit via ajax, once done, return the old html in your ajax response and replace the two trs with the old tr (you just need to hook it by giving new trs an attribute that you can find easily in jquery)
don't forget to switch off a global key to prevent double editing, users can edit one row at a time
Update: adding a second solution to dump load on client instead of server
To avoid overloading the server (though I wouldn't be worried about it until it becomes a regular habit), you can make your form fields as a template inside your HTML and use string replacement (or jQuery Templates), so instead of ajaxing to get response in step 2, you call the template, and replace the strings with attributes you save in every row... like this:
<div id="myTemplate"> // or you can use jQuery script templates
<tr><td><input type="text" name="${Name}" ... /> id is ${Id}</td><td>${SecondRow}... </td></tr>
<tr><td colspan="2">Save button here.... and may be more text ${MoreText}</td></tr>
</div>
in every row in your code add sufficient attributes or ids to know what you want to replace with, like this:
<tr data-itemid="34"><td ><input type="text" name="text1" id="findme" ... /></td><td data-moretext="here is more text">second column </td></tr>...etc
so now in your replacement script:
$("#myTemplate").html().replace("${Name}", $(thisrow).find("#findme").attr("name"))
.replace("${Id}",$(thisrow).attr("data-itemid"));
etc...
Of course after submission it has to be a to server, but in case user "cancels" you can have another readonly template
By the way, that is the way I usually go with, I use jQuery templates, and create edit and view templates, but I also repeat edit forms and I use jQuery ajax submit manually... but that... my friend, is not a simple clean and maintainable solution I'm afraid
I've been into an issue like this a year before. This is a messy problem. Either way if you traverse each td of row and convert it into text field or You can create a separate jsp file for this.
But the best in this case is to change the content of td to input field and post the data manually. because in this case you cannot wrap form tag around tr. You have to manually post the values of each input field.
P.S The very best solution is to create an edit dialog.
There is another solution, but I'm under the impression you won't like it very much... you can use a single form for the whole datatable (wrapping the whole table in a form is permitted) generate input fields for the current row and if it's updated submit the form asyncronously with javascript and restore td contents to the original html, if you name your fields such as name="field[]" you can also submit multiple rows at a time (I don't know if you'd want that though).
You can write html code such as
<form action="">
<table>
<tr><td><input type="hidden" name="row[]" value="1"/><input name="field[]"/></td></tr>
<tr><td>field value for row2</td></tr>
<tr><td><input type="hidden" name="row[]" value="3"/><input name="field[]"/></td></tr>
</table>
</form>
you can just grab the form with jquery and submit it via xmlhttprequest as I suspect you would if each row was a separate form (which is illegal), if you don't want multiple rows, just remove the [] and submit each row
and upon submitting the values you get them numbered correctly, don't know exactly how it would behave in java but in php I'd get the following:
$_GET[row][0] = 1;
$_GET[field][0] = 'value typed in row1';
$_GET[row][1] = 3;
$_GET[field][1] = 'value typed in row3';
Alternative table definition to avoid having the same name again
<form action="">
<table>
<tr><td><input name="field[1]"/></td></tr>
<tr><td>field value for row2</td></tr>
<tr><td><input name="field[3]"/></td></tr>
</table>
</form>
It's the same table as above only you set explicit indexes for each entry thus avoiding duplicate names in the response, preferrably use a unique identifier which can describe the row from the table that you're modifying in there (when possible I use the primary key) instead of the row number, just in case that wasn't clear enough.
Have you tried:
Wrap whole table in the form
have the data entries as disabled inputs with their borders hidden via CSS
when user clicks edit, enable the inputs and show the borders
You'll probably need hidden elements for each field
When user submits the form, post via ajax and set the inputs back to disabled with hidden borders
What about contenteditable?
Demo: http://jsfiddle.net/SO_AMK/XQekC/
jQuery:
var ctrlDown = false;
$(document).keydown(function(e) {
if (e.which = "ctrlKey") {
ctrlDown = true;
}
}).keyup(function(e) {
if (e.which = "ctrlKey") {
ctrlDown = false;
}
});
$('#example').dataTable();
$("#example tr").click(function() {
if ($(this).hasClass("row_selected") && ctrlDown) {
submitRow($(this));
return false; // Break out so the next if doesn't run
}
else if ($(this).hasClass("row_selected") && ctrlDown == false) {
return false; // Break out so the next if doesn't run
}
if ($(this).siblings(".row_selected").length && ctrlDown == false) {
$(this).siblings(".row_selected").each(function() {
submitRow($(this));
});
}
$(this).addClass("row_selected");
$(this).children("td").each(function() {
$(this).attr("contenteditable", true);
});
});
function submitRow(elm) {
var data = [];
$(elm).removeClass("row_selected").children("td").each(function() {
data.push($(this).text());
});
alert(data); // This will stop the keyup from firing, but you won't (I hope) really be using alerts
}
This has everything but a submit-to-server function, it's also completely inline and has support for selecting multiple rows.
The only bug is, when it shows the data alert the focus goes off of the main window so the keyup event never fires, since you probably won't be using alerts this shouldn't be an issue. To fix it in the fiddle, press and release ctrl after the alert closes before clicking a row.
I see couple of problems
Your no. Of columns in the table & the edit columns you show are different
You might not be having complete data to edit the row so you might need to do an Ajax call and get it
If you have complete data on then you don't need point 2, let's assume you have a function f called with the clicked tr as the parameter
function f(row)
{
var newRow = yourTable.insertRow(parseInt(row.rowIndex,10)+1);
//you can place the above or below the clicked row , or you can even make the row visible false And then show the new row
Var newCell = newRow.insertCell(0);
newCell.colspan = 6;//the count if columns in your table row
NewCell.innerHTML = " put your HTML content here";
}
my web application is based on dojo 1.6.0.
The problem that I have is based on event handlers basically and/or their utilization
in dojos "dojox.grid.EnhancedGrid" library.
My application contains a dojox Enhanced Grid with a great number of rows. (100+)
This Enhanced Grid makes use of the "cellMenu"-Plugin to show a context menu
for each Grid Cell on right click.
My goal is to use the context menu for "smart" selection of rows.
For example:
The user right clicks on a cell wich is positioned in the column "lastname" and has the value "miller". He then clicks "smart select" in the context menu.
The application will then loop over the row data and select all rows wich have "miller" as "lastname".
In the aftermath the user will innitiate actions with the selected rows through press of a button.
Here is a small sourcecode example illustrating the declarative approach for visualization of the Enhanced Grid with Context Menu:
<table dojoType="dojox.grid.EnhancedGrid" plugins="{cellMenu:'myMenu'}">
<div id="myMenu" dojoType="dijit.Menu">
<div id="mi1" dojoType="dijit.MenuItem">Do something with this cell</div>
<div id="mi2" dojoType="dijit.MenuItem">Do something else with this cell</div>
</div>
<thead>
definition of columns
</thead>
</table>
Action code is handled separate from the visualization in js-Files:
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dijit.byId('mi1'),'onClick',function(event){
//Use Data from the cell clicked to do something
});
dojo.connect(dijit.byId('mi2'),'onClick',function(event){
//Use Data from the cell clicked to do something else
});
});
</script>
I am relatively new to dojo and do not have experience with the handling of the EnhancedGrid.
So my problem is the following:
When I click inside the context-menu which is a "dijit.Menu" the "onClick" event
of the "dijit.MenuItem" contained therein is triggered.
Inside this event handler I need to read the contents of the "Grid Cell" the context menu
was opened on, but I do not have (or do not currently know) a way to get a reference to the "Grid Cell".
With default tactics I might be able to get a reference to the MenuItem and from there maybe to the Menu, but I was unable to find an attribute containing the reference to the "Grid Cell" or a row/column ID that would enable me to access the Cell clicked.
Since context menus are there to do something with the "item" they were opened with by right clicking I think that there has to be a way (as meant by the designer) to access this "item".
I have not yet found a documentation or example illustrating this and would appreciate all your help.
Here is a possible sollution (maybe not the best there is) for using a context menu on a dojo grid for selection purposes:
Visual Part (Declarative)
<table id="grid" dojoType="dojox.grid.EnhancedGrid"
plugins="{indirectSelection:true,menus:{cellMenu:'GridCellMenu'}}">
<div dojoType="dijit.Menu" id="GridCellMenu" style="display:none;">
<div dojoType="dijit.MenuItem" id="mi_selectSimilar">select similar items</div>
<div dojoType="dijit.MenuItem" id="mi_deSelectSimilar">DEselect similar items</div>
</div>
<thead>
<tr>
<th field="id">ID</th>
<th field="lastname">Lastname</th>
<th field="firstname>firstname</th>
</tr>
</thead>
</table>
JavaScript Background
// Stylesheets and Dojo Groundwork are neglected in this example
<script type="text/javascript">
dojo.require('dijit.Menu');
dojo.require('dijit.MenuItem');
dojo.require('dojox.grid.EnhancedGrid');
dojo.require('dojox.grid.enhanced.plugins.IndirectSelection');
dojo.require('dojox.grid.enhanced.plugins.Menu');
var currentEvent = null;
var fn_selectSimilar = function(){
var data = currentCell.grid.store.objectStore.data;
dojo.forEach(data,function(row,idx){
if(row[currentEvent.cell.field] == data[currentEvent.rowIndex][currentEvent.cell.field]){
currentEvent.cell.grid.selection.addToSelection(idx);
}
}
}
var fn_deSelectSimilar = function(){
var data = currentEvent.cell.grid.store.objectStore.data;
dojo.forEach(data,function(row,idx){
if(row[currentEvent.cell.field] == data[currentEvent.rowIndex][currentEvent.cell.field]){
currentEvent.cell.grid.selection.deselect(idx);
}
}
}
dojo.addOnLoad(function(){
dojo.connect(dijit.byId('grid'),"onCellContextMenu",function(e){
currentEvent = e;
});
dojo.connect(dijit.byId('mi_selectSimilar'),"onClick",fn_selectSimilar);
dojo.connect(dijit.byId('mi_deSelectSimilar'),"onClick",fn_deSelectSimilar);
});
</script>
This will go through all the selected items in the grid and get the value of the cell named "YourGridColumnName".
var items = YourDataGridId.selection.getSelected();
if (items.length) {
dojo.forEach(items, function(selectedItem) {
alert(YourDataGridId.store.getValues(selectedItem, "YourGridColumnName"));
})
}
Hope it helps.
You can link an event handler into the mouse and keyboard events that will bring up the context menu. The event has a row index that you can store in a place where the menu item will find it.
I've asked a lot of jQuery questions recently as I'm trying to use it rather good old Javascript, as I mentioned in previous questions, "I'm currently having to extend an very old ASP.NET site which has a database generated front end and is a behemoth of an application, it needs completely rewriting - however I've been told to add to it than redevelop it "
Now what I'm doing is once the backend is rendering a table to the interface I wish to loop through the tr elements of the table, within one of the td elements of the tr there are two radio buttons. I need to determine the name of the radio button group as I don't define them, the systems does using a GUID or something?
This is the table for example...
<table id="tableID">
<tr>
<td class="qCol">
<!-- Label here -->
</td>
<td class="qCo2">
<!-- img here -->
<!-- and a text box -->
</td>
<td class="qCo3">
<!-- select menu here -->
</td>
<td class="qCo4">
<!-- radio buttons here -->
</td>
<td class="qCo5">
<!-- select menu here -->
</td>
<td class="qCo6">
<!-- hidden validation image here -->
</td>
<tr>
</table>
Okay, I'm looping through the table and at the same time switching the innerHTML of one cell to another and hiding some of the rows, I'll be adding functionality to show these later, here's the jQuery:
$('#tableID tr').each(function (i) {
/*switch select and validation and clear */
$(this).children('td.qCol').html($(this).children('td.aCol5').html());
$(this).children('td.aCol5').html($(this).children('td.vCol'.html(""));
/* hide all but the first row*/
if (i >= 1) {
$(this).hide();
}
now I'm trying to determine the name attribute of the radio buttons that will be in the cell with class .qCo4, however I'm having no luck as the following returns an error and is "undefined"...
/* get the radio button name and check if either are selected*/
// check something exists...
if ($('input:radio', this).attr('name')) {
var thisRadioName = $(this).closest("input:radio").attr('name').val();
alert(thisRadioName);
}
$this is the tr element, so should I be using child rather than closest? If this makes no sense I can expand and explain better.
you should use find() or children(). closest() goes up the tree, while find looks for elements down the tree
var thisRadioName = $(this).find("input:radio").attr('name');
you can use also ':checked' to check if any radio is checked
var checkedRadio = $(this).find("input:radio:checked")
You should use children if you are absolutely sure that the elements you are looking for are direct child of the element, otherwise use find(). (using finds protect you from refactoring code if you modify the html, like adding a wrapping div for other reasons like styiling)
look at this fiddle: http://jsfiddle.net/nicolapeluchetti/Evq6y/
var thisRadioName = $(this).find("input:radio").attr('name');
should do what you want