Discussion :

[AMP29]

Bonjour,

J'appelle une vue partielle sur ma page.
Cette vue comporte un script en entête, pour gérer des variables issues de la BdD et définir le css en conséquence.

Cela fonctionnait bien. Depuis que la vue est affichée comme vue partielle, ce script n'est plus exécuté.

La vue partielle (résumée, c'est une itération) :

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
<script>
    // ---------- S T A T U T ---------------
    var Check_Statut = function (ValReserve, id) {
        var StatutText = "statut_" + id;
        var myBool = (ValReserve === 'true');
        if (myBool == false) {
            document.write("<i class='fa-solid fa-lock-open' id='lock_" + id + "' style='margin-left: 5px; cursor: pointer;color:black; ' title='Réserver cet article' onclick='Reserver(true," + id + ")'></i>");
            document.getElementById(StatutText).style = "color:green;font-weight:600;font-size: 12px;";
        }
        else {
            document.write("<i class='fa-solid fa-lock' id='lock_" + id + "' style='margin-left: 5px; margin-right: 4px; cursor: pointer;color:coral; ' title='Annuler la réservation' onclick='Reserver(false," + id + ")'></i>");
            document.getElementById(StatutText).style = "color:coral;font-weight:600;font-size: 12px;";
        }
    };
</script>

    @foreach (var item in Model)
    {

...(table, tr, td, etc...)

                <td class="ligne-table">
                    <i class="fa-solid fa-marker" style="margin-left: 5px;cursor: pointer;" title="Modifier l'article" href="/Home/ArticleDetail/@Html.DisplayFor(modelItem => item.Id)"></i>
                    <script type="text/javascript">Check_Statut('@Html.DisplayTextFor(modelItem => item.Reserver).ToLower()', '@Html.DisplayFor(modelItem => item.Id)')</script>
                    <i class="fa-regular fa-trash-can" style="margin-left: 5px;margin-right: 5px;cursor: pointer;" title="Supprimer l'article"></i>
                </td>
...
}

Je précise le problème.

Quand la vue partielle est appelée via

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
        @await Html.PartialAsync("_ArticlesListPartial")

Le script contenu dans la vue partielle s'exécute correctement.

C'est quand j'utilise une fonction Ajax que cela ne fonctionne plus.

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
 
        function LoadDetailPartialView(MenuName) {
            if (typeof MenuName == 'undefined') MenuName = 'ListArticles';
            $.ajax({
                url: '@Url.Action("ChangeVendeurPartial", "Articles")',
                type: 'GET',
                cache: false,
                data: { Menu: MenuName }
            }).done(function (result) {
                if (result.redirectTo)
                    do{
                        // Attend que la valeur de 'result' soit chargée, car 'ChangeVendeurPartial' est asynchrone.
                    } while(result.lenght < 1);
 
                MainPartial.innerHTML = result;
 
            });
        };

Cela a peut-être (probablement) un lien avec l'utilisation de 'innerHTML'. que j'utilise pour "charger" la 'div'.
'MainPartial.html' (souvent rencontré à la place dans mes recherches) ne fonctionnait pas du tout pour moi.

---

Dans ma recherche j'ai vu un post dans lequel un gars disait avoir résolu le problème.
Sauf qu'il ne détaille pas assez bien sa solution pour moi, et je n'y comprends rien : https://stackoverflow.com/questions/...21735#79321735

I got the answer. All I needed to do was to add new{@class = "ddlClass'} and new {@class = "ddlType"} to the Partial. Then I just copied the script to the Partial and changed the references from referencing the Id to referencing the new classes as below:

---

Merci pour votre aide

[AMP29]

Point particulier, je génère dans mon script un id html dynamiquement en fonction de l'id de l'article de ma BdD.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
id='lock_" + id

[AMP29]

Pour plus de descriptions et de codes, voir dans ce forum : https://www.developpez.net/forums/d2...le-selon-menu/

Ce sujet en est la suite, une fois le problème de "menu chargeant une vue partielle" résolu.

A priori, .html() exécute le script, tandis que .innerHTML ne l'exécute pas.

Quand j'utilise ceci dans ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(MainPartial).html(result);

Cela charge une page avec uniquement la phrase :

Réserver cet article

Cette phrase est le dernier 'Title' contenu dans le script de ma vue partielle:

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
<script>
    // ---------- S T A T U T ---------------
    var Check_Statut = function (ValReserve, id) {
        var StatutText = "statut_" + id;
        var myBool = (ValReserve === 'true');
        if (myBool == false) {
            document.write("<i class='fa-solid fa-lock-open' id='lock_" + id + "' style='margin-left: 5px; cursor: pointer;color:black; ' title='Réserver cet article' onclick='Reserver(true," + id + ")'></i>");
            document.getElementById(StatutText).style = "color:green;font-weight:600;font-size: 12px;";
        }
        else {
            document.write("<i class='fa-solid fa-lock' id='lock_" + id + "' style='margin-left: 5px; margin-right: 4px; cursor: pointer;color:coral; ' title='Annuler la réservation' onclick='Reserver(false," + id + ")'></i>");
            document.getElementById(StatutText).style = "color:coral;font-weight:600;font-size: 12px;";
        }
    };
</script>

[AMP29]

Je viens documenter la résolution du problème.

Premièrement, dans la fonction ajax, l'instruction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

MainPartial.html = result;

que je trouvais tout le temps sur le net ne fonctionnait pas pour moi.

Il fallait utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(MainPartial).html(result);

Avec cette instruction le script contenu dans la vue partielle est exécuté.

Contrairement à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

MainPartial.innerHTML = result;

que j'avais utilisé au début.

Ma fonction ajax complète est donc :

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
        function LoadDetailPartialView(MenuName) {
            if (typeof MenuName == 'undefined') MenuName = 'ListArticles';
            $.ajax({
                url: '@Url.Action("ChangeVendeurPartial", "Articles")',
                type: 'GET',
                cache: false,
                data: { Menu: MenuName }
            }).done(function (result) {
                if (result.redirectTo)
                    do{
                        // Attend que la valeur de 'result' soit chargée, car 'ChangeVendeurPartial' est asynchrone.
                    } while(result.lenght < 1);
                $(MainPartial).html(result); 
            });
        };

Ensuite, il m'a fallu presque entièrement reprendre mon script dans la vue partielle.
Il y avait à l'évidence un problème entre les 2 vues (principale et partielle) avec l'utilisation de l'instruction 'document.write'.

Plutôt que de remplacer la ligne entière d'un champ de la table avec 'document.write', le principe a été de travailler uniquement sur ce champ en lui donnant un id, et en le séparant de l'appel du script.
Car j'avais constaté que les id construits dynamiquement dans ma vue partielle était bien présents dans le DOM de ma vue principale quand le script s'exécutait.

Au lieu de :

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
    @foreach (var item in Model)
    {

...(table, tr, td, etc...)

                <td class="ligne-table">
                    <i class="fa-solid fa-marker" style="margin-left: 5px;cursor: pointer;" title="Modifier l'article" href="/Home/ArticleDetail/@Html.DisplayFor(modelItem => item.Id)"></i>

                    <script type="text/javascript">Check_Statut('@Html.DisplayTextFor(modelItem => item.Reserver).ToLower()', '@Html.DisplayFor(modelItem => item.Id)')</script>
                    
                <i class="fa-regular fa-trash-can" style="margin-left: 5px;margin-right: 5px;cursor: pointer;" title="Supprimer l'article"></i>
                </td>
...
}

faire :

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
    @foreach (var item in Model)
    {

...(table, tr, td, etc...)

                 <td class="ligne-table">
                    <i class="fa-solid fa-marker" style="margin-left: 5px;cursor: pointer;" title="Modifier l'article" href="/Home/ArticleDetail/@Html.DisplayFor(modelItem => item.Id)"></i>

                    <script >Check_Statut('@Html.DisplayTextFor(modelItem => item.Reserver).ToLower()', '@Html.DisplayFor(modelItem => item.Id)')</script>
                    <i id="lock_@Html.DisplayFor(modelItem => item.Id)"></i>

                    <i class="fa-regular fa-trash-can" style="margin-left: 5px;margin-right: 5px;cursor: pointer;" title="Supprimer l'article"></i>
                </td>

...
}

Et le script en entête de ma vue partielle devient :

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
<script>
    // ---------- S T A T U T ---------------
    var Check_Statut = function (ValReserve, id) {
        var StatutText = "statut_" + id;
        var LockText = "lock_" + id;
        var myBool = (ValReserve === 'true');
        var IconStatut = document.getElementById(LockText);

        if (myBool == false) {
            document.getElementById(StatutText).style = "color:green;font-weight:600;font-size: 12px;";

            IconStatut.style = "margin-left: 5px; cursor: pointer;color:black;"
            IconStatut.classList = "fa-solid fa-lock-open";
            IconStatut.title = "Réserver cet article";
            IconStatut.setAttribute("onclick", "Reserver(" + true + "," + id + ")");
        }
        else {
            document.getElementById(StatutText).style = "color:coral;font-weight:600;font-size: 12px;";

            IconStatut.style = "margin-left: 5px; margin-right: 4px; cursor: pointer;color:coral;"
            IconStatut.classList = "fa-solid fa-lock";
            IconStatut.title = "Annuler la réservation";
            IconStatut.setAttribute("onclick", "Reserver(" + false + "," + id + ")");
        }
    };
</script>

Maintenant tout fonctionne. Je change les vues partielles via un menu, et les scripts des vues partielles sont exécutés.
Merci

[AMP29]

Bon...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
                    do{
                        // Attend que la valeur de 'result' soit chargée, car 'ChangeVendeurPartial' est asynchrone.
                    } while(result.lenght < 1);

C'est pas terrible.
Il suffit d'ajouter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Async : false,

et la fonction ajax est synchrone.