Long Press - ASP.NET

Question

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.

A long press is iPad's idea of when you hold down a given control for awhile. They have this in place as a workaround for right-click functionality. This is why I have touchend and touchstart instead of mousedown and mouseup. — Jeff Fol, Aug 17 '11 at 16:00

Tomas Voracek · Accepted Answer · 2011-08-16T21:39:41.700

3

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;
    })

edited Aug 16 '11 at 21:39

answered Aug 16 '11 at 21:26

Tomas Voracek

5,886
1
25
41

+1 on including jQuery, but the selector as you mentioned is wrong. ID selectors in jQuery are prefixed by `#` as in CSS. – Jacob Aug 16 '11 at 21:38
Alright that would explain why it wasn't liking the $ syntax. I'll include that reference and then give it a try with a similar block to what you have in your post. If this works for me tomorrow I'll add as answer. Thanks. – Jeff Fol Aug 17 '11 at 02:42
@Tomas so I inserted the reference to JQuery and changed how I was calling Button1 but the Javascript events are still not firing. I put a debugger; statement to see if they were being hit and nothing came up when I depressed the button. I also tried changing the button into a label just in cause ASPX's post_back event was getting in the way but this wasn't the case. – Jeff Fol Aug 17 '11 at 13:38

score 0 · Answer 2 · answered Aug 16 '11 at 21:26

0

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.

answered Aug 16 '11 at 21:26

Matthew Jones

25,644
17
102
155

score 0 · Answer 3 · answered Aug 16 '11 at 21:30

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>

Long Press - ASP.NET

3 Answers3