Display Bootstrap Modal for Ext Search Fields modal-lookup-dialog

PHPMaker General Discussion (PHPMaker)
1

HiI have a page that uses an Extended Search field with a select dropdown that uses a modal lookup dialog, so that when it is clicked an ew-modal-lookup-dialog comes up for the user to select from the list to filter the page with a search.If there is no search on that page (if (!$_GET[‘x_MyFieldName’]) I automatically bring up the extended search ew-modal-lookup-dialog to save the user clicking it.In PHPMaker 2021 I used jquery by emulating the click on the lookupup button

$(“button.ew-lookup-btn.btn.btn-default”).click();But in PHPMaker 2022 there is no button. I tried of the $(select#x_Fieldname).click() for the Extended Search query field, as well as the various div and span layers on this but couldnt get the click to bring up the lookup dialog even though manually clicking worked fine.I then tried to bring up the bootstrap dialog directly with javascript vaious ways going through the documentation at
https://getbootstrap.com/docs/5.0/components/modal/eg.

 var myModal = new bootstrap.Modal(document.getElementById('ew-modal-lookup-dialog'), { keyboard: false })
 myModal.show();

In this case I displayed a blank modal.What way can I auto-trigger the Extended Search Fields Lookup Dialog to appear?
What element do I need to send a click to to emulate clicking on the extended search field?
How can I directly bring up the populated lookup modal via javascript? (rather than emulating the click…)

2

// Opening Lookup Dialog for an Extended Search field in PHPMaker 2022:
$(‘#x_MyFieldname’).select2(‘open’);This is probably specific only to select inputs.

3

Is working for me…I am using it to open an Extended Search select field when no search has been done yet, where the search field is “MyFieldname”.
Below is some more complete code// List Page - Client Scripts
var ew.my_PHP_MyFieldname_SearchParam = ‘<?=CurrentPage()->MyFieldname->AdvancedSearch->SearchValue?>’; // create JS variable that shows if a search is saved inside PHP but not showing in the GET URL
var ew.my_GET_MyFieldname_SearchParam = ew.currentUrl.searchParams.get(‘x_MyFieldname’); // easy access var for matching if search in the GET Query variable// once document is loaded run this
$(document).ready(function(){
if((!ew.my_GET_MyFieldname_SearchParam && !ew.my_PHP_MyFieldname_SearchParam){ // only open the search dialog if no search is already done
$(‘#x_MyFieldname’).select2(‘open’);
}
});

4

Also if you dont want the first thing in the select list automatically selected by the browser then you can stick a dummy option in there when nothing is selected…$(“”, { value: ‘’, selected: true }).prependTo(“#x_MyFieldname”);

5

And if you want something to happen once you have selected something and close the select box (like modify the title of the current page…)// Client List Page Startup Scripts
$(‘#x_MyFieldname’).on(‘select2:close’, function (e) {
var $selectedField = $(‘#x_MyFieldname’).find(‘:selected’);
$(‘h1.m-0 small.text-muted’).html($selectedField.val()); // alter small subtext in H1
$(‘#btn-submit’).submit(); // automatically click search
});

6

Still trying to figure out how to change the select2 default options (without hand modifying template code…)Tried like this but didnt seem to work…

7

You may read Select2 docs → Add, select, or clear items.

8

I’ve noticed that if you are calling select2(‘open’) automatically, even if you are calling it with $(document).ready you will still want it very last thing in your Startup Scripts