Discussion :

[wilfryjules]

Bonjour � tous,

Je rencontre un soucis assez �trange: l'ouverture d'un modal container DYNAMIQUE provoque la perte des ID des composants HTML de la page principale. Par suite, le Javascript associ� � la page plante car les ID des composants HTML ne sont plus reconnu. Par ailleurs, ce modal-container dynamique relance le script principal "site.js".
Je tiens � souligner que le modal container est d�clench� depuis un bouton dynamique situ� dans le champ d'une colonne d'une table, elle m�me situ�e dans un conteneur dynamique (partial-content). J'ai un autre modal container statique (pour l'�dition de personne) qui lui ne lui ne pose aucun soucis lors de son ouverture/fermeture et ne relance aucun script.


Voici ma page principale (PortailFolderDetails.cshtml):



La Datatable est r�cup�r�e ici (via l'url GetPortailDoc):

Voici la classe qui g�n�re la DataTable

Voici le javascript principal (li� au projet).



La fermeture du modal container dynamique associ� au commentaire (Clic sur "Annuler" ou la Croix) fait planter le javascript


l'ID du JSTREE n'est plus reconnu !!!

[wilfryjules]

Alors petite pr�cision, c'est lors de l'ouverture du modal container dynamique que je perds les ID du JSTree.
Avant l'ouverture du modal container, j'ai bien acc�s � la fonction .jstree.
Mais une fois ouvert, j'ai plus acc�s (undefined).

[wilfryjules]

Paradoxalement, j'ai toujours acc�s � la DataTable


NB: j'avais �galement le m�me soucis avec l'ID de la DataTable qui avait saut�.
Cela venait d'une constante javascript red�clar�e.

[wilfryjules]

Le soucis est que lors de son ouverture, le modal-container dynamique, provenant d'une vue partielle (la DataTable) me relance le script "site.js".
Et apparemment, pour �viter que la table ne soit red�clar�e une 2eme fois, il faut imp�rativement que la fonction "loadAsyncContent" s'ex�cute.


J'avais pr�c�demment, cette variable d�clar�e constante dans l'ent�te du script "site.js":


Ce qui faisait que la fonction "loadAsyncContent" n'�tait jamais appel�e.
Et j'avais ce bug:

Et en console l'appel de $('#tableDocument').DataTable() faisait tout sauter (on dirait qu'une nouvelle instance de la table a �t� cr��e � l'int�rieur de l'ancienne).

[wilfryjules]

J'ai donc r�solu ce premier soucis avec une m�thode barbare, en changeant "const" par "var" pour localeDt.
Mais ce n'est certainement pas la bonne solution.
En tout cas, la vue partielle �tant recharg�e (la table avec), ce soucis de "double table" �tait r�solu.
Mais il restait et il reste toujours le soucis du JSTREE dont l'ID a saut�.

Je pense que la bonne question � se poser est de savoir pourquoi le script "site.js" est relanc� une deuxi�me fois.
Ou comment faire en sorte que le modal container dynamique, g�n�r� depuis la table contenue dans une vue partielle, se comporte comme un modal conteneur classique, sans relancer aucun script et en pr�servant toutes les donn�es charg�es dans la page principale.

[wilfryjules]

Le soucis r�sidait dans la vue.
@using (Ajax.BeginForm...) semble r�soudre le pb.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
@model xxxxxxxxxxx.Front.Areas.Portail.Models.PortailEditCommentaireViewModel
@using xxxxxxxxxxx.Front.Ressource;
@using xxxxxxxxxxxxxx.Front.Html;
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Ajout commentaire</h4>
</div>
 
@using (Ajax.BeginForm("UpdatePersonneDocComm", "Home", new AjaxOptions
{
    HttpMethod = "POST",
    OnSuccess = "onSuccessUpdateCommentaire", // Nom de la fonction JavaScript à appeler en cas de succès
    OnFailure = "onFailureUpdateCommentaire",  // Nom de la fonction JavaScript à appeler en cas d'échec
}, new { @id = "formUpdateCommentaire" })) // Donner un ID au formulaire pour la manipulation avec JavaScript
 
{
    @Html.HiddenFor(m => m.Id)
    <div class="modal-body">
        <div class="container">
            <div class="form-horizontal">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
                @{
                    int moduleId = ViewBag.ModuleId;
                }
                <div class="form-group @Html.DisplayDiv(m => m.Commentaire, PortailRessources.Ressources(moduleId))" style="margin-bottom:15px">
                    @Html.LabelFor(m => m.Commentaire, new { @class = "control-label col-sm-4" }, PortailRessources.Ressources(moduleId))
                    <div class="col-sm-8">
                        @Html.TextAreaFor(m => m.Commentaire, new { @class = "form-control" }, PortailRessources.Ressources(moduleId))
                    </div>
                </div>
                <div class="col-xl-12" style="margin-top:40px;">
                    @foreach (var modeleState in ViewData.ModelState.Values)
                    {
                        foreach (var error in modeleState.Errors)
                        {
                            <h5 style="color:red;margin-top:8px;">@error.ErrorMessage</h5>
                        }
                    }
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Valider" />
        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
    </div>
}
<script>
    function onSuccessUpdateCommentaire(response) {
        console.log('Commentaire mis à jour avec succès !');
        $('#modal-container-editCommentaire').modal('hide');
        $('.modal-backdrop').remove();
        //isModalOpen = false;
        reloadTable(); 
    }
 
    function onFailureUpdateCommentaire(xhr, status, error) {
        // Affiche un message d'erreur si la soumission échoue
        alert('Une erreur s\'est produite lors de la mise à jour du commentaire.');
    }
</script>