Ajax-Call triggerd second modal

[tom-lp-at]

Help Wanted

I created a modal form with many tab´s and data table´s.
In the row of a data table i have the possibility to delete the row.
for that i like to open a second modal with the question of really deleting the record.
But if i open the second modal, it does not appear. The dimmer works but no content of the second dimmer is visible. If i click on the dimmer, both (?) modal's closes.

Testcase

the Div´s are outside of any other content:

<div id="users_opt" name="users_opt" style="display:none;" class="ui coupled large modal"></div>
<div id="frage_opt" name="frage_opt" style="display:none;" class="ui coupled second modal"></div>

(coupled is from one of the tests - its the same without them)
the first modal is opend over a Ajax-function in PHP:

$this->response->assign("users_opt","innerHTML",$content);
$this->response->assign("users_opt","style","display:none");
$uebergabe = "$('#users_opt').css('display','');";
$uebergabe .= "$('#users_opt').modal({inverted:true,allowMultiple: true}).modal('show');";
$this->response->script($uebergabe);

the second modal is called from a click on a icon, that calls a PHP-function on the backend:

....
<td class="right aligned" title='{LP_say('Delete')}'>
      <i class='trash icon' onclick="Jaxon.App.Users.rechtpers_delete('{$i.int_id}','{$uid}','{$i.was}')"></i>
</td>
....

in the corresponding Ajax-Funtion:

public function rechtpers_delete($int_id,$uid,$was) {
--- permission check and fill the template with the question ---
$content = $this->ci->smarty->fetch("default_frage.tpl");
$this->response->assign("frage_opt","innerHTML",$content);
$uebergabe = "$('#frage_opt').css('display','');";
$uebergabe .= "$('#frage_opt').modal({inverted:true,allowMultiple:true}).modal('show');";
$this->response->Script($uebergabe);

I try the examples with attach, but i don't want attach based on a button (i like to give some parameters to the callback).
The behaviour attach is only described on DOM-settings, but i cant figure out how i can create a solution based on the examples....
Did someone have a clue what i doing wrong ?
kr Tom

[VanquishedWombat]

I have not looked at your code but I definitely have nested modals in operation in plain JS. Did you set allowMultiple option to True ? I also have a note as follows in my code:
.modal({allowMultiple: <value>, closable: <value>}) // IMPORTANT - must apply these like this as sequence is v important !

[lubber-de]

@tomlp please provide a jsfiddle for easier investigation , we cannot guess out of code fragments especially if it's probably PHP related.
You might create a fixed Json file out of your php ajax response and the static html output of your php backend to be able to simulate your issue without the need to provide real backend code.

[tom-lp-at]

i will try to make my first jsfiddle...

[tom-lp-at]

yes - i made it and it makes exact the wrong thing that makes me crazy :)
https://jsfiddle.net/59Lrka4h/3/
i reduced the code to the - in my opinion - needed parts. may be it could be smaller, but the main part is the call of the JS-function with onclick in the icon....
After the content of #frage_opt is filled an the modal should shown, i see only a shadow in the middle and nothing more....
kr Tom

[tom-lp-at]

by the way : i use fomantic-ui 2.8.4 :)

[lubber-de]

Thanks for the jsfiddle.
You wrapped the second modal in another div which also had the modal class set.
I removed the wrapper and it's working as expected then :) See https://jsfiddle.net/nxsuatwe/

[tom-lp-at]

oh goodness - i copy-paste it from the example and did not recognised the div-modal inside :( the combination of two div-modal is the tricky part ... checked - learned :)
thx for your time !!!
a second question - at the start, all is white in the background. after the dimmer is stopped (after closing the second modal) the background becomes black. ( It does it in my code too :( )
how can i avoid this - or let me better ask : what's the reason to become a black background after the dimmer stops ?
kr Tom

[lubber-de]

That behavior is unfortunately a very old SUI issue. It's covered by #1393 already and needs a bigger change in the code. However, I am closing this issue here, because it's purpose is solved.
Lets continue any "inverted multiple modal dimmer" related discussions in the above mentioned issue to keep the topic at a central place (even SUI has around 6 different issues for the same problem... 🙄 )