Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reset/clear all filters (select2, select, input) in the x-editable table?

I want to have a reset/clear button for all the filters in use, but I can't figure out what to fire off on on-click event tied to that button... for example:

enter image description here

What would I have to fire off and/or attach & pass to what in order to reset all these select2, select and input fields and restore all the filters to null/empty values?

like image 985
Crazy Serb Avatar asked Aug 18 '15 23:08

Crazy Serb


3 Answers

On click of your button, all you need is to reset the value of select2.

See this programmatic way to reset it https://select2.github.io/examples.html#programmatic

All you need for your button to reset all the select2 inputs instead of 1 as shown in the example.

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').val(null).trigger("change");
    $('#yourSecondSelect2').val(null).trigger("change");
    ....
});

Just in case, you're using 3.5.x version, then there's small change as seen here http://select2.github.io/select2/#programmatic

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').select2("val", "");
    $('#yourSecondSelect2').select2("val", "");
    ....
});

For resetting other values in x-editable you can follow this x-editable resetting fields.

There's always a jQuery way to clearing everything in a form -

$('#formName')[0].reset();
like image 136
Bikas Avatar answered Nov 02 '22 23:11

Bikas


This worked for me

It will reset all the select2 selected options when form is reset you can initiate this on click button event or any other event according to your requirements.

$("#id").val(null).trigger("change"); 
like image 4
gaurav Avatar answered Nov 03 '22 00:11

gaurav


try this below code to reset everything. found it on https://vitalets.github.io/x-editable/docs.html#newrecord

<button id="reset-btn" class="btn pull-right">Reset</button>


<script>
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null)  //clear values
    .editable('option', 'pk', null)          //clear pk
    .removeClass('editable-unsaved');        //remove bold css

$('#save-btn').show();
$('#msg').hide();                
});
<script>
like image 1
J Santosh Avatar answered Nov 02 '22 23:11

J Santosh