Discussion :

[AMP29]

Bonjour,

J'ai un problème avec bootstrap datepicker.
Je le fais fonctionner partout, sauf à l'endroit où j'en ai besoin : dans une vue partielle

La vue partielle comporte une table, et dans chaque ligne de la table 2 cellules ont un datepicker.

Si j'utilise :

Code :

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

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

pour appeler la vue partielle, tout fonctionne bien.
Et partout ailleurs.
J'ai testé sur un projet de test.

Sauf que je dois appeler la vue via une fonction ajax.
Et là, les menus déroulants de datepicker ne fonctionne plus.

Le datepicker n'y est probablement pour rien.

Code :

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

1
2
 
    <link href="~/lib/bootstrap_datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />

et

Code :

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

1
2
3
 
    <script src="~/lib/bootstrap_datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="~/lib/bootstrap_datepicker/js/bootstrap-datepicker.fr.min.js"></script>

puis, dans ma vue principale :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    <script>
        $('.DatePick').datepicker({
            todayBtn: true,
            clearBtn: true,
            language: "fr",
            multidateSeparator: "/",
            todayHighlight: true,
            autoclose: true,
            startDate: "0d",
            todayBtn: "linked",
        }
        );
</script>

L'appel dans la vue principale :

Code :

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

1
2
3
 
    <div id="VendeurPartialView" >
    </div>

puis ajax :

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
 
        var MainPartial = document.getElementById('VendeurPartialView');
 
        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)
                $(MainPartial).html(result);
            });
        };

Voici la 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
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
<script>
    // ---------- S T A T U T ---------------
    var Check_Soldes = function (PrixSolde, id) {
        var IconSolde = "btnsolde_" + id;
        var DATED = "date_deb_" + id;
        var DATEF = "date_fin_" + id;
        var myBool = (PrixSolde === '');
        var Icon = document.getElementById(IconSolde);
        var DateDeb = document.getElementById(DATED);
        var DateFin = document.getElementById(DATEF);

        if (myBool == true) {
            //CouleurStatut.style = "color:green;font-weight:600;font-size: 12px;";

            Icon.style = "margin-left: 5px; cursor: pointer;color:lightgray;font-size: 20px;"
            Icon.classList = "fa-solid fa-check";
            Icon.title = "Appliquer les soldes";
          }
        else {
            Icon.style = "margin-left: 5px; margin-right: 3px; cursor: pointer;color:green;font-size: 40px;"
            Icon.classList = "fa-solid fa-square-check";
            Icon.title = "Supprimer les soldes";
         }
    };
</script>


<table class="mesarticles_table">
    <thead>
        <tr style="background-color:#f2f2f2; border:1px solid;border-color:gray;">
            <th class="titre-table" style="min-width:100px;">Image</th>
            <th class="titre-table" style="min-width:100px;">Nom</th>
            <th class="titre-table" style="min-width:200px;">Référence</th>
            <th class="titre-table" style="min-width:200px;">Votre Réf.</th>
        </tr>
    </thead>
    <tr>
        <td class="ligne-table">
        </td>
        <td class="ligne-table">
        </td>
        <td class="ligne-table">
            <div>
                <input type="text" id="date" placeholder="Choisissez une date" style="cursor: pointer;" class="DatePick">
            </div>
        </td>
        <td class="ligne-table">
            <div>
                <input type="text" id="date" placeholder="Choisissez une date" style="cursor: pointer;" class="DatePick">
            </div>
        </td>
    </tr>
</table>

Les seules différences entre le projet test (bon fonctionnement) et mon projet principal (mauvais fonctionnement) sont :
- Un script au début.
- La vue partielle est appelée via ajax

Merci pour votre aide

[AMP29]

Bon, comme cela arrive régulièrement, prendre le temps de poser la question ici, permet d'avoir les bons mots clés pour affiner la recherche.

J'ai trouvé la solution.
Et je n'aurais pas pu l'inventer...

Place a jquery.js inside head tag of your modal example page. Jquery on the parent page where you might have referenced it is not visible to the second page which you are showing as modal.

https://stackoverflow.com/questions/...er-ajax-loaded

l'appel ajax 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
28
 
        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);
                $('.DatePick').datepicker({ pickTime: false, 
                    todayBtn: true,
                    clearBtn: true,
                    language: "fr",
                    multidateSeparator: "/",
                    todayHighlight: true,
                    autoclose: true,
                    startDate: "0d",
                    todayBtn: "linked",
                    orientation: "bottom auto",
 
                });
            });
        };

Purée !
Il faut tout repasser dans la réponse ajax.

Merci