Impossible de faire fonctionner JQuery dans la page maître

J'ai un exemple de requête dans un formulaire sans page maître, et cela fonctionne très bien. J'essaie d'utiliser la même fonction à l'intérieur de ma page maître, mais cela ne fonctionne pas, j'utilise ASP.NET. Voici mon code pour les deux:Impossible de faire fonctionner JQuery dans la page maître

WebForm (Cela fonctionne):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Surfitlocal.WebForm3" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#pHeader').click(function() { 
       $('#pBody').slideToggle('slow'); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .cpHeader 
     { 
      color: white; 
      background-color: #719DDB; 
      font: bold 11px auto "Trebuchet MS", Verdana; 
      font-size: 12px; 
      cursor: pointer; 
      width:450px; 
      height:18px; 
      padding: 4px;   
     } 
     .cpBody 
     { 
      background-color: #DCE4F9; 
      font: normal 11px auto Verdana, Arial; 
      border: 1px gray;    
      width:450px; 
      padding: 4px; 
      padding-top: 7px; 
     }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader"> 
      <asp:Label ID="lblText" runat="server" /> 
     </asp:Panel> 

     <asp:Panel ID="pBody" runat="server" CssClass="cpBody"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit 
      esse cillum dolore eu fugiat nulla pariatur 
     </asp:Panel> 
    </div> 
    </form> 
</body> 
</html>

MasterPage (Cela ne fonctionne pas):

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Biz.Master.cs" Inherits="Surfitlocal.Site1" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#pHeader').click(function() { 
       $('#pBody').slideToggle('slow'); 
      }); 
     }); 
    </script>  
    <style type="text/css"> 
     .cpHeader 
     { 
      color: white; 
      background-color: #719DDB; 
      font: bold 11px auto "Trebuchet MS", Verdana; 
      font-size: 12px; 
      cursor: pointer; 
      width:450px; 
      height:18px; 
      padding: 4px;   
     } 
     .cpBody 
     { 
      background-color: #DCE4F9; 
      font: normal 11px auto Verdana, Arial; 
      border: 1px gray;    
      width:450px; 
      padding: 4px; 
      padding-top: 7px; 
     }  
    </style> 
    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader"> 
      <asp:Label ID="lblText" runat="server" /> 
     </asp:Panel> 

     <asp:Panel ID="pBody" runat="server" CssClass="cpBody"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit 
      esse cillum dolore eu fugiat nulla pariatur 
     </asp:Panel>  

     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
</asp:ContentPlaceHolder> 


    </div> 
    </form> 
</body> 
</html>

Source

2009-05-08 user103854

Le problème est que lorsque vous ajoutez le MasterPage vous obtenez Mangling ClientID.

$("#pBody") => $(".pBody")

Vous ne pouvez pas utiliser d'ID avec la page MasterPage, vous n'aurez pas accès au client écrasé. Vous devez avoir une classe css personnalisée sur l'élément.

Bien sûr, vous vous attendez maintenant à ce que chaque page qui utilise cette MasterPage ait un pBody. Mieux vaut conserver ce code sur la page, pas sur la page maître.

Source

2009-05-08 21:50:37

J'ai résolu le formatage de sorte que les exemples sont visibles. –

Merci Chris, ça a marché. Merci aussi de corriger le formatage sur ma question. Louis – user103854

Il est intéressant de noter que .NET 4 introduit enfin une option intégrée pour désactiver la génération de ClientID - et avec les versions antérieures, vous pouvez la désactiver en héritant de ContentPlaceHolder et Content et en retournant String. Vide pour les appels pour récupérer le ClientID (et un autre ID qui m'échappe) – STW

Je peux voir que vous utilisez CssClass mais dans votre fonction vous utilisez "#" indiquant son ID.

Par conséquent

$('#pBody')

devrait être

$(".pBody')

Si vous souhaitez toujours utiliser des ID, vous devez utiliser:

$("#<%= pBody.ClientID %>")

Source

2009-05-08 21:51:09 janhartmann

Meep, merci de répondre. Cela fonctionne comme un charme maintenant. – user103854

-1

Pour résoudre ce problème dans asp.net vous pouvez utiliser le gestionnaire de scripts:

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
    <Scripts> 
    //put your js file in script reference tag: 
    //<asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" /> 
    //<asp:ScriptReference Path="~/scripts/PWDMenuMaker.js" /> 
    </Scripts> 
</asp:ScriptManager>

// Movafagh bashid

Source

2010-08-17 20:31:23 hamed

Cela peut être acceptable * si * vous utilisez déjà des extensions ASP.NET AJAX - mais c'est une très mauvaise solution si vous n'utilisez pas UpdatePanels ou d'autres contrôles similaires. Lors du test, un ScriptManager "bare-nekkid" génère ~ 20k de Javascript supplémentaire pour le pousser vers le client (et pour être clair, ce ScriptManager ne fait même pas référence à un script - c'est 20KB de déchets inutilisés à 100%) – STW

juste essayer de mettre ci-dessous ceux-ci. Il pourrait aider dans la page principale

$(document.getElementById("<%=pHeader.ClientID%>") 

$(document.getElementById("<%=pBody.ClientID%>")

Source

2013-05-01 05:48:38

Impossible de faire fonctionner JQuery dans la page maître

Répondre

Questions connexes