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