I am in the process of handling a Long Press event in the JavaScript of an ASPX page but since I don't have much experience with JavaScript having a couple issues. I am working of a question which was already asked here.
When I run the code I get the message "$ is not defined" and when I change $("Button1") to ("Button1") then I get the message stating the mouseup function doesn't exist. The primary problem I'm having is accessing the aspx control properly. Below is my code.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
var pressTimer;
var longPress = 1000;
$("#<%= Label1.ClientID %>").bind("touchend", function (e) {
var d = new Date();
var timeDiff = d - pressTimer
if (timeDiff > longPress) {
document.getElementById("demo").innerHTML = "Mouse Up";
//actual logic here
}
return false;
});
$("#<%= Label1.ClientID %>").bind("touchstart", function (e) {
pressTimer = new Date();
return false;
});
});
</script>
<title>Long Press Testing</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:label ID="Label1" runat="server" text="Hold This Down" />
<br />
<p id="demo"></p>
</div>
</form>
</body>
</html>
Thanks for the help.
[EDIT] - Turns out I was missing the ready statement so the event is now firing as it should. This is the final version which is behaving properly. Also I wrote this to handle long press functionality on the iPad so if anyone is trying to do that this code is a good place to start.
You are missing jQuery script registration in head section like:
<script src="jquery.js"></script>
$ sign is jQuery's identifier, not JavaScript's.
Also, your buttons will not work, because you are referencing server button, but you must provide an id for JavaScript to work properly:
$("#<%= Button1.ClientID %>").mouseup(function () {
clearTimeout(pressTimer)
// Clear timeout
return false;
})
Looks like you are attempting to use jQuery (or another similar framework) without actually registering the appropriate script. You will need an <script/> block or some similar construct.
Looks like you havent included jquery in your project. you can include it by using the google hosting below, or go to jquery.com and download it and include it. your going to want to put in the Head tag above the other scripts you wrote. also, you might want to add a # before the id because it uses css selectors. Also, im not sure how much of the code will execute because thats a server button which will cause a post back.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Related
So here I want to put some JavaScript for my carousel from Twitter bootstrap, the problem is, it seems having no effect no matter where I put it, I already made sure the id matches. Here's the code (note: I'm using master page)
$(‘.carousel‘).carousel
({
interval: 1000
})
I put it in <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content> which I believe is the head, but it still not working, any advice on how to do this?
Assuming your master page has something like this in it:
<head>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
Then any page which is based on this master page you can indeed put anything inside <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> which you want to be placed in the <head> section of your web page. This routinely contains bits of javascript, however in order for jQuery to do it's think you must wait until the document is ready:
<script>
$(document).ready(function(){
$('.carousel').carousel
({
interval: 1000
});
});
</script>
As an additional point (or, stab in the dark) you mention in your question "I already made sure the id matches" however you have not referenced any element by ID (except perhaps the ContentPlaceholder); your jQuery code references an element by class name .carousel.
Put your code in child page in which you have implemented carousel. also make sure to reference JQuery and carousel script file
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000
});
});
</script>
I am trying to show alert box using javascript in a webpage using web browser control in WP7. The alert is not popping up. Is there anything wrong in the code or WP7 doesn't support it at all?
<phone:WebBrowser Name="browser" IsScriptEnabled="True" ScriptNotify="browser_ScriptNotify"
Source="Default.html"/>
Inside Default.html
<html><br>
<head><br>
</head><br>
<body onload="onLoad()"><br>
<script type="text/javascript"><br>
function onLoad() {<br>
alert("hello");<br>
}<br>
</script><br>
</body><br>
</html>
Are you able to get the default.html resource loaded? Have a look at http://blogs.msdn.com/b/dohollan/archive/2010/08/25/adventures-with-the-windows-phone-7-webbrowser-control.aspx first.
UPDATED TO INCLUDE SAMPLE CODE FOR HOW TO ACHIEVE AN INTENDED EFFECT:
The HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" >
function ShowNameAlert(name) {
window.external.notify("Hello " + name);
}
</script>
</head>
<body onload="ShowNameAlert('Jojo');">
Bla bla
</body>
</html>
The C# code-behind:
private void SomeBrowser_ScriptNotify(object sender, NotifyEventArgs e)
{
MessageBox.Show(e.Value);
}
The XAML:
<phone:WebBrowser x:Name="SomeBrowser" ScriptNotify="SomeBrowser_ScriptNotify" IsScriptEnabled="True" Source="test.html"/>
This is how I solved it, I injected the javascript onto the webPage to which I navigate, and overrided the alert and confirm boxes
window.alert = function(__msg){window.external.notify(' + __msg + ');};
Then in the script notify function displayed that message using MessageBox. I hope it helps others too. The previous answer was a workaround, this is what I feel is the correct solution to my problem
In my application i just want to alert the value in the text box using javascript .
aspx page code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 type="text/javascript">
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" Text="asdsad">
</asp:TextBox>
</div>
</form>
</body>
</html>
I only get alert 'hi' ..after that i get an error " object required" . whats the reason?
Your code is running before the element has been displayed on the screen. Try -
window.onload = function() {
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
}
Or move your script to the bottom of the page as suggested by Tejs in the comments below.
The page is not loaded yet. You have to put the code in a function and then trigger with
onload=yourfunction;
Please change the script location, put the script code on bottom of the page.Just After the complete with form tag.
The ID you are trying to get is a server side id and not the html id of the element, if you checked using firebug you will notice that the id has loads of extra letters and numbers inserted by asp.net, i'd recommend using jquery instead to walk into the dom to select the specific element.
You could also add a name and getByName.
Here's my setup. I'm using .NET:
I have a Main.aspx lets call it. That page inherits a master page and the Master Page as usual includes the jQuery library and other includes that we use for jQuery that are global in scope
In Main.aspx is an HTML plain vanilla IFrame:
In that IFrame is another .aspx page. Lets call it for all tense and purposes Sub.aspx
In Sub.aspx I've got the following code:
<!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">
<link href="Content/Styles/Site.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="facebookPhotos-iFrameContent">
<div>
<p id="buttoTestContainer">
<input type="image" id="btnLogin" src="images/loginBtn.jpg" />
</p>
</div>
</div>
</form>
<script type="text/javascript">
var loginButtonID = 'btnLogin';
//alert(loginButtonID);
window.fbAsyncInit = function () {
// Initialize/load the JS SDK
// cookie is set to true to activate JS SDK cookie creation & management
FB.init({ appId: facebookApplicationID, status: true, cookie: true, xfbml: false });
alert("got here");
// also handles the case when they are already logged in
$('#' + loginButtonID).click(function () {
alert("login button was fired");
TestLogin();
});
//...rest of code
});
The problem:
When trying to debug to make sure that .click() event gets called so it binds to my control, I never get to the first alert "got here" so that I know the JS was called at least up to that point. So not sure why. I see absolutely no JS errors in my FireBug console either.
Your function never executes. Remove the window.fbAsyncInit = function() { } and the code will run as interpreted. Or, use $(document).ready(function() { }); to execute it after the DOM is ready.
Also, the Javascript libraries in the parent frame are not inherited by the child. But you can reference them like parent.fbAsyncInit = function() { } or parent.jQuery(); for example.
resolved. That init function should be the only thing in there. Moved all other code outside the window.fbAsyncInit because I do not want to load the others asynchronously, I want to load it after the DOM has completed. The only thing that should be loaded at the same time is the registering/Initialization of that SDK.
I'm not sure what I'm doing wrong here:
index.html
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<script type="text/javascript" src="scripts/eventInit.js"></script>
</head>
<body>
<p id="javascriptWarning">This page will not work with JavaScript disabled.</p>
</body>
</html>
eventInit.js
window.onload = function () {
alert("check"); // works
var jsWarning = document.getElementById("javascriptWarning");
jsWarning.onclick = function () {
alert("hi"); // works
};
jsWarning.onload = function () {
alert("loaded"); // fails
};
}
And yet, nothing happens. What am I doing wrong? I've tried other events, like onmouseover and onload.
I'm doing this in Visual Studio, and intellisense isn't giving me options for setting any event handlers. Is that because I'm doing this wrong?
I have confirmed that JS is working on my setup; just putting alert("hi") in a script and including it does work.
It might be important to note that I'm doing this in JScript, since I'm using Visual Studio 2010, so perhaps event handling is different?
Updated to remove '-' from the ID name, but it still doesn't work.
Updated added the window.onload block. Now onclick works, but onload doesn't.
You are trying to set a load event on a paragraph. Only objects which load external data (window, frame, iframe, img, script, etc) have a load event.
Some JS libraries implement an available event (such as YUI) — but you know the paragraph is available, since you're setting an event on it, and you couldn't do that if it was unavailable.
maybe you forgot to have the code block inside a
window.onload = function() {
// btn click code here
}
You have to wait for the document to be parsed before you can go looking for elements by "id" value. Put your event handling setup into an "onload" function on the window object.
The browser won't fire an "onload" event on your <p> tag. You won't need that anyway if you do your work in the "onload" handler for the window as a whole.
[soapbox] Use a framework.
The script is executed before the desired element exists. Additionally, I don't think, p has an onload-Event. Windows, frames and images, yes, but paragraphs?
You should use <body onload="init();"> or window.onload=function(){ … } or a library function, if you use a library. Example:
index.html
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<script type="text/javascript" src="scripts/eventInit.js"></script>
</head>
<body>
<p id="javascriptWarning">This page will not work with JavaScript disabled.</p>
</body>
</html>
scripts/eventInit.js
window.onload=function(){
alert('JS is working!');}
Edit: Okay, I am very sure, p makes no use of an onload event handler. And it's no wonder, you don't need it. If you want to execute JS code just after the paragraph is finished, do this:
<p>
<!-- stuff -->
</p>
<script type="text/javascript">
/* stuff */
</script>
Instead of this:
jsWarning.onload = function () {
alert("loaded"); // fails
};
try this
if(jsWarning) alert("loaded");
I think someone above mentioned checking for the existence of the element. At this stage the element should be present but it does no harms to check for it.
I think you have to make sure your JavaScript is binding.
Is your javascript before or after your paragraph element, for some reason my brain is aiming towards that.
I would look into using something like jQuery, it will help.
using jQuery your code would be (with the relevant jQuery files included of course):
$(document).ready(function()
{
$("#javascript-warning").click(function(){
alert("HELLO");
});
});
I don't think hyphens are valid in class names when used in conjunction with JavaScript. Try an underscore instead.
onload is a window event.