CheckAll checkbox for Datatable with Search - javascript

In the table (that show items from database) we have a column to delete items and checkbox to select them all.
It's done by this simple code :
Here is example of html for delete checkbox cell :
<td>
<i class="far fa-trash-alt"></i>
<input type="checkbox" name="delete" value="2" id="delete_item2" class="delete_item">
</td>
And here is javascript part :
$('#checkAll').click(function() {
if($('#checkAll').is(":checked"))
$('.delete_item').prop('checked', true);
else
$('.delete_item').prop('checked', false);
});
It works globally fine, except that we also use DataTable functionalities and especially Search function.
The problem is that with actual code user could search some lines of table, but if he click "Check All" it will select (and so probably delete) all the rows of the table (even not visible).
Normally it seems easy to fix, we just need apply $('.delete_item').prop('checked', true); only for visible rows (probably via {search:'applied'}) but I could not figure how to do it.
Update :
As supposed #mark_b in the comments the behavior should be different as I explain.
After testing on fiddle and checking once again the application js code, I found that it's true. The real application code is a little bit different from one that I put in the question example.
Once I remove this little difference, the behavior become correct. The "Check All" checkbox select only visible row.
So the problem is solved.
I don't know if this question should be removed... For the moment I leave it here with this Update.

Related

Bootstrap-table: Prepopulate Column-Select button: a few selected, most unselected

I want to render a bootstrap-table page, and the dataset has quite a few columns. However on page-load I want to show only a few (2 or 3) columns, but have the other columns "in reserve".
Here is a GUI mockup to show what I mean:
Collapsed
Button Expanded:
Here I have clicked on "Toogle all" to deselect all, then selected the first 3 manually.
I'd like to have the 3 selected on page load. Is there alaready a setting or an option that I can use to acheive this?
Users should see a simple table, and only power-users will click on the button and add more, then do horizontal scrolling, change column selections etc
Answering my own question, because I cannot really revoke or delete it.
This question is a duplicate of "https://stackoverflow.com/questions/41446362/hide-columns-in-bootstrap-table-at-startup/41488928#41488928" from 2017 .
There question has a few alternative answers already.
For my use-case it was sufficient to follow the accepted answer. It recommends to put these HTML data-attributes into the tr of the thead element:
<td data-visible="false" ...>
This is the simplest solution and works well for small tables, and if you have absolute control over the table-generation- and column-selection process.
Columns disabled this way will still be available with the "Select columns" button created with data-show-columns="true" and data-show_columns-toggle-all="true".
It might not work so well in more complicated scenarios, e.g. when you need to access the hidden columns via the DOM. For details see "https://stackoverflow.com/questions/41446362/hide-columns-in-bootstrap-table-at-startup/41488928#41488928"

angular grid selected checkbox scroll issue

I have a column with a celltemplate of checkbox. It can be selected/unselected, which works fine as correct events are fired everytime. However, when I select multiple checkboxes on the grid and start scrolling up and down, the checkboxes seem to be scrolling as well. That means that they are not fixed to the rows they are checked against, and get lined up against a wrong row.
This issue has already been reported here a couple of years ago. But the solution posted, does not solve the problem.
Here is a plunker link to demonstrate the issue. Anyone had any similar issue or a workaround to this?
You are not binding the checkboxvalue to your dataset. Thanks to your provided Plunker I can provide an updated Version that works.
The ng-model is bound to the gridscope and has a private scope for each row, so its fine to use somethnig generic
ng-model="foo" ng-change="row.entity.active = foo"
You can use active == 1 but I used true/false for convenience
ng-checked="row.entity.active" //since foo becomes true or false on click
If you want more complex checks, you can use their appScopeProvider.

Clear all option select entries by clicking radio button [duplicate]

This question already has an answer here:
Reset values from jQuery Mobile
(1 answer)
Closed 8 years ago.
I've been trying all day to figure this out, and it seems simple enough, but how can I clear (not remove) all the selections from a group of select option drop downs at once? I want them set back to their default state when the div was first loaded. I can't use .reset because there will be other information in the form that I need to gather, but I need to allow users to change their minds without penalty (having to fill the form out all over again).
This SO question shows you how to remove the options which isn't what I need.
This SO question seemed to give the answer, but I haven't been able to get it to work.
And this jQuery bug entry seems to imply that it can be done with .empty(), but that doesn't work either.
This SO question lists a bunch of different ways to do exactly what I want, and I've tried all of them (see code below), none worked. I'm obviously missing something.
Here's a JSfiddle with the problem.
How to view the problem in the fiddle:
At Repair Status, click on Repaired; two new inputs are shown, a set of radio buttons and then select-option drop downs for each. Under Category, choose Part Quality, then choose any item from the drop down. That choice should now show up in the drop down. Now click on any one of the other Categories, and then back to Part Quality. The same choice you just made will still be shown instead of the default of "Select Part Quality Reason", which is what I want.
My attempts have focused largely on the Part Quality radio button for proof of concept, but the production code needs to clear all of the entries from all of the option-selects in the form except the Reporting Department drop down. Preferably I can use a generic selection with a $(this) construct, but that's not required. Something like this:
$("select option:selected").each(function () {
$(this).val(''); //doesn't work
});
Requirements:
When the user chooses a different radio button (Category), all of the option select drop downs will be reset to their default states. That way when the user makes their final choice & hits Submit, there are no extraneous entries. When they change their choice of Category, the underlying code must preserve the Reporting Department drop down choice.
I can then gather all the bits and pieces of their choices to be placed into a JSON string for an AJAX call to my code-behind and insert the data into a MySQL database.
I don't care if the answer uses jQuery or just plain JavaScript, I can use either happily.
Here's a bunch of attempts that haven't solved it yet:
$("#formEvent_repair input[type='radio']").on('change', function () {
//$("#select_part_quality_repair option:selected").attr("selected", false);
//$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
//$('#select_part_quality_repair').attr('selectedIndex', '-1');
//$('#select_part_quality_repair').val(null);
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//$("select option:selected").val([]);
//$("select option:selected").html('');
//$("select_part_quality_repair").html('');
$("select_part_quality_repair").append().html('');
$("select option:selected").each(function () {
console.log("Emptying select options");
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//#select_part_quality_repair-button > span
//$("#select_part_quality_repair").prop('selectedIndex', -1);
//$("#select_part_quality_repair").find('option').attr("selected", false);
//$("#select_part_quality_repair option").attr("selected", false);
$("#select_part_quality_repair option:selected").attr("selected", false);
console.log(this);
$(this).val([]);
});
Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.
$('#select_part_quality_repair').val('').selectmenu('refresh');
This will deselect any option and then refresh the layout to show the change..
For radio buttons you set in code use
$(<radio-button-selector>).checkboxradio("refresh");
You clear a dropdown selection like this:
$("#select_part_quality_repair").val("");
That will clear the selection without removing the members.
Also, this line in your code is improperly formed:
$("select_part_quality_repair").append().html('');
You forgot to put the "#" before the element ID, as is required by JQuery. That line won't help you anyway, so you should not even bother with it.
Cheers,
-=Cameron
Unchecked all radio button
$(".clear").click(function(){
$('input:radio').each(function () {
$(this).removeAttr("checked");
});
});
EDIT 2 :
Unselected all options
$(".clear").click(function(){
$('select').each(function () {
$(this).removeAttr("selected");
});
});

updating a dropdown boxes contents when clicking a checkbox using javascript

I am trying to work out the best way to get this to work. What i am trying to do is as follows:
i have a page which 10 checkboxes on it. I want to have a dynamic drop down which is populated with a list of server names when a checkbox is clicked
Example:
<tr>
<td>
<input id="site4" name="list[]" type="checkbox" value="BERT">
<label id="site4l">BERT</label>
</td>
</tr>
<tr>
<td>
<input id="site5" name="list[]" type="checkbox" value="BOB">
<label id="site5l">BOB</label>
</td>
</tr>
I would also have on the other side of the page a select dropdown which i want to be populated when a checkbox is checked, i would also like the values to be removed from the select dropdown if the checkbox has been unchecked.
I thought about something like this
setting a hash in javascript
serverList["BERT"] = ["server1", "server2", "server3", "server4", "server5"];
serverList["BOB"] = ["server8", "server9", "server10", "server11"];
and then i am a little stuck on how i can build the list and display. I have seen a few jquery pluggins which group items in a checkbox which look good.
Any help would be appreciated.
Many thanks Mithandra
Do you have any code to work on? To just work out of the blue is a bit hard.
In general: What you are looking for is the change event (http://api.jquery.com/change/).
I personally would add a change event to all the checkboxes and if unchecked just remove (http://api.jquery.com/remove/) all coresponding entries, if checked then just append them (http://api.jquery.com/append/) to your dropdown.
Hope this helps.
Thanks for the reply.
I guess being from a perl background what i was looking to do is say i have various checkboxs with the different names example of one might be BOB
i would have some sort of java array like
fields[BOB] = [ array of servers ]
when i checked the box it would then go and look up the list of servers using the key of BOB and then populate the dropdown box with the list of servers.
The way I was thinking of doing this is to build some sort of hash within java from which a select dropdown could be produced. so in the event that the user unchecked a box that they had already checked the key and subsequent values would be removed from the hash.
i am not really sure on how to achieve this within Java as i only dabble with it.

How to detect change in form if added a new row in prime faces datatable

I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/
This plugin is working fine but there is need for customization in many scenarios, one like below
I have a page like Item groups which consists of three panels.
LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group
Now Assume I have a datatable
<p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="10,50,100">
</p:dataTable>
To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel
listOfItems.addAll(selectedItems);
I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.
Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.
How to find a change in this scenario.
Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:
You can have a hidden input:
<h:inputHidden id="hiddenInput" />
And in your assign button oncomplete you mentioned you can add:
oncomplete="$('#hiddenInput').val('dirty').change();"
This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).
And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:
oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"
Also it would be good to add some checking or to do that at the end of the action (link).
NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.

Categories

Resources