I am using DataTables Table plug-in for jQuery and am having an issue retrieving posting data between the different pages.
So I have a checkbox in each row on the table. If a user selects a checkbox on page 1 then switches to page 2 and selects a checkbox and then submits, the controller then receives a blank object. If they submit from page 1 I can see the items from the first page. Is there a way to post the whole table?
Second issue, I have two buttons at the bottom that should do two different things. So either I could call to the method and then determine which button was pressed or just call that specific method. How do I accomplish this?
Razor Code
#using (Html.BeginForm("ManageSelected", "Home", FormMethod.Post, new { id = "ManageApplicationForm" }))
{
<table id="example" class="table table-striped table-bordered table-condensed" width="100%">
<thead>
<tr>
<th> </th>
<th>Student Name</th>
</tr>
</thead>
<tbody>
#for (var i = 0; i < Model.Students.Count(); i++)
{
#Html.HiddenFor(x => x.Students[i].Student.StudentUserID)
<tr>
<td style="width: 1px">#Html.CheckBoxFor(model => model.Students[i].IsSelected)</td>
<td>#Model.Students[i].Student.User.FullName() </td>
</tr>
}
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-action" id="acceptBtn" value="Accept" name="command">Accept</button>
<button type="submit" class="btn btn-primary" value="Decline" name="command">Decline</button>
}
Controller stub
public ActionResult ManageSelected(AdminManageApplicationsViewModel model, string command)
Related
I have a bootstrap table in my HTML5 page.
When using $('#bk-table').bootstrapTable('checkAll')
Only the checkboxes in current page r checked.
How could I check all the checkboxes in all page?
My bootstrap table:
<form>
{% csrf_token %}
<table contenteditable='true' class="table table-bordered table-xl" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-export="true"
data-height="1650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" name="checkbox" class="data-checkbox" id="data-checkbox" data-checkbox="true" ></th>
<th class ='courseCode' data-field="courseCode" data-formatter="renderCourse">Course Code</th>
</tr>
</thead>
</table>
</form>
My button event:
<button class="button" type="button" onclick="select_all();">Select All</button>
<script>
function select_all()
{
$('#bk-table').bootstrapTable('checkAll')
}
</script>
bootstrapTable('checkAll') is for Check/Uncheck all current page rows. For selecting all the pages, first you load data let data = $("#bk-table").bootstrapTable('getData'); and iterate though data object & update the id field state (because data-field="state" for check box) value to true in the object array data then you reload table with your updated data $('#bk-table').bootstrapTable('load', data);
Please find sample updated data object array:
data = [{"id":1,"courseCode":"Item 1","state":true},{"id":2,"courseCode":"Item 2","state":true},{"id":3,"courseCode":"Item 3","state":true}];
function select_all()
{
let data = $("#bk-table").bootstrapTable('getData'); //getting table data
for(let i=0;i<data.length;i++){
data[i]['state'] = true;
}
$('#bk-table').bootstrapTable('load', data); //reloading table data after updation
}
<button class="button" type="button" onclick="select_all();">Select All</button>
up votes will be appreciated!
I have a HTML table for which i have delete button for each row.
Clicking on the delete button, it goes to javascript and I remove the row using below code . When I try to submit the table content back to the controller using the submit (Ajax.beginform), it is sending back the data only above the deleted row, and nothing below the deleted row. Even though in the UI, it is still showing all the rows above and below the deleted row.
Example: Lets say if I upload 3 documents, and delete the middle one, it will remove the row from the table but when I click on the Upload button, I get only the first row.
But if I delete the last row, 3rd document, then I am getting back above 2 documents properly in my Upload button action.
Thanks in advance for your help
javascript code:
function removeDocument(selector) {
$(selector).closest('tr').remove();
}
HTML code:
#using (Ajax.BeginForm("Upload", "MatterFiling", new AjaxOptions { HttpMethod = "POST", OnSuccess = "SuccessUploadDocument", OnFailure = "OnUploadFailure" }))
{
<table class="table table-bordered" id="DocumentTable">
<thead>
<tr>
<th><span class="reqAsterisk">* </span>Document Title</th>
<th></th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td style="width: 50%; display:none" class="nr" >
#Html.TextAreaFor(m => Model.FileName, htmlAttributes: new { #class = "form-control dmm-autoresize", #rows = "1" })
</td>
<td>
<a style="color:red; cursor:pointer" onclick="removeDocument(this)">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
<input type="submit" name="UploadButton" value="Upload" id="UploadDocsButton" class="btn btn-primary"/>
}
This is after deleting the row
This is before deleting the row
if you are using form then you have refresh your form, you can also try to name the input types name with array like username[].
<table id="resultTable" class="table table-hover table-bordered table-sm">
<thead>
<tr>
<th>Select</th>
<th>Message Id</th>
<th>Service</th>
<th>Date</th>
</tr>
<thead>
<tbody>
<tr>
<td>
<div class="radio">
<input type="radio" name="selectRow"/>
</div>
</td>
<td>SomeId001</td>
<td>SERVICE1</td>
<td>2019/02/04</td>
<tr>
</tbody>
</table>
<br/>
<button id="proceedBtn" type="button" class="btn btn-light">Proceed</button>
$('#proceedBtn').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
So I what I want is for a message to be displayed, either in a modal or an alert whenever a user tries to utilise the proceed button, but no record from the table has been selected. If a record is selected from the table, the user can use the button, but the button should have no functionality until a record has been selected. Once a record has been selected the proceed button will execute the above javascript. I have been trying to find an example, but as I am not very familiar with javascript and bootstrap, I have not found an example that suits me.
I don't know if I did correctly understood your requirements, but possibly something like this could fit...:
$('#proceedBtn').click(function(){
var selectRowElement = document.getElementsByName('selectRow');
if (selectRowElement.checked) {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
} else {
alert('Please select a row before proceeding');
}
});
The table footer is used to add a new record to the table. After adding by clicking button, the new record is actually added to the table body but up to a second, after that the entire page is reloaded and the inserted record disappears.
Table is created correctly from the prepared data array.
Deleting records works fine.
Where can I have a problem? I don't want to have page reloads.
Table:
<table class="table">
<thead>
<tr>
<th>Nazwa tchnologii</th>
<th>Poziom zaawansowania</th>
<th>-</th>
</tr>
</thead>
<tfoot>
<tr>
<!--Text for new record-->
<th><input type="text" ng-model="nazwaTechnologii" class="form-control"></th>
<!--Button to add-->
<th><button ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button></th>
</tr>
</tfoot>
<tbody id="cialoTabeli">
<tr ng-repeat="technologia in technologie track by technologia.id" id="{{technologia.id}}">
<td>{{technologia.nazwa}}</td>
<!--Button to remove-->
<td><input type="button" ng-click="usunTechnologie(technologia.id)" class="btn btn-danger btn-sm">UsuĊ!</input></td>
</tr>
</tbody>
</table>
Piece of code JavaScript/AngularJS:
var indeks = 5;
$scope.dodaj = function () {
$scope.technologie.push({ 'id': ++indeks, 'nazwa': $scope.nazwaTechnologii});
$scope.nazwaTechnologii='';
};
$scope.technologie = [ //prepared values
{"id":1,"nazwa":"C++"},
{"id":2,"nazwa":"java"},
{"id":3,"nazwa":"Python"},
{"id":4,"nazwa":"C"}
];
To quote MDN :
type
The type of the button. Possible values are: submit: The button
submits the form data to the server. This is the default if the
attribute is not specified, or if the attribute is dynamically
changed to an empty or invalid value.
Means you need to set the button type to button in order to prevent the page from being "submitted" :
<button type="button" ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button>
<div class="btn-group" >
<button type="submit" onclick="display">DISPLAY SCHEDULE</button>
<button type="submit" onclick="open" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<!-- column headers -->
<% Result result = (Result)request.getAttribute("result");%>
<thead>
<tr>
<th id="change"> Transfer Switch </th>
</tr>
</thead>
<!-- column data -->
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td>
<c:out value="${row.Schedule_ID}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
I am trying to change my table header name with button click, so what i did was added a simple java script as follows.
<script>
function display(){
document.getElementById("change").innerHTML="display"
}
function open(){
document.getElementById("change").innerHTML="open"
}
</script>
but since my JSTL result row gets updated for every loop my header changed too thus ending myself with the same header Transfer switch.
Can i solve this using Jquery on load ??, not sure how to use it.
I heard of solutions to make 2 tables but that's not the solution i am looking for since the table is responsive uses bootstrap and also has some buttons in its rows .
Two things I have changed from your code, now it looks fine,
Don't use the JS reserved keyword(s) like open. Use openSchedule() instead.
For better practice, Use span tag for change the text instead of giving id to th.
Your HTML with rendered table rows (Assume I could not able to reproduce jsp values here.)
<div class="btn-group" >
<button type="button" onclick="displaySchedule()">DISPLAY SCHEDULE</button>
<button type="button" onclick="openSchedule()" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<thead>
<tr>
<th><span id="change">Transfer Switch</span></th>
</tr>
</thead>
<tbody>
<!-- Here I assumed two rows, since It's JSP value I couldn't reproduce -->
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Text2</td>
</tr>
</tbody>
</table>
Your Script,
window.displaySchedule = function(){
document.getElementById("change").innerHTML="display";
}
window.openSchedule = function(){
document.getElementById("change").innerHTML="open";
}
See fiddled demo here for live sample.