Modal Container Dismiss ==> Gros Bug Javascript, perte des ID html

Version imprimable

02/09/2024, 10h06
wilfryjules

12 pièce(s) jointe(s)

Modal Container Dismiss ==> Gros Bug Javascript, perte des ID html

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):

Pièce jointe 658854
La Datatable est récupérée ici (via l'url GetPortailDoc):
Pièce jointe 658849
Voici la classe qui génère la DataTable
Pièce jointe 658851
Voici le javascript principal (lié au projet).
Pièce jointe 658852
Pièce jointe 658853

La fermeture du modal container dynamique associé au commentaire (Clic sur "Annuler" ou la Croix) fait planter le javascript
Pièce jointe 658858
Pièce jointe 658861
l'ID du JSTREE n'est plus reconnu !!!
Pièce jointe 658855
02/09/2024, 11h32
wilfryjules

2 pièce(s) jointe(s)

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).

Pièce jointe 658871
02/09/2024, 11h44
wilfryjules

1 pièce(s) jointe(s)

Paradoxalement, j'ai toujours accès à la DataTable
Pièce jointe 658872

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.
02/09/2024, 16h37
wilfryjules

4 pièce(s) jointe(s)

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.
Pièce jointe 658888

J'avais précédemment, cette variable déclarée constante dans l'entête du script "site.js":
Pièce jointe 658889

Ce qui faisait que la fonction "loadAsyncContent" n'était jamais appelée.
Et j'avais ce bug:
Pièce jointe 658890
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).
Pièce jointe 658892
02/09/2024, 16h54
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. :koi:

1 pièce(s) jointe(s)

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

Code:

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>