Solved

using javascript alert box in asp.net

Posted on 2008-06-25
13
1,504 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
13 Comments
 
LVL 37

Expert Comment

by:samtran0331
ID: 21869089
>>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
ID: 21869099
>>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
ID: 21869173
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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 18

Expert Comment

by:carlnorrbom
ID: 21869321
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
ID: 21869423
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
ID: 21869478
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
 
LVL 12

Author Comment

by:Pra4444
ID: 21869506
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
ID: 21869653
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
ID: 21869682
>> 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
ID: 21869747
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
ID: 21877827
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
ID: 21877902
link buttons are static..and on a web page as just links inside a table.....
0
 
LVL 37

Expert Comment

by:samtran0331
ID: 21878026
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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

710 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