I have this datatable an YUI datatable inside a dialog. The datatable has only 2 columns where only one is editable with formatter: "checkbox". I'm wondering is there any way to collect only the changed data or how should I get all the data to submit it with AJAX request.
Here an sample how to listen to the checkbox click event and select the row of the datatable. You should change the code of selecting the row by a ajax query to post your data changed.
myDataTable.subscribe("checkboxClickEvent", function (oArgs) {
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
myDataTable.selectRow(oRecord);
} else {
myDataTable.unselectRow(oRecord);
};
});
Hope this helps.
In a change event listener for the check box (the click event listener), you could add the obtained records into a (global) array by using something similar to
changedArray.push(oRecord);
And when you want to send it, send changedArray. You could also prevent multiple adds.
if (!changedArray[oRecord.keyElement]) {
changedArray.push(oRecord);
changedArray[oRecord.keyElement] = true;
}
Related
I use the dataTables plugin on my website and I am having some minor problems with my search bar, which is included in said plugin;
I am using that code to clear the search bar emptying the input field:
function tog(v){return v?'addClass':'removeClass';}
$(document).on('input', '.clearable', function(){
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
ev.preventDefault();
$(this).removeClass('x onX').val('').change().submit();
});
which is taken from this stackoverflow question
Now to the problem: whenever I click on the cross that I asigned for the clearing of the input, said input gets cleared like it should, however, the dataTable table keeps displaying only table rows, which correspond to the search input. How can I clear the dataTable search when clicking the cross. I noticed that it only takes the pressing of a key like backspace, arrow down, ... to update the search.
you have two options
tell dataTable that search field has been changed by triggering keyup event
// on 'touchstart click' event
$(this).keyup();
reDraw table manually
var table = $('#example').DataTable();
table.search('').draw();
I've created a widget with two html multiple selects - "available" and "selected". User choose items from "available" and they are displayed in "selected", pretty simple stuff. I'monly interested in "selected" values (the other one simply doesn't have a name attribute) but for it to send all values they have to be selected.
I tried to select them all in jQuery "submit" event but for some reason it doesn't work. I can see they are all visualy selected before the form is sent but the data itself is not sent.
var form = this.$selectedSelect[0].form;
$(form).on('submit', function(e) {
this.$selectedSelect.find("option").prop("selected", true);
}.bind(this));
I'd like to avoid creating hidden fields for each "selected" entry.
You should prevent the original submit process and invoke a new one after selecting all items like this:
var form = this.$selectedSelect[0].form;
$(form).submit(function(e) {
e.preventDefault();
this.$selectedSelect.find("option").prop("selected", true);
this.submit();
});
UPDATE:
You don't even need to prevent the default vehaviour, the following sinmple solution is already sufficient:
var form = this.$selectedSelect[0].form;
$(form).submit(function(e) {
this.$selectedSelect.find("option").prop("selected", true);
});
you need something like this
<script>
$(document).ready(function() {
$("form").on("submit",function(eve){
eve.preventDefault();
$("select#someSelectId").find("option").prop("selected", true);
$(this).submit();
})
})
</script>
I'm facing a sort of dummy problem.
On my site there is an order form (simple html form) and I noticed that I get double commands from time to time.
I realized that if I clicked repeatedly few times the submit button (before the action page is loaded) I got as many commands as I have clicked.
So I wonder if there are simple solution to make form submission asyncronous?
Thanks
P.S. I added JQuery UI dialog on submit "wait please..." but I get still double commands.
UPDATE
As GeoffAtkins proposed I will:
disable submit after dialog is shown
make use of unique form's token (as it is already added by Symfony) Do not use Symfony token as unique form token as it is always the same for current session. Use just random or something like that.
I would consider doing this (jQuery since you said you used that)
$(function() {
$("#formId").on("submit",function() {
$("#submitBut").hide();
$("#pleaseWait").show();
});
});
if you submit the form and reload the page.
If you Ajax the order, then do
$(function() {
$("#formId").on("submit",function(e) {
e.preventDefault();
var $theForm = $(this);
$("#submitBut").hide();
$("#pleaseWait").show();
$.post($(this).attr("action"),$(this).serialize(),function() {
$theForm.reset();
$("#submitBut").show(); // assuming you want the user to order more stuff
$("#pleaseWait").hide();
});
});
});
NOTE that disabling the submit button on click of the submit button may stop the submission all together (at least in Chrome): https://jsfiddle.net/mplungjan/xc6uc46m/
Just disable the button on click, something like:
$("#my-button-id").on("click", function() {
$(this).attr("disabled", "disabled");
});
var bool = true;
function onclick()
{
if(bool)
{
//do stuff
bool = false;
}
else
{
//ignore
}
}
You could disable the button on the form when it is clicked, and then continue to perform the action. You would probably change the text to say "loading..." or some such.
You may also want to re-enable the button on fail or complete of the ajax request.
I've done this many times similar to this: https://stackoverflow.com/a/19220576/89211
I have a grid view that has rows, and within each rows have an action column that you can click. I want to programmatically click the action column and run whatever event it does. The action column's got a itemID as well. Here's what i got so far,
var yourgrid = Ext.ComponentQuery.query('grid[itemId=yourgridname]')[0];
var record = yourgrid .getSelectionModel().select(0, true);
How do you get click the action column ?
From the docs
Firing your own events is done by calling fireEvent with an event
name.
var actionColumn = Ext.getCmp('#actionColumnId');
actionColumn.fireEvent('click', actionColumn);
I have a two tab layout. When the first tab button is clicked the rows are filled using data retrieved remotely. This is the same for the second tab but the layout of the data is different.
My problem is when you switch between tabs I need to fire a click event on the first row of each tab.
I am building this app for android only.
Any help is greatly appreciated...
EDIT: This is dummy code of the top of head, hope it makes a bit more sense.
leftTableView = Ti.UI.createTableView({
data: populateTableView(0),
allowsSelection:true
});
function populateTableView(byType)
{
for(length of array loop){
var tableViewRow=Ti.UI.createTableViewRow({
my_obj:myObj[i]
});
tabledata=[]
tableViewRow.addEventListener('click',function(e){
e.row.setBackgroundImage('/images/selected-row-background.png');
}
if byType 0
loop array display row for each object element
tableData.push(tableViewRow);
return tabledata
if byType 1
loop array display row for each object element, display differently
tableData.push(tableViewRow);
return tabledata
}
}
tab 1 click event listener
populateTableView(0);
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
tab 2 click event listener
populateTableView(1)
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
Listen for the blur event on the tabGroup and take action as each one of the tabs become the active tab
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TabGroup-event-blur
tabGroup.addEventListener('blur', function(_event) {
var activeTab = _event.tab;
// now that you have the activeTab, get the window, then the
// table and call a method to simulate a click on the first
// row
});
passing data when firing event
var row = leftTableView.data[0].rows[0];
row.fireEvent('click', { row : row } )