title: How to use javascript in content page, asp.net
body: <p>I got a jQuery sample code from tutorial, it's even a single webform sample.</p>
  
  <p>When I integrate it to my project and use it in a content page, the JavaScript doesn't work.</p>
  
  <p>This is my master page code:</p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
          &lt;/asp:ContentPlaceHolder&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this is my content page code:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
  CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
  &lt;!-- from http://encosia.com/2009/10/11/do-you-know-about-this-undocumented-google-cdn-feature/ --&gt;
  &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
      type="text/css" rel="Stylesheet" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;%= ResolveUrl("~")%&gt;Scripts/jquery.blockUI.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;%= ResolveUrl("~") %&gt;Scripts/ScriptFile.js"&gt;&lt;/script&gt;
  &lt;!-- fix for 1.1em default font size in Jquery UI --&gt;
  &lt;style type="text/css"&gt;
      .ui-widget
      {
          font-size: 11px !important;
      }
      .ui-state-error-text
      {
          margin-left: 10px;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("#divEditCustomer").dialog({
              autoOpen: false,
              modal: true,
              minHeight: 20,
              height: 'auto',
              width: 'auto',
              resizable: false,
              open: function(event, ui) {
                  $(this).parent().appendTo("#divEditCustomerDlgContainer");
              },
          });
      });
  
  
      function closeDialog() {
          //Could cause an infinite loop because of "on close handling"
          $("#divEditCustomer").dialog('close');
      }
  
      function openDialog(title, linkID) {
  
          var pos = $("#" + linkID).position();
          var top = pos.top;
          var left = pos.left + $("#" + linkID).width() + 10;
  
  
          $("#divEditCustomer").dialog("option", "title", title);
          $("#divEditCustomer").dialog("option", "position", [left, top]);
  
          $("#divEditCustomer").dialog('open');
      }
  
  
  
      function openDialogAndBlock(title, linkID) {
          openDialog(title, linkID);
  
          //block it to clean out the data
          $("#divEditCustomer").block({
              message: '&lt;img src="&lt;%=ResolveUrl("~") %&gt;content/images/async.gif" /&gt;',
              css: { border: '0px' },
              fadeIn: 0,
              //fadeOut: 0,
              overlayCSS: { backgroundColor: '#ffffff', opacity: 1 } 
          });
      }
  
  
      function unblockDialog() {
          $("#divEditCustomer").unblock();
      }
  
      function onTest() {
          $("#divEditCustomer").block({
              message: '&lt;h1&gt;Processing&lt;/h1&gt;',
              css: { border: '3px solid #a00' },
              overlayCSS: { backgroundColor: '#ffffff', opacity: 1 } 
          });
      }
  &lt;/script&gt;
  &lt;asp:ScriptManager ID="scriptManager" runat="server" /&gt;
  &lt;h1&gt;
      Customers&lt;/h1&gt;
  &lt;div id="divEditCustomerDlgContainer"&gt;
      &lt;div id="divEditCustomer" style="display: none"&gt;
          &lt;asp:UpdatePanel ID="upnlEditCustomer" runat="server"&gt;
              &lt;ContentTemplate&gt;
                  &lt;asp:PlaceHolder ID="phrEditCustomer" runat="server"&gt;
                      &lt;table cellpadding="3" cellspacing="1"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  *First Name:
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;asp:TextBox ID="txtFirstName" Columns="40" MaxLength="50" runat="server" /&gt;
                                  &lt;asp:RequiredFieldValidator ID="vtxtFirstName" runat="server" EnableClientScript="false"
                                      CssClass="ui-state-error-text" Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtFirstName" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  *Last Name:
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;asp:TextBox ID="txtLastName" Columns="40" MaxLength="50" runat="server" /&gt;
                                  &lt;asp:RequiredFieldValidator ID="vtxtLastName" runat="server" EnableClientScript="false"
                                      CssClass="ui-state-error-text" Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtLastName" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  *Email:
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;asp:TextBox ID="txtEmail" Columns="40" MaxLength="50" runat="server" /&gt;
                                  &lt;asp:RequiredFieldValidator ID="vtxtEmail" runat="server" EnableClientScript="false"
                                      CssClass="ui-state-error-text" Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtEmail" /&gt;
                                  &lt;asp:RegularExpressionValidator ID="vtxtEmail2" runat="server" EnableClientScript="false"
                                      CssClass="ui-state-error-text" ControlToValidate="txtEmail" ValidationExpression=".*@.*\..*"
                                      ErrorMessage="Not a valid email." Display="Dynamic" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  Phone:
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;asp:TextBox ID="txtPhone" Columns="20" MaxLength="20" runat="server" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  Date of Birth:
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;asp:TextBox ID="txtDateOfBirth" Columns="10" MaxLength="20" runat="server" /&gt;
                                  &lt;asp:CompareValidator ID="vtxtDateOfBirth" runat="server" EnableClientScript="false"
                                      CssClass="ui-state-error-text" ControlToValidate="txtDateOfBirth" ErrorMessage="Not a valid date."
                                      Operator="DataTypeCheck" Type="Date" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td colspan="2" align="right"&gt;
                                  &lt;asp:Button ID="btnSave" OnClick="btnSave_Click" Text="Save" runat="server" /&gt;
                                  &lt;asp:Button ID="btnCancel" OnClick="btnCancel_Click" OnClientClick="closeDialog()"
                                      CausesValidation="false" Text="Cancel" runat="server" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/asp:PlaceHolder&gt;
              &lt;/ContentTemplate&gt;
          &lt;/asp:UpdatePanel&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- divEditCustomerDlgContainer --&gt;
  &lt;!--
      &lt;br /&gt;&lt;br /&gt;
      &lt;input type="button" id="btnTest" onclick="onTest" value="Test" /&gt;
      &lt;br /&gt;&lt;br /&gt;
      --&gt;
  &lt;asp:UpdatePanel ID="upnlCustomers" UpdateMode="Conditional" runat="server"&gt;
      &lt;ContentTemplate&gt;
          &lt;asp:LinkButton ID="btnAddCustomer" Text="Add Customer" runat="server" OnClientClick="openDialogAndBlock('Add Customer', 'btnAddCustomer')"
              CausesValidation="false" OnClick="btnAddCustomer_Click"&gt;&lt;/asp:LinkButton&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CellPadding="4"
              CellSpacing="1" OnRowDataBound="gvCustomer_RowDataBound" OnRowCommand="gvCustomers_RowCommand"&gt;
              &lt;Columns&gt;
                  &lt;asp:TemplateField HeaderText="Name"&gt;
                      &lt;ItemTemplate&gt;
                          &lt;%# Eval("FirstName") + " " + Eval("LastName")%&gt;
                      &lt;/ItemTemplate&gt;
                  &lt;/asp:TemplateField&gt;
                  &lt;asp:BoundField DataField="Phone" HeaderText="Phone" /&gt;
                  &lt;asp:BoundField DataField="Email" HeaderText="Email" /&gt;
                  &lt;asp:BoundField DataField="DateOfBirth" HeaderText="Date Of Birth" DataFormatString="{0:MMMM d, yyyy}" /&gt;
                  &lt;asp:TemplateField HeaderText="Actions"&gt;
                      &lt;ItemTemplate&gt;
                          &lt;asp:LinkButton ID="btnEdit" Text="Edit" CommandName="EditCustomer" CausesValidation="false"
                              CommandArgument='&lt;%#Eval("ID")%&gt;' runat="server"&gt;&lt;/asp:LinkButton&gt;
                          &lt;asp:LinkButton ID="btnDelete" Text="Delete" CommandName="DeleteCustomer" CausesValidation="false"
                              CommandArgument='&lt;%#Eval("ID")%&gt;' runat="server"&gt;&lt;/asp:LinkButton&gt;
                      &lt;/ItemTemplate&gt;
                  &lt;/asp:TemplateField&gt;
              &lt;/Columns&gt;
          &lt;/asp:GridView&gt;
          &lt;asp:LinkButton ID="btnRefreshGrid" CausesValidation="false" OnClick="btnRefreshGrid_Click"
              Style="display: none" runat="server"&gt;&lt;/asp:LinkButton&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  &lt;asp:UpdatePanel ID="upnlJsRunner" UpdateMode="Always" runat="server"&gt;
      &lt;ContentTemplate&gt;
          &lt;asp:PlaceHolder ID="phrJsRunner" runat="server"&gt;&lt;/asp:PlaceHolder&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  &lt;script type="text/javascript" src="Content/scripts/ScriptFile.js"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>In the sample, all script tags and style tags are placed inside the head tag.
  what should I do to get it to work in my project in the content page?</p>
  
  <hr>
  
  <p>Edit:</p>
  
  <p>Actually this is a jQuery Dialog example which performs basic add, edit and delete functions on data (Customer)</p>
  
  <p>Current problem is, when the link button "btnAddCustomer" is clicked, dialog box doesn't show, it's probably the javascript is not executing, however, the edit button in gridview using RowCommand can bring up the dialog box.</p>
  
  <p>to better clarify my question, here is the code behind:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  namespace WebApplication2
  {
      public partial class WebForm1 : System.Web.UI.Page
      {
          private CustomerService _customerService;
  
          #region Properties
          private bool IsAdd
          {
              get
              {
                  return (!EditCustomerID.HasValue);
              }
          }
  
          private int? EditCustomerID
          {
              get
              {
                  return (int?)ViewState["EditCustomerID"];
              }
  
              set
              {
                  ViewState["EditCustomerID"] = value;
              }
          }
  
          #endregion
  
  
      protected void Page_Load(object sender, EventArgs e)
      {
          _customerService = new CustomerService();
  
          if (!IsPostBack)
          {
              GridDataBind();
          }
      }
  
  
      private void GridDataBind()
      {
          gvCustomers.DataSource = _customerService.GetAll();
          gvCustomers.DataBind();
      }
  
  
      protected void btnAddCustomer_Click(object sender, EventArgs e)
      {
          this.EditCustomerID = null;
  
          ClearEditCustomerForm();    //In case using non-modal
  
          RegisterStartupScript("jsUnblockDialog", "unblockDialog();");
      }
  
  
      private void ClearEditCustomerForm()
      {
          //Empty out text boxes
          var textBoxes = new List&lt;Control&gt;();
          FindControlsOfType(this.phrEditCustomer, typeof(TextBox), textBoxes);
  
          foreach (TextBox textBox in textBoxes)
              textBox.Text = "";
  
          //Clear validators
          var validators = new List&lt;Control&gt;();
          FindControlsOfType(this.phrEditCustomer, typeof(BaseValidator), validators);
  
          foreach (BaseValidator validator in validators)
              validator.IsValid = true;
      }
  
  
      static public void FindControlsOfType(Control root, Type controlType, List&lt;Control&gt; list)
      {
          if (root.GetType() == controlType || root.GetType().IsSubclassOf(controlType))
          {
              list.Add(root);
          }
  
          //Skip input controls
          if (!root.HasControls())
              return;
  
          foreach (Control control in root.Controls)
          {
              FindControlsOfType(control, controlType, list);
          }
      }
  
  
      protected void gvCustomer_RowDataBound(object sender, GridViewRowEventArgs e)
      {
          if (e.Row.DataItem == null)
              return;
  
          var btnEdit = (LinkButton)e.Row.FindControl("btnEdit");
          btnEdit.OnClientClick = "openDialogAndBlock('Edit Customer', '" + btnEdit.ClientID + "')";
      }
  
  
      protected void gvCustomers_RowCommand(object sender, GridViewCommandEventArgs e)
      {
          int customerID = Convert.ToInt32(e.CommandArgument);
  
          switch (e.CommandName)
          {
              //Can't use just Edit and Delete or need to bypass RowEditing and Deleting
              case "EditCustomer":
                  Customer customer = _customerService.GetByID(customerID);
                  FillEditCustomerForm(customer);
  
                  this.EditCustomerID = customerID;
                  RegisterStartupScript("jsUnblockDialog", "unblockDialog();");
  
                  //Setting timer to test longer loading
                  //Thread.Sleep(2000);
                  break;
  
              case "DeleteCustomer":
                  _customerService.Delete(customerID);
  
                  GridDataBind();
                  break;
          }
      }
  
      private void FillEditCustomerForm(Customer customer)
      {
          txtFirstName.Text = customer.FirstName;
          txtLastName.Text = customer.LastName;
          txtEmail.Text = customer.Email;
          txtPhone.Text = customer.Phone;
          txtDateOfBirth.Text = customer.DateOfBirth.HasValue ? customer.DateOfBirth.Value.ToShortDateString() : "";
      }
  
  
      private void TriggerClientGridRefresh()
      {
          string script = "__doPostBack(\"" + btnRefreshGrid.ClientID + "\", \"\");";
          RegisterStartupScript("jsGridRefresh", script);
      }
  
  
      private void RegisterStartupScript(string key, string script)
      {
          ScriptManager.RegisterStartupScript(phrJsRunner, phrJsRunner.GetType(), key, script, true);
      }
  
      protected void btnSave_Click(object sender, EventArgs e)
      {
          if (!Page.IsValid)
              return;
  
          Customer customer;
  
          if (this.IsAdd)
              customer = new Customer();
          else
              customer = _customerService.GetByID(this.EditCustomerID.Value);
  
          customer.FirstName = txtFirstName.Text;
          customer.LastName = txtLastName.Text;
          customer.Email = txtEmail.Text;
          customer.Phone = txtPhone.Text;
  
          if (!String.IsNullOrEmpty(txtDateOfBirth.Text))
              customer.DateOfBirth = DateTime.Parse(txtDateOfBirth.Text);
  
          if (this.IsAdd)
              _customerService.Add(customer);
          else
              _customerService.Update(customer);
  
          HideEditCustomer();
  
          TriggerClientGridRefresh();
      }
  
  
      private void HideEditCustomer()
      {
          ClearEditCustomerForm();
  
          RegisterStartupScript("jsCloseDialg", "closeDialog();");
      }
  
  
      protected void btnCancel_Click(object sender, EventArgs e)
      {
          HideEditCustomer();
      }
  
  
      protected void btnRefreshGrid_Click(object sender, EventArgs e)
      {
          GridDataBind();
      }
  }
  }
  </code></pre>