I have the following:
html:
<div id="modal-form" class="modal fade" tabindex="-1" aria-hidden="true" style="z-index: 0;">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="margin-left: -20%; margin-right: -20%;">
<div class="modal-body">
<div class="row">
<!-- true -->
<div class="ibox-content">
<% path = if params[:action] == 'edit'
(edit_client_company_egress_path(@client, @company, @egress))
else
new_client_company_egress_path(@client, @company)
end
%>
<%=
form_tag(
path, method: :get, html: { class: 'form-horizontal' }
) do
%>
<div class="col-sm-12">
<h3 class="text-center">Buscar Documentos</h3>
<br>
<div class="form-group">
<%= label :document_bring_ruc, "RUT Proveedor o RUT Trabajador", class: "col-lg-2 control-label" %>
<div class="col-lg-10">
<%= text_field_tag :ruc, nil, class: "form-control document-bring-ruc" %>
</div>
</div>
<br>
<br>
<div class="form-group">
<%= label :document_date_since, 'Fecha de Documento Desde', class: 'col-lg-2 control-label' %>
<div class="col-lg-4">
<%=
text_field_tag :document_date_since, nil,
value: Date.today.at_beginning_of_month.strftime('%d-%m-%Y'),
class: 'form-control datepicker-report readonly-input',
id: 'document-date-since',
readonly: true
%>
</div>
<%= label :document_date_until, 'Fecha de Documento Hasta', class: 'col-lg-2 control-label' %>
<div class="col-lg-4">
<%=
text_field_tag :document_date_until, nil,
value: Date.today.at_end_of_month.strftime('%d-%m-%Y'),
class: 'form-control datepicker-report readonly-input',
id: 'document-date-until',
readonly: true
%>
</div>
</div>
<br>
<br>
<div class="form-group">
<%= label :due_date_since, 'Fecha de Vencimiento Desde', class: 'col-lg-2 control-label' %>
<div class="col-lg-4">
<%=
text_field_tag :duet_date_since, nil,
placeholder: Date.today.at_beginning_of_month.strftime('%d-%m-%Y'),
class: 'form-control datepicker-report due-date-since readonly-input',
readonly: true
%>
</div>
<%= label :due_date_until, 'Fecha de Vencimiento Hasta', class: 'col-lg-2 control-label' %>
<div class="col-lg-4">
<%=
text_field_tag :due_date_until, nil,
placeholder: Date.today.at_end_of_month.strftime('%d-%m-%Y'),
class: 'form-control datepicker-report due-date-until readonly-input',
readonly: true
%>
</div>
</div>
<br>
<br>
<div class="form-group">
<%= label :payment_date_since, 'Semana de Pago Desde', class: 'col-lg-2 control-label' %>
<div class="col-lg-4">
<%= select_tag :payment_date_since,
options_for_select([]),
class: 'form-control payment-since',
style: 'width: 100%'
%>
</div>
<%= label :payment_date_until, 'Semana de Pago Hasta', class: 'col-lg-2 control-label' %>
<div class="col-lg-4">
<%= select_tag :payment_date_until,
options_for_select([]),
class: 'form-control payment-until',
style: 'width: 100%'
%>
</div>
</div>
<br>
<br>
<div class="form-group">
<%= label :bring_document_money, "Moneda", class: "col-lg-2 control-label" %>
<div class="col-lg-4">
<%=
select_tag :bring_document_money,
options_for_select(
Invoice.money.map { |money, code| [money, code] }
), class: "form-control bring-document-money"
%>
</div>
<%= label :bring_document_type, "Tipo Documento", class: "col-lg-2 control-label" %>
<div class="col-lg-4">
<%=
select_tag :bring_document_type,
options_for_select(
Invoice.document_types.map { |dt, code| [dt, code] }
),
class: "form-control bring-document-type",
multiple: true,
style: 'width: 100%'
%>
</div>
</div>
<br>
<br>
<div class="form-group">
<%= label :documents, "Documentos", class: "col-lg-12 control-label" %>
<div class="col-lg-12" style="margin: 0 0 10px 0;">
<%= select_tag(
:documents,
options_for_select([]),
multiple: true,
class: "form-control dual_select documents-selected",
) %>
</div>
</div>
<%= hidden_field_tag :invoices, nil, id: 'modalInvoices' %>
<%= hidden_field_tag :renditions, nil, id: 'modalRenditions' %>
<%= hidden_field_tag :tax_forms, nil, id: 'modalTaxForms' %>
<%= hidden_field_tag :name, nil, id: 'modalName' %>
<%= hidden_field_tag :authorizer, nil, id: 'modalAuthorizer' %>
<%= hidden_field_tag :document_date, nil, id: 'modalDocumentDate' %>
<%= hidden_field_tag :posting_date, nil, id: 'modalPostingDate' %>
<%= hidden_field_tag :money, nil, id: 'modalMoney' %>
<%=
hidden_field_tag :company_account_id,
nil, id: 'modalCompanyAccount'
%>
<%= hidden_field_tag :exchange_type, nil, id: 'modalExchangeType' %>
<%= hidden_field_tag :transfer_number, nil, id: 'modalTransferNumber' %>
</div>
<div class="col-sm-12">
<p class="text-center">
<%= submit_tag 'Seleccionar', class:"btn btn-block btn-primary"%>
</p>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
js
$(document).on('turbolinks:load', function () {
if ($('body').attr('data-resource') == 'incomes') {
$(IncomeForm.setup);
}
});
var IncomeForm = {
bringDocuments: function(){
var pathArray = window.location.pathname.split('/')
var client = pathArray[2]
var company = pathArray[4]
var ruc = $('.document-bring-ruc').val()
var document_date_since = $('#document-date-since').val()
var document_date_until = $('#document-date-until').val()
var due_date_since = $('.due-date-since').val()
var due_date_until = $('.due-date-until').val()
var payment_since = $('.payment-since').val()
var payment_until = $('.payment-until').val()
var bring_document_money = $('.bring-document-money').val()
var bring_document_type = $('.bring-document-type').val()
$.ajax({
type: "GET",
dataType: "json",
url: '/clients/'+ client +'/companies/'+ company + '/api/sell_invoices/income_required',
data: {
ruc: ruc,
document_date_since: document_date_since,
document_date_until: document_date_until,
due_date_since: due_date_since,
due_date_until: due_date_until,
payment_since: payment_since,
payment_until: payment_until,
bring_document_money: bring_document_money,
bring_document_type: bring_document_type
},
success: function(data) {
var nonSelected = $('#bootstrap-duallistbox-nonselected-list_documents\[\]')
var selectedSelect = $('#bootstrap-duallistbox-selected-list_documents\[\]')
var documentsSelect = $('.documents-selected')
nonSelected.empty()
if (data.sell_invoices) {
data.sell_invoices.forEach(function(item) {
var text = item.correlative + " - " + item.rut + " - " + item.document_type + " - " + item.money
var option = '<option value="' + item.id + '" data-type="invoice">' + text + '</option>'
nonSelected.append(option)
})
nonSelected.bootstrapDualListbox('refresh', true)
}
selectedSelect.bootstrapDualListbox('refresh', true)
}
})
},
setup: function () {
$('.dual_select').bootstrapDualListbox({
selectorMinimalHeight: 160
})
$('.payment-since, .payment-until, .bring-document-type').select2()
$('#bring-documents').on('click', function() {
IncomeForm.bringDocuments()
})
$('#document-date-since, #document-date-until, .due-date-since, ' +
'.due-date-until, .payment-since, .payment-until, ' +
'.bring-document-money, .bring-document-type, .document-bring-ruc').on('change input', function() {
if (!updatingOptions) {
IncomeForm.bringDocuments()
}
})
}
}
As you can see I have a form, which is in a modal, which is for selecting documents, which we can manage by varying the different filters, the problem I have is the following, when I select some element from the duallistbox and then make any changes to the filters, both box1 and box2 are emptied, the nonselected and the selected ones, I need them to remain, only box1 is updated, when trying the way I show, box1 is never filled, if I remove this: selectedSelect.bootstrapDualListbox( ‘refresh’, true)
It brings me information, but when I select it everything disappears, I don’t know what could happen or what the solution could be, does anyone know?
New contributor
Javier Mejías is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.