Checked all the data entries in datatable - javascript

If a user clicks the button "Select ALL", all the data in the table from page 1 until the last page should be checked. However, it will only check the first page of the list because only the first page is displayed and has class.
I have this code:
var clicked = false;
$("#ExportAll").on("click", function () {
$(".ExportOrder").prop("checked", !clicked);
clicked = !clicked;
});
How can I check all the data from page1 until the last page and will send all the checked data in the controller as well? It uses datatable.
//Edited
I have modify my codes to be like this and was able to check all the column across different pages however when I clicked the Export button and only those current display will be sent to controller
$(document).ready(function () {
var oTable = $('#orders-table').dataTable({
stateSave: true
});
$("#ExportAll").on("click", function () {
oTable.$("input[name='ExportOrder']").attr('checked', $(this.checked));
});
});
Here is the controller:
public ActionResult PostToStarShipIt(string[] ExportOrder)
{
}
The number of data in ExportOrder is only those in the current display list although all of the list are checked. How can I get all the checked data? Thanks for helping.

Related

Refresh page after Ajax call

I have two pages, on the first page you can select an item with a <select> </select>. When you select an item, a form is automatically displayed through an AJAX Call. In this form, data is automatically loaded from a mysql db in a <textarea> </textarea>. The moment you submit your form, I want the new data to be added to the <textarea> </textarea> I just can't manage this, who can help me?
$(document).ready(function () {
$("#btnAdd").click(function (e) {
/* Retrieving value from textboxes */
var besproken = $('#besproken').val();
$.post("save.php", {
besproken: besproken,
}, function (data) {
$("#autoSave").html("Coaching ");
$("#btnAdd").attr("disabled", true);
});
return false;
});
});
If all you want to do is insert the data into the textarea just use jQuery to selected the element $("textarea") then call the text method and pass in your data .text(data). The result call will look like $("textarea").text(data)
$(document).ready(function() {
$("#btnAdd").click(function(e) {
/* Retrieving value from textboxes */
var besproken = $('#besproken').val();
$.post("save.php", {
besproken: besproken,
}, function(data) {
$("#autoSave").html("Coaching ");
$("#btnAdd").attr("disabled", true);
$("textarea").text(data);
});
return false;
});
});
You can take a div. When you click submit you will get a ajax response, load this inside the div.
success: function(data){
$("#status").load("url of the php-file");
or
$("#status").html(data);
}

Sending DataTable selected rows array to jsp

I have a Jquery DataTable with multiselect ability. Moreover there is a button and a div element:
<script>
$(document).ready(function() {
var tablemovChAf = $('#movChAf').DataTable({
//multiselect
$('#movChAf tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
} );
})
</script>
<button name="sbmsimulate" class="button-input btn btn-info" id="sbmsimulate" style="info" type="button" >
<div id="divAccMovement"></div>
What I want is to send all the selected rows to "accMovement.jsp" by clicking on the button.
$('#sbmsimulate').click( function () {
$('#divAccMovement').load('accMovement.jsp',{
mode:"2",
arrayData:tablemovChAf.rows('.selected').data()
});
} );
my jsp accMovement.jsp looks like this;
<%
String str_mode=request.getParameter("mode").toString();
String[] arrayData=null;
if (str_mode.equals("2")) {
arrayData=request.getParameterValues("arrayData[]");
}
%>
I tried the solution of : Passing javascript array to servlet (In fact, that is what I have done) but it didnt work for me. Nothing happens when I click the button.
I was debugging, and it seems the problem is with:
arrayData:tablemovChAf.rows('.selected').data()
because, if it is commented (and the "if" statement in the jsp is commented also) it is working. However what I need is to send the selected rows to the jsp page.
What is the correct way to send the array from the client and receive the array on the server?
Thanks in advance.
I found a solution not so smart for my case (following this jQuery DataTables Getting selected row values), it does not exactly what I need, but I can add some statements later in order to achive my goal
$('#sbmsimulate').click( function () {
var ids = $.map(tablemovChAf.rows('.selected').data(), function (item) {
return item[11]
});
$('#divAccMovement').load('accMovement.jsp',{
mode:"2",
arrayData:ids
});
} );
The column of index 11 is the id of my dataTable, so in the server side I can get all the information about every row.
However I would like to avoid that step:
var ids = $.map(tablemovChAf.rows('.selected').data(), function (item) {
return item[11]
});
and specify everything in the parameter, something like this :
arrayData:tablemovChAf.rows('.selected').data()

UI Grid refresh in Angular

From a different controller a modal pop up opens. On closing of the modal pop up , I will do something and I want to transfer the data to a different controller which populates a UI grid and is bound to $scope.searchResultsGridOptions.
So in my ABCCtrl.js file :
On closing of a modal , I do :
$("#iConfirmationModal").on('hidden.bs.modal', function () {
$state.go('transaction.search.results', {});
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
//Using them I hit the web service again and get the data to reload the UI Grid
TransactionServices.getTransactionAdvSearchResults(searchResultsParam).then(function (result) {
//I got the result
console.log(result);
/Now I want to reload the grid with this data , but the grid scope object which binds to this , is in separate controller
searchResultsGridOptions.data = result;
});
});
In DEFCtrl.js
I have
getSearchResultsGridLayout: function (gridOptions, uiGridConstants, datas) {
gridOptions.multiSelect = false;
// gridOptions.data.length = 0;
// gridOptions.data = '';
gridOptions.data = datas;
console.log("Grid Data ");
console.log(datas);
console.log(gridOptions.data);
angular.element(document.getElementsByClassName('grid')[0]).css('height', '0px');
// console.log(datas.length);
return gridOptions;
}
But how would I only change the data only when modal closes ?
Rest of the time it should not refresh the Grid ?
Or ,
Is there any way when on closing of the modal , instead of simply go back to the state using $state.for() and seeing the previous unrefreshed data , I can see the refreshed data ?
Hi I think you do not need to call the "TransactionServices.getTransactionAdvSearchResults()" in the "ABCCtrl" controller but you have to call it in the "DEFCtrl" controller.
You need to find a way to pass the "searchResultsParam" extracted in "ABCCtrl" to "DEFCtrl".
You can use the ui-router state parameters. You can specify a parameter in the "transaction.search.results" state, like this:
.state('transaction.search.results', {
...
params: {
searchResultsParam: null
}
...
})
And in the "ABCCtrl" pass it to the state:
$("#iConfirmationModal").on('hidden.bs.modal', function () {
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
$state.go('transaction.search.results', {searchResultsParam: searchResultsParam});
Then, in "DEFCtrl" you can read it and call the "TransactionServices.getTransactionAdvSearchResults()" method.

How to refresh a GridView in Extjs?

I am using a gridview which is binding data from datastore dynamically.
I have two textbox to enter data into grid.
On submit button click the textbox data I am adding to my datastore (no need to store in backend).
Now I want to refresh my gridview with datastore.
My Code:
_createEmptyRecord: function () {
var emptyrecord = Ext.data.Record.create(["id", "name", "type"]);
return new emptyrecord({
formula_id: 1,
name: Amit,
type: anything
});
},
_addValuetogrid: function () {
var record = this._createEmptyRecord();
this._store.insert(0, record);
},
_refreshgrid: function()
{
this._grid._addValuetogrid();
},
Now how to refresh my Gridview ?
Please help me...
Ext.grid.GridView has refresh() method.
this._grid.getView().refresh();
I believe a refresh function similar to this (untested) will work for Extjs 4;
_refreshgrid: function()
{
this._grid.getActiveView().refresh(true);
}

Passing control values to partial view rendered in a popup with Asp.net MVC3

I have created a popup to load a partial view. I want to pass control values from the parent page to the partial view rendered in the popup. How can I pass the values?
Below is the the code used to open the popup. ModifyAgRule is the div id and AuthorityGridModify is the name of action method used to render the partial view.
Some more info:
I have a webgrid in the parent page, when the user selects one row in this grid and clicks on the modify button a popup should appear with the selected values present in dropdowns and textboxes.
<script type="text/javascript">
$(document).ready(function () {
//define config object
var dialogOpts = {
title: "Modify Rule",
modal: true,
autoOpen: false,
height: 500,
width: 500,
open: function () {
//display correct dialog content
$("#ModifyAgRule").load("AuthorityGridModify");
}
};
$("#ModifyAgRule").dialog(dialogOpts); //end dialog
$('#Modify').click(function () {
$("#ModifyAgRule").dialog("open");
return false;
});
});
</script>
You can pass data to your view in JSon format like this
$("#ModifyAgRule").load('#Url.Action("AuthorityGridModify")',
{ 'propertyName' : 'propertyValue',
'propertyName2' : 123 });
in your controller
public ActionResult AuthorityGridModify(string propertyName, int propertyName2)
{
// propertyName´s value is propertyValue
return View();
}
hope this helps!

Categories