Archive for the ‘Javascript’ Category

Javascript Confirm on ASP LinkButton

July 9th, 2009 1 Comment

In your C# web application, a common task is adding items to a database. But often just as important is the ability to delete items! The first method to accomplish this goal is linking an event to a LinkButton. This event links to a method that deletes. However, because a delete operation is a times permanent change, it is a good idea to force a user to confirm the decision to delete an item. This is to protect against accidental clicks.

Javascript Confirm on LinkButton Screenshot

Javascript Confirm on LinkButton Screenshot

As shown in the screenshot above, when a user clicks on a LinkButton, a Javascript confirm dialog box will appear with two buttons. Clicking OK will tell the method to continue and fire the event while clicking Cancel will prevent the event for firing. In this example, our text shows as “Are you sure?“, which is completely customizable to any text.

Via the LinkButton’s Properties Window
This is a quick and easy change to do via the LinkButton’s Property Window, so here’s how to do it!

Javascript Confirm on LinkButton

Javascript Confirm on LinkButton

  1. Goto the LinkButton’s properties window.
  2. Find the OnClientClick attribute.
  3. Add the following: return confirm(‘Are you sure?’);

Programmatically
Even though changing this via the properties window is easy, there are still those who prefer to programmatically make the change. Here’s the code below for the example in our screenshot.

<asp:LinkButton ID="lbJavascriptConfirm" runat="server"
 onclientclick="return confirm('Are you sure?');">Delete</asp:LinkButton>

And now this is how to make the change both programmatically and via a LinkButton’s property window. Please remember that this method will require that the web user has Javascript enabled. Additionally, the example uses this in a LinkButton, but any ASP Web Control that has the OnClientClick property.

Posted in C#, Javascript Tags: , , , , , ,

Change Web Browser Title with Javascript

April 13th, 2009 5 Comments

Every web browser has a title at the top of the page and is specified in HTML. By default, the the title tag is located in the header of the HTML. Despite the default in HTML, it is possible to change the default title name with javascript. Below is a the basic snippet of javascript code that changes the current Web Browser title to “The Web Page title has been changed“.

document.title = "The Web Page title has been changed"

In the live demo below, the above snippet is inserted into the onclick event of an html input button. Before clicking the button below, note the current browser window title.

After clicking the button above, you will notice that the web browser title has been changed to The Web Page title has now been changed. Below is the actual code on how the button was created.

<input type="button" onclick="document.title='The Web Page title has been changed'" />
Posted in Javascript Tags: , ,

How to Hide/Show Html Elements

January 21st, 2009 6 Comments

An HTML website contains mainly text, images, and link controls. A common way of organizing all the controls is by placing the elements into a <div> control. With a <div> control, you can manipulate everything from the font to placement in an HTML page using CSS (cascading style sheets). Note that although the CSS code for manipulation is beyond the scope of this tutorial, we will be using CSS to state whether or not to display a div box.

We begin with an example of a <div> control. At this point, the code does nothing special.

<body>
  <div id="myDivBox">
    <h2>My Title</h2>
    <p>This is some sample text</p>
  </div>
</body>

Next, we add CSS that controls whether or not to display the content of the <div> control. The CSS attribute is the keyword ‘display’. The ‘display’ keyword accepts the values ‘block‘, ‘none‘, ‘list-item‘, and ‘inline‘. Our example will utilize ‘none’ that hides the <div> control and ‘block‘ that will display it (as a block as opposed to inline). Our <div> control will intially begin hidden, so let’s add a style attribute to the <div> control as shown below.

<body>
  <div id="myDivBox" style="display:none;">
    <h2>My Title</h2>
    <p>This is some sample text</p>
  </div>
</body>

Next, we will add javascript method to control the CSS attributes of our <div> control. As with all javascript, the script belongs in the head. The method is called toggleDiv and accepts no inputs. What the script is doing is checking if the <div> control is in a ‘block‘ or ‘none‘ state. Whichever state is found, we set the opposite.

<head>
  <script type="text/javascript">
    function toggleDiv()
    {
      if (document.getElementById("myDivBox").style.display == "block")
      {
        document.getElementById("myDivBox").style.display = "none";
      }
      else
      {
        document.getElementById("myDivBox").style.display = "block";
      }
    }
  </script>
</head>

Finally, we will add an input button that will toggle whether or not to display the <div> control. The input button will call the javascript method via an onClick action.

<body>
  <input type="button" value="Toggle" onclick="toggleDiv()">
  <div id="myDivBox" style="display:none;">
    <h2>My Title</h2>
    <p>This is some sample text</p>
  </div>
</body>

Here is a working example:

A complete HTML example is listed below. To run this, simply copy the code into a file with an html extension.

<html>
  <head>
    <script type="text/javascript">
      function toggleDiv()
      {
        if (document.getElementById("myDivBox").style.display == "block")
        {
          document.getElementById("myDivBox").style.display = "none";
        }
        else
        {
          document.getElementById("myDivBox").style.display = "block";
        }
      }
    </script>
  </head>
  <body>
    <input type="button" value="Toggle" onclick="toggleDiv()">
    <div id="myDivBox" style="display:none;">
      <h2>My Title</h2>
      <p>This is some sample text</p>
    </div>
  </body>
</html>
Posted in HTML, Javascript Tags: , , ,
« Older Entries