ASP.NET - jQuery ne fonctionne pas avec une masterpage

**jmatys** · 04/01/2012, 17h51

Bonjour,
Je travaille sur VisualStudio 2010 en ASP.Net et je veux utiliser jQuery pour rendre le site plus sympa.

J'utilise pour mon site ASP.net des masterpages.

Mon problème est le suivant.
Ma MasterPage référence bien ma bibliothèque jQuery 1.6.2

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
 
<head runat="server">
    <link href="../Styles/site.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <title>Mon site</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Contenu">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">
 
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>

Sur ma page ASPX, je fais appel à un script javascript qui utilise du jQuery.

Code :

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

1
2
3
4
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="../Scripts/PanelEffects.js" type="text/javascript"></script>
</asp:Content>

Ensuite toujours dans ma page, j'ai le code suivant dans le contenu :

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
 
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <div>
    <div class="cpHeader">
        <asp:ImageButton ID="btnShow" ImageUrl="~/Images/Img_boutons/Img1.png" runat="server" OnClientClick="return false;" />
        <asp:ImageButton ID="btnHide" ImageUrl="~/Images/Img_boutons/Img2.png" runat="server" OnClientClick="return false;"  />             
    </div>    
 
    <asp:Panel ID="Panel1" runat="server" Cssclass='cpBody'>
        <asp:Label ID="Label1" runat="server" Text="Label">Panel 1 Content</asp:Label>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Cssclass='cpBody'>
        <asp:Label ID="Label2" runat="server" Text="Label">Panel 2 Content</asp:Label>
    </asp:Panel>
    <asp:Panel ID="Panel3" runat="server" Cssclass='cpBody'>
        <asp:Label ID="Label3" runat="server" Text="Label">Panel 3 Content</asp:Label>
    </asp:Panel>
    </div>
 
    <div>
        <h2>Saisir un texte pour voir son clone</h2>
        <br />
        <asp:TextBox ID="tb1" runat="server" /><br />
        <asp:TextBox ID="tb2" runat="server" />
        <br /><br /><br />
    </div>
</asp:Content>

Il y a 2 parties dans ce code.
La première partie est censée faire un slide vertical que mon script jQuery affichera sur click sur le btnShow et le masquera sur le btnHide.
La seconde sert à cloner un textbox dans un autre.

La seconde partie fonctionne correctement, même avec une masterpage.
La première fonctionne uniquement si ce n'est pas avec une masterpage.

Ci-après le code js :

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
    $(function () {
        var pan = $(".cpBody").hide();
        var showNext = 0;
        $('input[id$=tb1]').keyup(function () {
            var txtClone = $(this).val();
            $('input[id$=tb2]').val(txtClone);
        });
        $("#btnShow").click(function () {
            alert("show");
            while (showNext < pan.length) {
                $(pan[showNext++]).slideDown();
            }
        });
 
        $("#btnHide").click(function () {
            alert("hide");
            while (showNext > 0) {
                $(pan[showNext - 1]).slideUp();
                showNext--;
            }
        });
    });

Est-ce que quelqu'un pourrait me dire pourquoi les btnShow et les btnHide ne fonctionnent pas en Masterpage alors que le reste fonctionne (texte cloné) ?
Y a-t-il une astuce pour les actions de click ?

Merci à vous.

**jmatys** · 04/01/2012, 18h08

Bon, j'ai cherché tout l'après-midi et c'est une fois que j'ai posté ma demande que je trouve l'erreur.

Si ça peut servir à quelqu'un, voici la solution :

En fait, dans le fichier js, il faut mettre :

Code :

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

$('[id$=btnShow]').click(function() { ...

au lieu de :

Code :

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

$("#btnShow").click(function () {

et ça fonctionne.

**SpaceFrog** · 04/01/2012, 18h59

heu c'est curieux ...

tes id sont bien uniques ?

pareil pour tes

Code :

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

$('input[id$=tb1]')

le selecteur signifie "dont l'id se termine par"

il n'y a pas de raison que le selecteur

Code :

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

$(#tb1')

ne fonctionne pas !
Il est d'ailleurs plus direct et donc optimisé par rapport à ta version

il serait intéressant que tu nous montre le code html généré et pas le code asp

ASP.NET - jQuery ne fonctionne pas avec une masterpage

jQuery

Discussions similaires

Partager

Partager