ASP.NET - jQuery ne fonctionne pas avec une masterpage
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:
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:
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:
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:
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.
