Le plugin JQuery ne fonctionne pas

Question

J'ai un masque de date JQuery, mais lorsque je lance la page, il génère une erreur "Erreur d'exécution de Microsoft JScript: l'objet ne supporte pas cette propriété ou cette méthode".

Maintenant, le contrôle que ce JQuery particulier est censé fonctionner est ajouté dynamiquement à un contrôle de répéteur. Grâce à cela, j'ai regardé les identifiants du contrôle, où il se cassait et s'arrêtait dans Visual Studio et ce qui est affiché sur la page ASPX. Les identifiants sont identiques à l'exception du "#" que JQuery a au début, qui n'est pas sur la page.

Dans mon code JQuery j'ai:

JQuery(function ($) { 

$('#<%=date.ClientID %>').mask("99/99/9999"); 

}); 

Est-il loin de dire JQuery de ne pas inclure le « # » lors de la recherche du contrôle? J'ai utilisé UniqueID mais cela change tout trait de soulignement en "$", ce qui n'est pas la même chose que sur la page. Mon seul problème est avec le signe "#" au début de l'ID. J'ai même ajouté une boîte d'alerte pour vérifier que la boîte de texte était là et elle est revenue comme nulle. J'ai essayé même en ajoutant un attribut CssClass à la zone de texte, mais cela à travers la même erreur, aussi.

Veuillez noter que le contrôle utilisateur personnalisé qui a la zone de texte est ajouté par programme au répéteur.

code ci-dessous:

contrôle utilisateur avec répéteur

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Step4.ascx.cs" 
    Inherits="Prototype.Step4" %> 
<div style="height: 800px; margin-top: 20px; overflow-x: hidden; overflow-y: scroll"> 
    <p> 
     <b>Edit Stage</b></p> 

    <asp:Repeater ID="Edit" runat="server"> 
     <HeaderTemplate> 
      <table> 
     </HeaderTemplate> 
     <FooterTemplate> 
      </table> 
     </FooterTemplate> 
     <ItemTemplate> 
      <tr> 
       <td> 
        <asp:Label ID="RowLabel" runat="server" Text="Label" ></asp:Label> 
       </td> 
       <td> 
        <asp:PlaceHolder ID="ControlPlaceHolder" runat="server"></asp:PlaceHolder> 
       </td> 
      </tr> 
     </ItemTemplate> 
    </asp:Repeater> 
</div> 

Control Mask qui est ajouté dynamiquement au contrôle ci-dessus

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MaskControl.ascx.cs" Inherits="Prototype.CommonControls.MaskControl" %> 


<asp:TextBox ID="date" runat="server" Width="136px" CssClass="dateMask"></asp:TextBox> 


<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.maskedinput.js" type="text/javascript"></script> 

<script type="text/javascript"> 
// jQuery(function ($) { 
//  $('.dateMask').mask("99/99/9999"); 
// }); 
    alert(document.getElementById("MaskedDateBox")); 
</script> 

Quelqu'un peut-il aider?

Answer 1

avez-vous essayé d'utiliser:

$ (document) .ready (function() {. de $ (dateMask) .mask ("99/99/9999"); });

L'ajout dynamique de la commande usercontrol ne modifie pas la classe CSS des contrôles ajoutés, où elle modifiera l'ID en fonction de son conteneur de dénomination.

Answer 2

jQuery(function() { 
    jQuery('.dateMask').mask("99/99/9999"); 
}); 

devrait fonctionner.

Je ne suis pas vraiment sûr de ce que vous entendez par:

tell JQuery not to include the "#" when finding the control

Lorsque vous utilisez # dans un sélecteur, il signifie que vous trouverez le contrôle par id.

Il est plus propre d'obtenir des contrôles asp.net en utilisant un sélecteur de classe plutôt que le sélecteur d'ID, à mon humble avis.

Donc, pour développer un peu l'explication. Si vous n'utilisez pas ajax, peu importe comment vous avez généré vos contrôles - toutes vos zones de texte sont présentes sur la page lorsque l'événement $ (document) .ready() se déclenche et que leurs classes sont définies. Dans ce cas, vous devez exécuter le code suivant une seule fois (qui est mis js sur la page et non dans le contrôle)

jQuery(function() { 
    jQuery('.dateMask').mask("99/99/9999"); 
    jQuery('.phoneMask').mask("(999) 999-9999"); // if you have one 
    ... 
}); 

Si vous chargez les contrôles avec ajax que vous devez exécuter le code javascript au-dessus de chaque fois que la requête ajax est terminée.Vous pouvez le faire en vous inscrivant un script avec ScriptManager dans Page_Load comme ceci:

public void Page_Load(object sender, EventArgs e) { 
    ScriptManager.RegisterStartupScript(updatePanel, updatePanel.GetType(), "mask", "initMask();", true); 
} 

Vous devez définir la fonction javascript initMask() sur votre page.

function initMask() { 
    jQuery('.dateMask').mask("99/99/9999"); 
    jQuery('.phoneMask').mask("(999) 999-9999"); // if you have one 
    ... 
}