There is a one table where user can select multiple rows, and below to the table there is two buttons moveup and move down. when user will click on movebutton, rows should go move up, similar to movedown.
Below is my Jquery code
$(".moveUp").live("click", function(){
var row = $(".selectRow")
$(row).each(function() {
row.insertBefore(row.prev());
});
});
But it is behaving very wrong. Please help me. I am new in jquery.
Thanks!
You need to try like this
$(".moveUp").on("click", function() {
var row = $(".selectRow");
row.each(function() {
var $this=$(this);
$this.insertBefore($this.prev());
});
});
there is no need to wrap row using $( ) again
An alternate approach is to manipulate an array of pure data (store row and selected state), then trigger a 'render' function on the data after it is changed. IOW, redraw the entire table on each operation. Typically this is fast, and an advantage is you can separate the logic/data from the visual interface (like MVC style).
Related
I am developing an MVC app in which I have created two tables in view dynamically. In each table first column contains ID and last column contains save button. On click of save button I'm passing this ID to my function. Now I want to check the button was clicked from which table so that I can perform operations. I have tried many solutions but did not work. Can anybody help?
function SaveDocument(_param) {
//alert(_param + "Add");
return;
var tableRow = $("td").filter(function () {
return $(this).text() == String(_param);
}).parent('tr');
tableRow.parent().attr('uid');
}
and I have also tried links like this but none of these work.
Edit : -
I have created fiddle for this here
You mentioned that you're creating tables dynamically, so I'm assuming your click event won't fire unless you delegate it.
Try adding a class say .save to the buttons and run the below code.
$(document).on('click', '.save', function(){
console.log($(this).closest('table'));
});
I have table containing 4 main rows and one (expand or collapse) button.On click of (expand or collapse) button i want to insert one more row in middle of all rows(which result in total 8 rows) by iterating the table rows.How to do this using Javascript?See the image below.Any suggestion.
This is the code i have return on click of Expand or Collapse button,
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i) {
//what code need to add here
});
});
Due to the fact, that you haven't provided a code example, I only can suggest one way to achieve this.
You can determine the row above the row you'll want to insert by an id on the tr or by a css selector like :nth-of-type(4) for example.
After that, you can use this row as jquery element (example: $("tr#yourrow")) and append a row after it using append().
Example: $("tr#yourrow").append("<tr>... your row definition ...</tr>")
Based on the updated question:
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr>... your row definition ...</tr>")
});
});
The row definition should be done by yourself. I don't know the logic behind the iteration in your case. But I think you'll get it. :)
I have three Tabs and in each tab, I have a Grid.
The data for each Grid is coming from a database, so I am using rowRenderer to populate the Grids. The following code is common for all three Grids:
<grid id="myGrid1" width="950px" sizedByContent="true" rowRenderer="com.example.renderer.MyRowRenderer">
The rows are constructed from Doublebox objects. The data is populated successfully.
The Problem:
I need to handle multiple-cell editing on the client side. The editing is done via mouse-clicking on a particular cell and entering a value.
As example let's say that the user edits first cell on the first row and the value should be
propagated to all other cells on the same row and in all three Grids (so also the two Grids which the user currently does not see, because they are in tabpanes).
I am using jQuery to do this value propagation and it works OK.
I am passing the jQuery as follows:
doublebox.setWidgetListener(Events.ON_CHANGING, jQuerySelectors);
doublebox.setWidgetListener(Events.ON_CHANGE, jQuerySelectors);
This makes it possible to change the value in 1 cell and the change is instantly (visually) seen in all other cells filtered by jQuery selectors.
The problem is that the value is visually distributed to all the cells, but when I try to save the Grid data back to the database, the background values are the old ones.
I am assuming that ZK-Grid component is not aware that jQuery changed all the cell values. Nevertheless if I manually click on a cell that already has the NEW value (enter/leave/change focus) when I save the grid the NEW value is correct in that particular cell. Maybe that's a hint how can I resolve this.
Code of how I extract the Grid values:
Grid tGrid = (Grid) event.getTarget().getFellow("myGrid1");
ListModel model = tGrid.getModel();
MyCustomRow tRow = (MyCustomRow)model.getElementAt(i);
The model for my Grid is a List of MyCustomRow:
myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));
I have a couple of assumptions, but whatever I have tried, hasn't worked. I have in mind that jQuery events and ZK-Events are different and probably isolated in different contexts. (Although I have tried to fire events from jQuery and so on..)
Do you have any suggestions? As a whole is my approach correct or there's another way to do this? Thanks for your time in advance!
Your problem is exactly what you are expecting.
Zk has it's own event system and do not care about your jq,
cos it's jq and zk don't observ the DOM.
The ways to solve your problem.
Use the "ZK-Way":
Simply listen at server-side and chage things there.
I am not sure if not selected Tabs
are updateable, but I am sure you could update the Grid
components on the select event of the Tab.
Fire an zk-event your self:
All you need to know, is written in the zk doc.
Basically, you collect your data at client side, send
an Event to the server via zAu.send() extract the
data from the json object at serverside and update your Grids
I would prefer the first one, cos it's less work and there should not be
a notable difference in traffic.
I post the solution we came up with:
This is the javascript attached to each Doublebox in the Z-Grid
//getting the value of the clicked cell
var currVal = jq(this).val();
//getting the next cell (on the right of the clicked cell)
objCells = jq(this).parents('td').next().find('.z-doublebox');
// if there's a next cell (returned array has length) - set the value and
// fire ZK onChange Event
if (objCells.length) {
zk.Widget.$(jq(objCells).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCells).attr('id')).fireOnChange();
} else { //otherwise we assume this is the last cell of the current tab
//So we get the current row, because we want to edit the cells in the same row in the next tabs
var currRow = jq(this).parents('tr').prevAll().length;
//finding the next cell, on the same row in the hidden tab and applying the same logic
objCellsHiddenTabs = jq(this).parents('.z-tabpanel').next().find('.z-row:eq(' + currRow + ')').find('.z-doublebox');
if (objCellsHiddenTabs.length) {
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).fireOnChange();
}
}
The java code in the RowRenderer class looks something like this:
...
if (someBean != null) {
binder.bindBean("tBean", someBean);
Doublebox box = new Doublebox();
setDefaultStyle(box);
row.appendChild(box);
binder.addBinding(box, "value", "tBean.someSetter");
...
private void setDefaultStyle(Doublebox box) {
box.setFormat("#.00");
box.setConstraint("no negative,no empty");
box.setWidth("50px");
String customJS = ""; //the JS above
//this is used to visually see that you're editing multiple cells at once
String customJSNoFireOnChange = "jq(this).parents('td').nextAll().find('.z-doublebox').val(jq(this).val());";
box.setWidgetListener(Events.ON_CHANGING, customJSNoFireOnChange);
box.setWidgetListener(Events.ON_CHANGE, customJS);
}
What is interesting to notice is that ZK optimizes this fireOnChange Events and send only 1 ajax request to the server containing the updates to the necessary cells.
How can you add rows to a JQuery DataTable without redrawing the entire table?
The behavior I would like is for it to find the correct location (based on the sort) to insert the row into the table while maintaining scroll position of the table and pagination if any.
I was facing the same problem. The solution i found for this were a new function with the name
fnStandingRedraw http://datatables.net/plug-ins/api/fnStandingRedraw.
I added the above code to be able to use this function,
$.fn.dataTableExt.oApi.fnStandingRedraw = function (oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
After that i execute the following commands,
theTable.fnAddData([reply], false);
theTable.fnStandingRedraw();
where,
theTable: is the datatable variable (var theTable = $('#example').dataTable();).
reply: is the information i add to a row of mine datatable. More on http://datatables.net/plug-ins/api/fnStandingRedraw.
The first command adds a row on the table without redrawing it. After this, the new row will not being displayed on the table.
The second command redraws the table, so the new raw will appear, but retain the current pagination settings.
This worked fine for me.
Use dataTable().fnAddData()
http://datatables.net/ref#fnAddData
Example:
http://www.datatables.net/release-datatables/examples/api/add_row.html
I have a table that is dynamically built using DOM. It has 10 cols, and on each row i have some data that i get from a websocket, text boxes and a submit button to add each row to the database.
How can i remove a row after i submitted it?
Someone mentioned jQuery but can't figure it out how to do that.
EDIT
I'm using Chrome and had problems with all the scripts below. this is how i resolved it:
instead of $('input') I used jQuery('input') all the scripts are working fine.
thank you for your help.
Try something like this...
$('input').click(function() {
$(this).closest('td').remove();
});
Demo: http://jsfiddle.net/wdm954/32W63/
EDIT:
Here is another way to do this...
$('table form').submit(function() {
// run some ajax here to do your database work
$(this).closest('td').remove();
});
You can do like this:
$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
var buttonHnd = $(this);
$.post("your-php-file.php",
{/* the data you want to post e.g. */ name: $("#name").val()},
function(data){
buttonHnd.parent().parent().remove();
}
);
});
});
var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);
You might also be interested in my AJAXFetch jQuery plug-in. Among other things, it lets you treat a row of a table as a form and submit all the form elements in it using AJAX, swapping it out the row with the result from the server (usually the non-form version). I use it in many of my internal applications for in-place editing of data.
You could try something like:
// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();
Source: JQuery HowTo
you can use jquery' remove to remove it from dom...
http://api.jquery.com/remove/