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>