ASP.NET - jQuery ne fonctionne pas avec une masterpage [Résolu]

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

04/01/2012, 18h08	#2
jmatys Invité régulier Développeur .NET Inscription : décembre 2011 Messages : 22 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur .NET Secteur : Bâtiment Informations forums : Inscription : décembre 2011 Messages : 22 Points : 9 Points : 9	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.
	00

04/01/2012, 18h59	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 201 Points : 45 201	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email