<script type="text/javascript">
$(document).ready(function() {
$('#LkForgot').on('click', function (e) {
alert("The paragraph was clicked.");
});
});
</script>
The above code doesn't work. When I click on #LkForgot within ContentPlaceHolder, it doesn't alert
This is the my masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<head id="Head1" runat="server">
<title>viber bulk sender</title>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/autosize.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="CSS/custombox.min.css">
<script src="script/custombox.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="font-family: Tahoma; font-size: 12px;">
<form id="form1" runat="server">
<div class="main register relative" style="min-height: 100%; margin: 0; text-align: center;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
This is the script within the Content control:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="CSS/custombox.min.css">
<script src="script/custombox.min.js"></script>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/autosize.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$('#LkForgot').on('click', function (e) {
Custombox.open({
target: '#ddd',
effect: 'fadein'
});
e.preventDefault();
});
});
</script>
<asp:LinkButton ID="LkForgot" runat="server">Forgot Password</asp:LinkButton>
<div id="ddd">
adsfasdfasd
</div>
</asp:Content>
any help would be appreciated.
Thanks
Register your control event like:
$('[id$=LkForgot]').on('click', function (e) {
Custombox.open({
target: '#ddd',
effect: 'fadein'
});
e.preventDefault();
});
Or
use ClientIDMode as static in linkbutton.
Try modify the source path like this
<script type="text/javascript" src='<%= ResolveUrl("~/script/jquery-1.11.1.min.js")%>' ></script>
When you put something inside ContentPlaceHolder, its id will be changed when rendered to client's browser.
So you have to use .class for this because you are using div.
If there are any server controls, you can use following code to get clientside id.
$("#<%=ServerControl1.ClientID%>").click(function(){
//CODE
});
Add jquery file like this
<script type="text/javascript" src='<%= ResolveUrl("~/script/jquery-1.11.1.min.js")%>' ></script>
then
<script>
$(document).ready(function () {
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
});
</script>
try this
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
OR
$(document).ready(function () {
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
});
You call the function with the class name. because the ids are changes when page created. OR you can inspect the page html and get the right id of the element. or
Related
jQuery datepicker not working with master page. datepicker not working while master page id added.
Please find the below code for more information.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" ref="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<p>Date: <input type="text" id="datepicker"></p>
</asp:Content>
You need to add an attribute ClientIDMode="Static" to save the id as is.
I recommend to use class instead but not overide the server generated ID.
Like:
<input type="text" id="datepicker" class="datepicker" />
Then:
$(function () {
$(".datepicker").datepicker();
});
Im using the jquery dialog box and i am trying to stop the postback from happening when calling the dialog, so its basically handled on client side.
I am calling the dialog open from my Treeview's SelectedNodeChanged
protected void tvTreeList_SelectedNodeChanged(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", string.Format("ParentNodeClick('{0}','{1}')", lblDescText, lblTitleText), true);
}
this is my javascript function
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
Is there any way i can do this? Already tried to use this but it doesnt seem to work.
$("#dialog").parent().appendTo(jQuery("form:first"));
Full html on masterpage
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Data Source</title>
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="Style/jquery.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
</head>
<body>
<form id="form1" runat="server" style="align-content:center; height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="dialog" title="">
<p></p>
</div>
<div runat="server" style="text-align:center;">
<h1 style="color:#505050;">Datastatus from Data servers</h1>
</div>
<asp:ContentPlaceHolder ID="cphContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
and my treeview
<div id="TreeList">
<asp:TreeView ID="tvTreeList" runat="server" OnSelectedNodeChanged="tvTreeList_SelectedNodeChanged" >
<NodeStyle CssClass="NodeStyle"/>
<HoverNodeStyle CssClass="HoverNodeStyle"/>
<SelectedNodeStyle CssClass="SelectedNodeStyle" />
</asp:TreeView>
</div>
I just can't figure out why this is not working. Been stuck on this for a while now. All help is appreciated, thanks in advance.
Here is my aspx page:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="Scripts/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//cdn.ckeditor.com/4.4.5.1/standard/ckeditor.js"></script>
<script type="text/javascript" src="Scripts/ng-ckeditor.min.js"></script>
<script type="text/javascript" src="Scripts/Summaries.js"></script>
<link rel="stylesheet" href="Styles/ng-ckeditor.css">
<link rel="stylesheet" href="Styles/Summaries.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="ui-widget-content" id="try" style="width: 100px; height: 100px; background-color: #f00;"></div>
javascript:
$(document).ready(
function () {
$("#try").resizable({
maxHeight: 1200
});
}
)
jQuery UI depends on jQuery. Judging off your code, you're only including jQuery UI.
Add
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
to your scripts.
Check your console as it stands, you should see jQuery is not defined.
In 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 id="Head1" runat="server">
<title></title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
In content place holder i have tried
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
</asp:Content>
I have tried in asp page working fine. i don't know why its not working in master page.
This will Work for you...
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='TextBox1']").datepicker();
});
</script>
You could also give it a class of something like CssClass="datePicker" and use that to grab it with jQuery:
$(".datePicker").datepicker();
Use Like, In Your Page where Datepicker is Located
Place it at bottom of Page where you Datpicker is located,
Put This Jquery
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="DATEPICKER.JS" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$='TextBox']").datepicker();
});
</script>
change ur content page code to this, remove datepicker style from master page
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
<script type="text/javascript">
`$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
if not working!!! please write ur html result from this content in ur browser here
I am trying to use Speak.js to let my webpage read strings, it doesnt seem to be working eventhough i am using the same codes in the tutorial. and there is no compiling errors, this is the code:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/speakGenerator.js" type="text/javascript"></script>
<script src="Scripts/speakClient.js" type="text/javascript"></script>
<script type="text/javascript">
function Play() {
speak("oooooooooooooooooooooooo");
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<input type="button" value="play" onclick="Play()" />
</asp:Content>
this code in a html file works perfectly, but when i use it in asp.net as shown above, it doesnt work.
<html>
<head>
<title>jQuery plugin for Text to Speech - demo</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="speakGenerator.js"></script>
<script src="speakClient.js"></script>
</head>
<body>
<div id="container">
<button id="button" onclick="speak('I know I know I know')">Talk</button>
<div id="audio"></div>
</div>
</body>
</html>