Solved

using javascript alert box in asp.net

Posted on 2008-06-25
13
1,472 Views
Last Modified: 2011-10-19
I wanted to display a message when a link button is clicked on my web page.
Basically linkbutton is named More Details and when a user clicks that, more description abt a particular test should be displayed...
I followed this example.. which uses alert to display a message box
http://www.devnewz.com/devnewz-3-20061129JavaScriptAlertShowmessagefromASPNETCodebehind.html

It works well, however, when a link button is clicked, the entire page goes blank when the alert box appears.....how can i avoid that???

Is there any other easy way to accomplish what i am looking for?? I looked into modalpopup control.
(.but in my webpage i will have like 20 different link buttons which should do the same message....)

0
Comment
Question by:Pra4444
  • 5
  • 5
  • 3
13 Comments
 
LVL 37

Expert Comment

by:samtran0331
Comment Utility
>>the entire page goes blank when the alert box appears.....how can i avoid that???
Using that example, I don't think you can avoid it.
What's happening is that because the codebehind adds the script to the page with this line:
page.ClientScript.RegisterClientScriptBlock(typeof(Alert), "alert", script);

When the alert gets shown, the rendering of the page is "paused" waiting for the user to respond to the alert message before it continues rendering the page.
0
 
LVL 37

Expert Comment

by:samtran0331
Comment Utility
>>but in my webpage i will have like 20 different link buttons which should do the same message....)

all link buttons will show the *exact* same message?
0
 
LVL 12

Author Comment

by:Pra4444
Comment Utility
Oohh..thats bad that we cant avoid that..

No..all link buttons will not show the same message..There is a text box next to the link button and based on the value it has, message will be different...

If i use a modal popup control, can i somehow use just one modal popup control and change the message depending on which linkbutton is clicked???

What other options do i have??

Thanks.

0
 
LVL 18

Expert Comment

by:carlnorrbom
Comment Utility
How are the linkbuttons added to page, programatically? In that case You could use:

btn.Attributes.Add("onclick", "Javascript:alert('Your static content " & Business logic goes here & "Other static content');")

Just let me know if this is something You can use.

/Carl.
0
 
LVL 12

Author Comment

by:Pra4444
Comment Utility
Carl,

Link buttons can be added either ways..Right now i have added it statically...

Where would i write your code in code behind.?? On page load???

If i use your above code, will i not get a blank page??

Thanks.

0
 
LVL 18

Expert Comment

by:carlnorrbom
Comment Utility
Pra4444,

It should preferably be placed in the Page_Init (which is where I normally dynamically add controls). It will not cause a blank page because we are not posting anything back, it's all client side. What it does is simply adding a "onclick='Javascript:alert('')';" to the button.

/Carl.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 12

Author Comment

by:Pra4444
Comment Utility
So in order for this to work, do i have to add controls dynamically???

Thanks.
0
 
LVL 18

Accepted Solution

by:
carlnorrbom earned 250 total points
Comment Utility
Pra4444,

Eh... no. I guess you could add the logic directly in the VS IDE. Just mark your button, open the properties and You will find "OnClientClick" under "Behaviors". Just add it there. You will however loose the dynamic aspects, but if you don't need that then there is no problem hard coding it into the different buttons. If your content is more or less static I guess that's they way to go for You. _personally_ I prefer to add controls dynamically but hey, that's just me!

/Carl.
0
 
LVL 37

Assisted Solution

by:samtran0331
samtran0331 earned 250 total points
Comment Utility
>> more description abt a particular test should be displayed

Javascript alert is pretty limited on what you can display and how you display it.
If you want it to be a little more professional looking, I would go with a modal popup (yes, you can re-use it)
or even have your linkbuttons do a javascript window.open('details.aspx?ID=...etc.
and when the details page pops up, catch the id for the record and get the record data and you can fully format it since you have a new (and complete) page to work with.
0
 
LVL 12

Author Comment

by:Pra4444
Comment Utility
Carl,
Yes just now i tried it with my static link button and it works well...however i dont like how it looks..i am starting to lean towards modal popup if i can figure out how to do it with multiple controls using the same popup control..( i will probably accept your solution as a assisted one as it worked..Thanks...)

Sam..
I thought about it...I didnt want to bring in a new page just to display 2-3 lines of message...
How can i reuse my modal popup as one of the properties is specifying the targetID which is not going to be the same in my case...is there any similar example that you an point me to??

Thanks for your help...



0
 
LVL 37

Expert Comment

by:samtran0331
Comment Utility
are the link buttons in a gridview? (how are you generating the linkbutton that go to each "particular test"?)
0
 
LVL 12

Author Comment

by:Pra4444
Comment Utility
link buttons are static..and on a web page as just links inside a table.....
0
 
LVL 37

Expert Comment

by:samtran0331
Comment Utility
Since you don't plan on showing a large amount of data and don't care about formatting etc.
AJAX might be more complex than you need too.

Below is a demo page using a script from:
http://www.dynamicdrive.com/dynamicindex5/fixedtooltip.htm

It uses javascript and a css style to provide a nice rollover tooltip....there are other tooltip demos on that site above.

The sample I'm posting shows you how to incorporate the tooltip code to show both a "static" tooltip on a linkbutton as well as wiring it up to linkbuttons in a grid.

If you have a northwind database and a connection to it in your web.config, the below page will work for you.
<%@ Page Language="VB" %>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<script runat="server">
 

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

        If Not Me.IsPostBack Then

            With Me.LinkButton1.Attributes

                .Add("onmouseover", "javascript:fixedtooltip('<strong>Today is:</strong>&nbsp;&nbsp;" & Today.ToShortDateString() & "',this,event,'150px');")

                .Add("onmouseout", "javascript:delayhidetip();")

            End With

        End If

    End Sub

    

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

        If e.Row.RowType = DataControlRowType.DataRow Then

            Dim lbtn As LinkButton = CType(e.Row.FindControl("LinkButton2"), LinkButton)

            With lbtn.Attributes

                .Add("onmouseover", "javascript:fixedtooltip('<strong>Full Name is:</strong>&nbsp;&nbsp;" & e.Row.DataItem("FULL_NAME") & "',this,event,'150px');")

                .Add("onmouseout", "javascript:delayhidetip();")

            End With

        End If

    End Sub

</script>
 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Tool Tip</title>

    <style type="text/css">

        #fixedtipdiv{

            position:absolute;

            padding: 2px;

            border:1px solid black;

            font:normal 10px Verdana;

            line-height:18px;

            z-index:500;

        }

    </style>

</head>

<body>
 

    <script type="text/javascript">

            /***********************************************

            * Fixed ToolTip script- © Dynamic Drive (www.dynamicdrive.com)

            * This notice MUST stay intact for legal use

            * Visit http://www.dynamicdrive.com/ for full source code

            ***********************************************/

            var tipwidth='150px' //default tooltip width

            var tipbgcolor='lightyellow'  //tooltip bgcolor

            var disappeardelay=250  //tooltip disappear speed onMouseout (in miliseconds)

            var vertical_offset="0px" //horizontal offset of tooltip from anchor link

            var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
 

            /////No further editting needed

            var ie4=document.all

            var ns6=document.getElementById&&!document.all

            if (ie4||ns6)

            document.write('<div id="fixedtipdiv" style="visibility:hidden;width:'+tipwidth+';background-color:'+tipbgcolor+'" ></div>')

            function getposOffset(what, offsettype){

            var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

            var parentEl=what.offsetParent;

            while (parentEl!=null){

            totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

            parentEl=parentEl.offsetParent;

            }

            return totaloffset;

            }

            function showhide(obj, e, visible, hidden, tipwidth){

            if (ie4||ns6)

            dropmenuobj.style.left=dropmenuobj.style.top=-500

            if (tipwidth!=""){

            dropmenuobj.widthobj=dropmenuobj.style

            dropmenuobj.widthobj.width=tipwidth

            }

            if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

            obj.visibility=visible

            else if (e.type=="click")

            obj.visibility=hidden

            }

            function iecompattest(){

            return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

            }

            function clearbrowseredge(obj, whichedge){

            var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1

            if (whichedge=="rightedge"){

            var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

            dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

            if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

            edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

            }

            else{

            var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

            dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

            if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)

            edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

            }

            return edgeoffset

            }

            function fixedtooltip(menucontents, obj, e, tipwidth){

            if (window.event) event.cancelBubble=true

            else if (e.stopPropagation) e.stopPropagation()

            clearhidetip()

            dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv

            dropmenuobj.innerHTML=menucontents
 

            if (ie4||ns6){

            showhide(dropmenuobj.style, e, "visible", "hidden", tipwidth)

            dropmenuobj.x=getposOffset(obj, "left")

            dropmenuobj.y=getposOffset(obj, "top")

            dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

            dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

            }

            }

            function hidetip(e){

            if (typeof dropmenuobj!="undefined"){

            if (ie4||ns6)

            dropmenuobj.style.visibility="hidden"

            }

            }

            function delayhidetip(){

            if (ie4||ns6)

            delayhide=setTimeout("hidetip()",disappeardelay)

            }

            function clearhidetip(){

            if (typeof delayhide!="undefined")

            clearTimeout(delayhide)

            }

    </script>
 

    <form id="form1" runat="server">

        <asp:LinkButton ID="LinkButton1" runat="server">Static Link</asp:LinkButton>

        <br />

        <br />

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"

            SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [LastName]+', '+[FirstName] AS [FULL_NAME]  FROM [Employees]">

        </asp:SqlDataSource>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"

            DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">

            <Columns>

                <asp:TemplateField HeaderText="EmployeeID" InsertVisible="False" SortExpression="EmployeeID">

                    <ItemTemplate>

                        <asp:LinkButton ID="LinkButton2" runat="server" Text='<%# Eval("EmployeeID") %>'></asp:LinkButton>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </form>

</body>

</html>

Open in new window

2008-06-26-03.07.27-PM.jpg
2008-06-26-03.07.36-PM.jpg
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now