i have been using modal links , works expected:
<a data-toggle="modal" data-target="#edit-multiple-70304842829540" data-remote="true" data-type="html" data-method="post" title="edit multiple" href="/contacts/edit_multiple"> <span class="fa fa-pencil-square-o" aria-hidden="true"></span> </a> <div class="modal fade" id="edit-multiple-70304842829540" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog modal-sizer"> <div class="modal-content"> <div class="modal-header" style="overflow: auto;"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">close</span></button> <h2 class="modal-title" id="mymodallabel">edit multiple</h2> </div> <div class="loading" style="display: none;"> <img src="/assets/spinner.gif" alt="spinner"> </div> <div class="modal-target"> ... </div> </div> </div> </div> i click on link , modal displays. however, try option element of select form , modal not display:
<select name="global_filter_id" id="global_filter_id" data-remote="true" data-url="/contacts" data-params="card_position=card&contactable=lead" data-type="html" class="form-control"> <option data-toggle="modal" data-target="filteredit" data-url="/contacts/edit_multiple" data-remote="true" data-type="html" data-method="post" data-params="filterable_type=lead" value="1">edit/delete filter</option> </select> <div class="modal fade" id="filteredit" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog modal-sizer"> <div class="modal-content"> <div class="modal-header" style="overflow: auto;"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">close</span></button> <h2 class="modal-title" id="mymodallabel">edit/delete filter</h2> </div> <div class="loading" style="display: none;"> <img src="/assets/spinner.gif" alt="spinner"> </div> <div class="modal-target"> </div> </div> </div> </div> notice option element has data-toggle='modal' attribute , data-target of option element matches id of modal div. why doesn't modal display when select option element?
bootstrap listening click , tap events trigger opening of modal.
but <option>s invalid targets both events. can test below, never happen:
$(window).on('click tap','option', function(e){ console.log('this never happen!'); })<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>option 1</option> <option>option 2</option> </select>all pointer , touch events off on <option>s. 1 triggers change, on parent <select>.
for more details this, see [2]nd point under browser compatibility on mdn.
a workaround modal data selected option , open modal yourself. looking closer, noticed data params on bootstrap toggle params of xhrhttprequest. you're going make call using params data , parse values in modal on success. console.log()-ed them:
$('#global_filter_id').on('change', function(e){ let data = $(e.target).find('option:selected').data(); if (data && (data.toggle=="modal") && $('#'+data.target).is('.modal')) { console.log(data); // make ajax call here , open modal // while waiting results... $('#'+data.target).modal(); } }) $('#global_filter_id').on('change', function(e){ let data = $(e.target).find('option:selected').data(); if (data && (data.toggle=="modal") && $('#'+data.target).is('.modal')) { console.log(data); // make ajax call here , open modal // while waiting results... $('#'+data.target).modal(); } })<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <select name="global_filter_id" id="global_filter_id" data-remote="true" data-url="/contacts" data-params="card_position=card&contactable=lead" data-type="html" class="form-control"> <option></option> <option data-toggle="modal" data-target="filteredit" data-url="/contacts/edit_multiple" data-remote="true" data-type="html" data-method="post" data-params="filterable_type=lead" value="1">edit/delete filter</option> </select> <div class="modal fade" id="filteredit" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog modal-sizer"> <div class="modal-content"> <div class="modal-header" style="overflow: auto;"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">close</span></button> <h2 class="modal-title" id="mymodallabel">edit/delete filter</h2> </div> <div class="loading" style="display: none;"> <img src="/assets/spinner.gif" alt="spinner"> </div> <div class="modal-target"> </div> </div> </div> </div>
Comments
Post a Comment