我想创建一个具有三个text_fields的模式,当提交时,我需要在浏览器上preventDefault (不重新加载页面,以防任何数据被放在模式旁边),然后通过AJAX发送数据到后端,然后手动更新select_2与提交的选项。
更改变量类型、将.trigger(" change ")拆分为新行,或者在追加选项对象后将其置零,似乎不会改变任何事情。
<div class="sampling-register">
<div class="ibox">
<div class="ibox-content">
<form>
<div class="section">
<div>
<%= select_tag :client, grouped_options_for_select(@clients),
:include_blank => 'Wybierz klienta', class: 'select2_demo_2', required: true %>
<button type="button" data-toggle="modal" data-target="#client_modal">
<%= image_tag 'laboratory/add_circle_blue' %>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal inmodal" id="client_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<div class="modal-header">Dodaj klienta</div>
<%= form_for :client, url: clients_path, :html => {:id => "form_add_client"} do |f| %>
<div class="modal-body">
<%= f.hidden_field :laboratory_id, value: current_user.company.laboratory.id %>
<%= f.text_field :name, class: 'form-control', placeholder: 'Nazwa', required: true %>
<%= f.text_field :address, class: 'form-control', placeholder: 'Adres' %>
</div>
<div class="modal-footer">
<button class="discard" data-dismiss="modal">Anuluj</button>
<button class="submit">Dodaj</button>
</div>
<% end %>
</div>
</div>
</div>
<script>
let form = $("#form_add_client");
let submitBtn = form.find(".submit");
let client_select_tag = $("#client");
form.on("submit", function (event) {
event.preventDefault();
let name = $('#client_name').val();
let client_address = $('#client_address').val();
let laboratory_id = $('#client_laboratory_id').val();
$.ajax({
url: '/clients',
method: 'POST',
dataType: "json",
data: {
client: {
name: name,
address: client_address,
laboratory_id: laboratory_id
},
}
})
.done(function (result) {
if (result.error) {
toastr["error"](result.error);
} else {
let option = new Option(result.data.name, "{lab_client_id: " + result.data.id + "}", false, true);
client_select_tag.children().eq(2).append(option).trigger('change');
$('#client_modal').modal('hide');
toastr["success"]("Klient dodany poprawnie");
}
})
})
</script>
问题是,它确实可以工作,但有时不会(就像每三次尝试一次),即使它工作一次,那么在我重新加载页面之前,其他每一次尝试都是失败的。重新装填后,看起来又像掷硬币一样。它确实会在每次选择时触发附加选项,但实际上附加到选择列表的情况并不经常发生。
转载请注明出处:http://www.hbbinz.com/article/20230526/2140213.html