I'm trying to be able to place the error message when using jQuery validation to a asp.net label if the textbox is empty.
please advice how to modify my code to get that!!
here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
errorContainer: "#<%=TextBox1 %>",
errorLabelContainer: "#<%=TextBox1 %> #<%=Label1 %>",
wrapper: "li", debug: true,
submitHandler: function() { alert("Submitted!") }
})
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<p style="height: 313px">
<asp:TextBox ID="TextBox1" runat="server" class="required"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
</p>
</asp:Content>
I think
"#<%=TextBox1 %>"
means write the value of the default property of the textbox, which is the .Text property.
You should use
"#<%=TextBox1.ID %>"
and
"#<%=TextBox1.ID %> #<%=Label1.ID %>"
No to disqualify what you are doing now but I can't wrap my head around why you add a new plugin like JQ validation when you have a simple case of a required field validator which is a built in .net control
Related
I have a Master page that have these ContentPlaceHolder:
<asp:ContentPlaceHolder ID="title" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="contentTitle" runat="server" ></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="content" runat="server">
</asp:ContentPlaceHolder>
when I add these codes for jquery in<head> part of master page:
<script type="text/javascript" src="script/jquery-2.0.1.min.js" />
<link href="script/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery.contextMenu.js" />
and create new aspx file that use that master page ;
<%# Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="Bed.aspx.cs" Inherits="Zhotel.Lists.Bed" %>
<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentTitle" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="content" runat="server">
</asp:Content>
when I want to view Design part of file it show me this error:
and when I remove script tags then no more this error occurs.
How can I use script tag that this error not shown?
Add </script> to end of jquery definition, like this:
<script src="script/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="script/jquery.contextMenu.js" type="text/javascript"></script>
place your scripts outside of contentplaceholder 'title' in head section and make sure that your page has correct reference to your masterpage and also make sure that you are placing the contentplaceholders in their appropriate places
I have ASP.Net Masterpage design & have to user a Fancybox to show videos as modal, When i show videos on a ContenPage & place all related scripts to FB on that page then it works fine for that page without any issue. But i also need Top 10 Videos to be shown on some page as a user control. What i do is that i create a User Control & put all the related scripts in that user control except the main jQuery which i user in masterpage & download as CDE.
In this case fancybox doesnt trigger.
I am to make it work if i black fancy-box related scripts on all contents page which i dont want to.
I want script to be in userControl
I have placed my sample code for user control & master Page below.
USER CONTROL
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ucMostPopular.ascx.cs" Inherits="ucMostPopular" %>
<script src="<%= Helper.ResolveUrl("~/scripts/fancybox/jquery.fancybox-1.3.4.js") %>" type="text/javascript"></script>
<link href="<%= Helper.ResolveUrl("~/styles/english-jquery.fancybox-1.3.4.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//Code to Reinitialize Fancybox script when using update panel START
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) { }
function EndRequest(sender, args) { InitMyFancyBox(); }
$(document).ready(function () {
InitMyFancyBox();
});
function InitMyFancyBox() {
$(document).ready(function () {
$(".youtube").click(function () {
// first, get the value from the alt attribute
var newTitle = $(this).find("img").attr("alt"); // Get alt from image
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
//'title': this.title, // we will replace this line
'title': newTitle, //<--- this will do the trick
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
});
// alert(this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'));
$.ajax({
type: "POST",
url: "UpdateVideoViews.aspx?youtubeVideoID="+this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
});
return false;
});
});
}
</script>
<!-- Videos -->
<div id="Videos" class="tab_text">
<div id="popular-videos-wrapper">
<asp:Repeater ID="rptPopularVideos" runat="server" EnableViewState="False" >
<ItemTemplate>
<div class="popular-article-title">
<asp:Label ID="lblCounter" CssClass="lblCounter" runat="server" Text='<%# Container.ItemIndex + 1 %>' > </asp:Label>
<asp:HyperLink ID="hylnkArticle" CssClass="popular-youtube-links" ToolTip ='<%# Eval("VideoTitle")%>' NavigateUrl='<%# generateVideoURL(Eval("VideoYoutubeID")) %>' runat="server" BorderWidth="0">
<asp:Label ID="lblArticleTitle" Text='<%# getVideoTitle(Eval("VideoTitle"))%>' runat="server" ></asp:Label>
</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<!-- Videos -->
MASTER PAGE
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="SiteMasterPage" %>
<%# Register Src="~/en/UserControls/ucLiquidCarousel.ascx" TagName="ucLiquidCarousel" TagPrefix="uc"%>
<%# Register Src="~/en/UserControls/ucNewsTicker.ascx" TagName="ucTicker" TagPrefix="uc"%>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 id="Head1" runat="server">
<title></title>
<asp:Literal ID="litCtrMetaForSM" runat="server"></asp:Literal>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="http://www.alshindagah.com/favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link href="../styles/english_css.css" rel="stylesheet" type="text/css" />
<link href="../styles/horizontal-menu-english.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>
<script type="text/javascript">
.....
//Other scripts
.....
</script>
I am not sure why this is not working i have moved script related to fancy box on masterpage then it worked only for default page & failed on other pages.
I also used ResolveURL(...) that didn't work either
I dont get any error regarding script.
I would appreciate help in this regard so that my fancybox will work by placing all the scripts related to fancybox from usercontrol it self
How do I write some client-side script to access a HTML element when .NET has generated the element's ID at runtime?
At present I have this in my ASPX:
<asp:Content ContentPlaceHolderID="middle_area" runat="server">
<asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>
<script>
var oImage = document.getElementById('ctl00_middle_area_ImageBarChart')
</script>
It it working at present, but I doubt it is reliable!
ClientID: Documentation
You would then do <%= ImageBarChart.ClientID %> to put it in your javascript
You can write <%= ImageBarChart.ClientID %>.
Try this:
<asp:Content ContentPlaceHolderID="middle_area" runat="server">
<asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>
<script>
var oImage = document.getElementById('<%= ImageBarChart.ClientID %>')
</script>
You can use the ASP.NET elements Client Id like so:
<%= ImageBarChart.ClientID %>
i have a strange situation may its a easy fix or something i may be missing but here is the question.
i have a asp.net form with master page and my validation works great without any problem but the problems starts when i try to hook my click event to the server side,
here is what i meant:
i have a form with few fields on it and if the form is empty than it should STOP submitting, otherwise allow me to execute the server side script
but its not happening, even my form is in invalid state (i do get error message saying i have to enter the required fileds) but still executing my server side script.
i would like to execute my server side script only if the form is in valid state.
here is my code:
my master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>jQuery Validation in ASP.NET Master Page</title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
my content page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
<%=txtName.UniqueID %>: {
minlength: 2,
required: true
},
<%=txtEmail.UniqueID %>: {
required: true,
email:true
}
}, messages: {
<%=txtName.UniqueID %>:{
required: "* Required Field *",
minlength: "* Please enter atleast 2 characters *"
}
}
});
});
</script>
Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();" Text="Submit" />
</asp:Content>
function SubmitTheForm() {
SaveTheForm();
}
function SaveTheForm() {
debugger;
var request = buildNewContactRequest();
ContactServiceProxy.invoke({ serviceMethod: "PostNewContact",
data: { request: request },
callback: function(response) {
processCompletedContactStore(response);
},
error: function(xhr, errorMsg, thrown) {
postErrorAndUnBlockUI(xhr, errorMsg, thrown);
}
});
return false;
}
i have tried both ways
1)
$(document).ready(function() {
$("#btnSubmit").click(function(event) {
event.preventDefault();
SaveTheForm();
});
});
2)
<asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();
function SubmitTheForm() {
SaveTheForm();
}
you're posting your data without checking if the form is valid or not
I think you have to use something like this
function SubmitTheForm() {
if ($("#aspnetForm").valid()) SaveTheForm();
}
Sorry, I'm giving you bad advice. Forget my previous entry. What is the SubmitTheForm() method? You're using the jQuery validation plug in, so you should just need to attach the validation stuff to the form and all should be right with the world.
I think your button onclick needs to be
return SaveTheForm();
As in:
<asp:Button ID="btnSubmit" runat="server" onclick="return SubmitTheForm();" Text="Submit" />
Do you try to put the jQuery code script in the Head ContentPlaceHolder
Over in this question, Scott writes that it is possible to get the current HTML for what's written in the FCKeditor by using FCKeditorAPI.__Instances['instanceNameHere'].GetHTML();
Could someone provide step-by-step instructions on how to accomplish this in an ASP.NET page? All I currently have so far in the .aspx file is this:
<%# Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<%# Page Title="" Language="C#" ... %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Create a new piece</h2>
<form id="form1" runat="server">
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">
</FCKeditorV2:FCKeditor>
<input id="Submit1" type="submit" value="Submit" runat="server" />
</form>
</asp:Content>
In javascript
Well you can do this here:
<script type="text/javascript">
var oEditor = FCKeditorAPI.GetInstance(’IDFromFCKEditor’);
oEditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("PreviewDiv").innerHTML = oEditor.GetHTML(true);
}) ;
</script>
Source http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API