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>
Related
<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
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
Seem to be having some issues with the JQRangeSlider. Trying to implement this tool into an MVC project. After the slider is called the alert is never reached. Is there a bug? I have this working in another project in Dreamweaver, though it renders fine in the live preview mode it does not work bringing it to any browser. Here's my code...
ViewBag.Title = "Test";
Layout = "";
}
<html>
<head>
<title>"Slider"</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery- ui.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/slider/CSS/classic.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
<script src="../../Content/slider/Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderMouseTouch.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderDraggable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderBar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQDateRangeSliderHandle.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSlider.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSlider.js")" type="text/javascript"></script>
</head>
<body>
<div class="page-header">
<h2>Test</h2>
</div>
<div id="slider" style="width:200px;"></div>
<input type="text" class="datepicker" />
<script type="text/javascript">
$(function () {
$("#slider").editRangeSlider();
alert("whocareswhateverbye");
});
</script>
</body>
</html>
I think your code is failing at
$("#slider").editRangeSlider();
due to a compatibility issue with jQuery 1.7, so it's never reaching the alert.
It's working fine with jQuery 1.8 as demonstrated here:
http://jsfiddle.net/QwAqy/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>
</body>
</html>
Is there anything missing in this html snippet .??
datepicker is not getting populated, ErrorConsole showing error that-
'textBox.datepicker is not a function'
in below code;
var mydatepicker = var mydatepicker = textBox.datepicker();
Can someone help please.?
Thats my working copy of your code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>
Is datepicker not a function from the jQuery-UI library?
If so, then you need to include a script reference to the jQuery-UI Library.
EDITS
No You need to add a script reference to the jQuery-UI library and jQuery-UI Css file
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="src of desired theme" />
Are you giving full refrences to js files. Including jquery and datepicker's .js files.
The issue is in this:
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
I can not see any js files regarding datepicker in your head tag where you've included all js refrences.
There must be some file like:
<script type="text/javascript" src="Scripts/datepicker.js"></script>
or something like that, which you are missing to include.
Hope this helps.
if you use jquery datepicker, the 'myButton' object is not necessary, datepicker will handle it for use, see the code:
<html>
<head><title>jQuery Open on button</title>
<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
</head>
<body>
<form>
<input id="date" type="textbox"/>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#date").datepicker({ showOn: 'button', buttonText: "select" });
});
</script>
</body>
</html>