Simple jQuery Hello World in ASPX

Question

I really dont understand why this simple example doesnt work :SI have a WebApplication in which I have a script :

function myAlert() {    
    $("#Button1").click(function () {
        alert("Hello world!");
    });
}

In my asp page, I have this simple code

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Graph.aspx.cs" Inherits="WebApplication.Graph" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">  
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" Width="100px"/>
</asp:Content>

And finally I register the script in the cs :

   protected override void OnPreLoad(EventArgs e)
   {
        Page.ClientScript.RegisterClientScriptInclude("jQuery",
                        ResolveUrl(@"Scripts\jquery-1.4.1.js"));
        Page.ClientScript.RegisterClientScriptInclude("jMyAlert",
            ResolveUrl(@"Scripts\MyAlert.js"));
        // check if the start up script is already registered with a key
        if(!Master.Page.ClientScript.IsStartupScriptRegistered("jMyAlert"))
        {
            // since it is not registered, register the script
            Master.Page.ClientScript.RegisterStartupScript
                (this.GetType(), "jMyAlert", "myAlert();", true);
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "jMyAlert", "myAlert()", true);
    }

I dont see what's wrong with this. I tried to include the scrit directly inside the aspx but nothing. I then try onto a simple html page and it works fine.

I want to use a plotting library using jQuery in my page so I'm very far to succeed if such a simple example causes me such a lot of problem...lol

Answer 1

Try checking the debug console within whatever browser you are using to see if "$" is undefined. It sounds like you are missing jquery when using the full ASP.NET approach.

Answer 2

The Id of that button is not going to be #Button1 because of the use of the master page. Try viewing the source to see what I mean.

To solve this, you will need to be able to see the actual Id in the JavaScript.

Something like this in your Page_Load method:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
    "Button1Id", string.Format("var Button1Id = '{0}';", Button1.ClientID), true);

Will create the following in your page:

<script type="text/javascript">
//<![CDATA[
var Button1Id = 'Button1';//]]>
</script>

Which then means that your myAlert method will need to look like this:

function myAlert() {
    $("#" + Button1Id).click(function () {
        alert("Hello world!");
    });
}