Hi,
I have a form. It has a detail form linked to a grid application where all features are activated. In the grid application, new record would open in modal and this is where im having the problem whenever the select fields use Select2. select field do not show the lists to choose from.
[ATTACH=JSON]{“data-align”:“none”,“data-size”:“medium”,“data-attachmentid”:86542}[/ATTACH]
Yep modal in SC can break Select2 elements.
If you can, change the grid so that the form is not open as modal.
Another workaround is to inject JS code to make the form reload once on load. Before doing that, manually test that a reload fix the issue (in Chrome you can right click on the modal form and select “reload frame”)
Hi, I have the same exact issue (it only happens with chrome)
can you tell me what JS code to inject in the OnLoad event for the modal?
Use this:
https://stackoverflow.com/a/28479618
As per any JS code that needs to interact with window elements, it must be executed when the window has finished loading, so you have to put it where the “…” are in the code below
?>
<script>
window.onload = function()
{
.......
}
</script>
<?php
Note that the “reload” string is just an identifier.
I’m not 100% sure, but I think its’ safer if it’s unique, so if you use this code in more than one app you can customize it per app; e.g. using or adding the app name in it, instead of just ‘reload’.
so let me get this straight, if I understood correctly, let’s say I have a Grid application called “Grid_Items”, and on that grid there is a button that opens a modal to add a new record, the app that gets called in the modal is a Form called “Add_grid_item”.
So in my case, I should edit my “Add_grid_item” Form, which is the one opened in a modal,
and there add under Events -> OnLoad, this:
?> <script>
window.onload = function() {
if (!localStorage.getItem("Add_grid_item")) {
localStorage.setItem("Add_grid_item", "true");
location.reload();
} else {
localStorage.removeItem("Add_grid_item");
}
}
</script>
<?php
so instead of “reload” string, I swap it with the name of the Form app that gets loaded in the modal?
Thank you
The string can be whatever you like, my suggestion is to use a unique string per app so that’s why I’m using the app name.
E.g. you coud use “reload_Add_grid_item”. Or just the app name as you did.
Also note that what makes the JS code work at the right moment is the embedding in the JS window.onload event, so you could add that JS code event is the onScriptInit SC event instead of the SC onLoad event and it would still work
If you don’t want this reload event to occur when the form is not run as modal, you could embed all your code above in a check for a passed var and act accordingly.
E.g. pass “force_reload” = 1 when open as modal and pass nothing when open not as modal
if ([force_reload])
{
?>
<script>
......
</script>
<?php
sc_reset_global([force_reload]);
}
thank you again for the help, I have one more question, you say the string can be whatever I like, but somehow it needs to point to my modal right? I mean, the string I put there must be referenced somehow, I thought this was done by putting a string that matches the application name, so the script knows what part to reload? If I just put a random string, how will it know what o reload? thank you again
That code has no notion of which “part” to reload, it will reload that same page where it’s run.
Being run inside an iframe (the modal form), it’s the iframe (the modal form) that will be reloaded.
The string can be a random string. It’s needed by that piece of JS code only and with no reference to anything else outside of it.
It’s needed so that the JS code won’t loop reloading itself (the page) forever.
As you can see, before reloading it will first check that an item with that string name is not true. At first run it won’t match and the item will be created and “location.reload()” will be executed.
But when the iframe page is reloaded, the JS code will be executed again, potentially looping forever.
But since this time the named item exists, the form will not reload again a second time (preventing the loop) and it will instead just delete the item.
The item is deleted so that when the form is loaded again manually (not by the code itself) the code-triggered reload can be executed again.
Also, maybe I’m too paranoic here and using the same string (e.g. “reload”) in more than one app won’t cause any issue.
that was super clear, thank you very very much for the help, appreciete it
Thank you very much for the input. unfortunately for me, i have dozens of master-detail form apps so it’s not practical for me to do that. maybe i’ll just wait for an update from SC to fix this…
I finally had the chance to try this workaround but I have a problem!
Basically when I put that script on the onLoad event of the application that gets loaded in the modal, what happens is:
I click from my main grid a button called “new item”, which opens the modal with my form application that has the onLoad event
But after I added this script on that event, when I Click “new item” button, it opens the modal for 1sec or less, and it closes it right away, then if I click again it will stay open! But the first time you click it will open and right away close the modal!
And if you wait let s say more than 10seconds between click, it will again open and right away close it!
The only way to keep it open is to click on the button, the modal will open and close, then you click right away again on the button, now the modal will stay open!
Which broswer are you using?
I have never seen that behavior with Crome.
Also, try moving the JS code to the SC onScriptInit event, removing it from the SC onLoad event.
I m using Chrome as well, and I tried putting the JS code on onScriptInit and also on onApplicationInit but the behaviour is always the same.
To recap, I have a Grid that shows all the records,
then I have a button (custom button) called “New record”, so when clicked, it will open a form in a modal, where you can add a new record, and when you save the modal will close and the new record will be displayed in the grid.
This works really good in local, but in production, I will have the bug on the Select2 fields.
So as you suggested, I put this code:
?> <script>
window.onload = function() {
if (!localStorage.getItem("Add_grid_item")) {
localStorage.setItem("Add_grid_item", "true");
location.reload();
} else {
localStorage.removeItem("Add_grid_item");
}
}
</script>
<?php
on the FORM (the one that gets opened in the modal when you click the button on the grid) and I tried the 3 events mentioned above (onSCript, onLoad, onAppInit)
what happens is, as soon as you click the button, the modal will open and close right away after less than a second.
But if you click right away again the button, the modal will stay opened.
If you click only once, when it closes right away, then you dont click for at least 10 seconds, it will autoclose again, the only way to keep it open is to click a second time on the button in less than 10 seconds from the first time you clicked and the modal got closed right away!
Maybe your issue is different than the one I solved with this workaround.
First of all, I get the same issue in both dev and in production, you get it only in production, right?
Second, before trying to use this workaround you should check if a manual reload of the frame in chrome fix it. Did you try it and did it fix ths select2 display issue? And when manually reloading the frame, do you have any of the weird effects you have with the JS code?
So I’ve been doing some testing, I don’t get this issue at all, neither in production or locally, but other members of the team are getting it in production! We all use chrome, and yes, a reload would fix it! And a reload is not even necessary, as soon as you click on the ADD button to add the record, it will says that required fields are missing (the broken dropdowns), then as soon as that message pops up, the dropdown are fixed, so there a reload happens when you click ADD and it fixes the problem.
This doesn’t happen with firefox or edge, only Chrome and only for some people, not for every machine we use
Is there any code you wrote in that app that is trying to do anything with the select2 fields with issues?
no, besides an automatic lookup to fill the dropdown, there is no additional code! We did more tests, and on most computers it works without issue, only a few have this problem! and it only with select2, but we need that one as the dropdown has around 200 entries, so a search option inside the dropdown is needed!
But if this is a bug I guess it will be fixed in a future update, for now it’s not deal breaking as only a few computers experience this
I am having a similar issue, as is someone else, see my issue here:
And someone who had a similar issue and resolved it by updating the production environment: