Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Dialoge Box with Custom Buttons

Posted on 2006-07-16
11
Medium Priority
?
183 Views
Last Modified: 2008-02-01
I need to know how to create a dialog box in Javascrip so that when a user clicks on a date on a calendar I've made, it asks "What part of your holiday is this?" with buttons saying "Start Date" and "End Date". I'm currently using "confirm" to aks the question but the client was something nicer than "OK" and "Cancel".

How do I build this?
0
Comment
Question by:slamhound
[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
  • 4
11 Comments
 
LVL 30

Accepted Solution

by:
third earned 2000 total points
ID: 17119312
implement a custom confirm dialog through a div

like,

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function yesDelete(){
     alert("You have Deleted the Record!");
     document.getElementById('confirm').style.display='none';
}
function setDiv(){
   if(navigator.appName.substr(0,4)=="Micr"){
     var winW = document.body.offsetWidth;
     var winH = document.body.offsetHeight;
     var divLeft = (winW-400)/2;
     var divTop = (winH-350)/2;
   }
   else{
     var winW = window.innerWidth;
     var winH = window.innerHeight;
     var divLeft = (winW - 400) /2;
     var divTop = (winH-250)/2;
   }
   var theDiv = document.getElementById('confirm');
   theDiv.style.left=divLeft+"px";
   theDiv.style.top=divTop+"px";
   theDiv.style.display="none";
}  
function confirmDel(){
      document.getElementById('confirm').style.display="block";
}  
</script>
</head>
<body onload="setDiv();">
<div style="text-align:center;">
Delete Record? <input type="button" value="Delete" onclick="confirmDel();">
</div>
<div id="confirm" style="position:relative;margin: 10px auto 10px auto;border: solid 2px #000000;background: #f0f0f0;width:400px;height:250px;">
<div style="position:relative;left:0px;top:0px;background:#000066;color:#FFFFFF;font-size:20px;font-weight:bold;width:396px;height:25px;padding-left:38px;border-bottom:solid 2px #000000;">Confirm Delete...</div>
<blockquote style="font-size:18px;font-weight:bold;color:#FF0000;margin-top:50px;">Are you sure you wish to Delete this Record?</blockquote>
<div style="width:396px;text-align:center;padding: 20px 20px 20px 20px;"><input type="button" value="    YES    " onclick="yesDelete();" style="font-weight:bold;margin-right:10px;cursor:pointer;"><input type="button" value="     NO     " style="font-weight:bold;margin-left:10px;cursor:pointer;" onclick="document.getElementById('confirm').style.display='none';">
</div>

</body>
</html>


http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21216528.html
0
 
LVL 10

Author Comment

by:slamhound
ID: 17151832
Thanks for the code but I can't get it working. I just keeps comming up "theDiv has no properties" and I can't get it to see the "confirm" div no matter what I do.

What's wrong here?
0
 
LVL 10

Author Comment

by:slamhound
ID: 17212671
OK, if you don't know how to get the above code working, do you have another solution?
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 30

Expert Comment

by:third
ID: 17212739
sorry for the late reply, i missed your question.

please try the code i posted above. i tested it and it works both on IE and FF.
0
 
LVL 10

Author Comment

by:slamhound
ID: 17212751
I did try the code above but it says that "theDiv as no properties". What am I doing wrong?
0
 
LVL 30

Expert Comment

by:third
ID: 17212762
have you tried the exact code? I have just tested it and works well for me. What browser are you using? or please post your code here.
0
 
LVL 10

Author Comment

by:slamhound
ID: 17212774
The exact code didn't work so I started customising it to see if I could fix it. The last I came up with was:


<script type="text/javascript" language="javascript">

function holStart(){
     alert("You have Deleted the Record!");
     document.getElementById('confirm').style.display='none';
}
function setDiv(){
   if(navigator.appName.substr(0,4)=="Micr"){
     var winW = document.body.offsetWidth;
     var winH = document.body.offsetHeight;
     var divLeft = (winW-400)/2;
     var divTop = (winH-350)/2;
   }
   else{
     var winW = window.innerWidth;
     var winH = window.innerHeight;
     var divLeft = (winW - 400) /2;
     var divTop = (winH-250)/2;
   }
   var theDiv = document.getElementById('confirm');
   theDiv.style.left=divLeft+"px";
   theDiv.style.top=divTop+"px";
   theDiv.style.display="none";
   
}  
function confirmDate(){
      document.getElementById('confirm').style.display="block";
}  

</script>


<%

' ***Begin Function Declaration***

Function GetDaysInMonth(iMonth, iYear)
      Dim dTemp
      dTemp = DateAdd("d", -1, DateSerial(iYear, iMonth + 1, 1))
      GetDaysInMonth = Day(dTemp)
End Function

Function GetWeekdayMonthStartsOn(dAnyDayInTheMonth)
      Dim dTemp
      dTemp = DateAdd("d", -(Day(dAnyDayInTheMonth) - 1), dAnyDayInTheMonth)
      GetWeekdayMonthStartsOn = WeekDay(dTemp)
End Function

Function SubtractOneMonth(dDate)
      SubtractOneMonth = DateAdd("m", -1, dDate)
End Function

Function AddOneMonth(dDate)
      AddOneMonth = DateAdd("m", 1, dDate)
End Function

' ***End Function Declaration***


Public Function ShowCal(PropID)
    Dim dDate     ' Date we're displaying calendar for
    Dim iDIM      ' Days In Month
    Dim iDOW      ' Day Of Week that month starts on
    Dim iCurrent  ' Variable we use to hold current day of month as we write table
    Dim iPosition ' Variable we use to hold current position in table
   
    if Request.Form("FromDate") > " " then
        session("s_FromDate") = Request.Form("FromDate")
    end if

    if Request.Form("ToDate") > " " then
        session("s_ToDate") = Request.Form("ToDate")
    end if
   
    if Request.Form("LastDate") > " " then
        dDate = Request.Form("LastDate")
    Else
        dDate = "01/" & right(cstr(Date()), len(cstr(Date()))-3)
    End if
   
    if request.Form("subNextMonth") > " " then
        dDate = DateAdd("m", 1, dDate)
    end if
    if request.Form("subPrevMonth") > " " then
        dDate = DateAdd("m", -1, dDate)
    end if
   
    LastDate = dDate

    Set rsdates = Server.CreateObject("ADODB.Recordset")
    SQL = "Select DateReserved from tblReservation where PropertyReserved = '" & PropID & "'"
    ' SQL = SQL & " and DateReserved > '" & CleanDate(FirstOfMonth) & "'"
    SQL = SQL & " Order by DateReserved"
    rsdates.Open SQL, conn, 3, 3

    %>



<div style="text-align:center;">
Delete Record? <input type="button" value="Delete" onclick="confirmDate();">
</div>
<div id="confirm" style="position:relative;margin: 10px auto 10px auto;border: solid 1px #000000;background: #f0f0f0;width:400px;height:250px;">
    <div style="position:relative;left:0px;top:0px;background:#000066;color:#FFFFFF;font-size:10px;font-weight:bold;width:396px;height:25px;padding-left:38px;border-bottom:solid 1px #000000;">Which date is this?</div>
    <blockquote style="font-size:10px;font-weight:bold;color:#FF0000;margin-top:50px;">Is this the Start or the End of your holiday?</blockquote>
    <div style="width:396px;text-align:center;padding: 20px 20px 20px 20px;">
        <input type="button" value="    Start    " onclick="holStart();" style="font-weight:bold;margin-right:10px;cursor:pointer;">
        <input type="button" value="     End     " onclick="holEnd();" style="font-weight:bold;margin-left:10px;cursor:pointer;" onclick="document.getElementById('confirm').style.display='none';">
    </div>
</div>


    <table width="650" height="18" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#525051">
    <form name="theForm" method="Post">

  <tr>
    <td align="center"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong>booking dates:</strong></font></td>
  </tr>
</table>

    <input type="hidden" name="LastDate" value="<%=LastDate%>" />
    <input type="hidden" name="FromDate" id="FromDate" value="<%=session("s_FromDate")%>" />
    <input type="hidden" name="ToDate" id="ToDate" value="<%=session("s_ToDate")%>" />
    <table width="650" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF">
    <tbody><tr valign="top">
   
    <td valign="middle"><span class="cal_title_r">
      <%if Month(dDate) <> Month(Date()) then%><input type="submit" value="&lt;&lt;" name="subPrevMonth" /><%end if%>
    </span></td>
    <%
    for x = 1 to 3

    'Now we've got the date.  Now get Days in the choosen month and the day of the week it starts on.
    iDIM = GetDaysInMonth(Month(dDate), Year(dDate))
    iDOW = GetWeekdayMonthStartsOn(dDate)

    %>
    <td>
        <table align="right" cellpadding="0" cellspacing="0" id="calendar" summary="This month's calendar">
        <caption><%= MonthName(Month(dDate)) & "  " & Year(dDate) %></caption>

    <tr>
    <th scope="col" abbr="Sunday" title="Sunday">S</th>
    <th scope="col" abbr="Sunday" title="Sunday">M</th>
    <th scope="col" abbr="Sunday" title="Sunday">T</th>
    <th scope="col" abbr="Sunday" title="Sunday">W</th>
    <th scope="col" abbr="Sunday" title="Sunday">T</th>
    <th scope="col" abbr="Sunday" title="Sunday">F</th>
    <th scope="col" abbr="Sunday" title="Sunday">S</th>
    </tr>
    <%
    ' Write spacer cells at beginning of first row if month doesn't start on a Sunday.
    If iDOW <> 1 Then
          Response.Write vbTab & "<tr>" & vbCrLf
          iPosition = 1
          Do While iPosition < iDOW
                Response.Write vbTab & vbTab & "<td class=""blank"">&nbsp;</td>" & vbCrLf
                iPosition = iPosition + 1
          Loop
    End If

    ' Write days of month in proper day slots
    iCurrent = 1
    iPosition = iDOW
    Do While iCurrent <= iDIM
          ' If we're at the begginning of a row then write TR
          If iPosition = 1 Then
                Response.Write vbTab & "<tr>" & vbCrLf
          End If
          
          OutStyle = 0
          currDate = iCurrent & "/" & Month(dDate) & "/" & Year(dDate)
          
          if isdate(currDate) then
              currDate = CDate(currDate)
              if currDate < Date() then
                  OutStyle = 1
              else
                  FinishNow = False
                if not rsdates.EOF then
                    if rsdates.Fields("DateReserved") < currDate Then
                        do while FinishNow = False
                            rsdates.MoveNext
                            if rsdates.EOF then
                                FinishNow = True
                            Else
                                if rsdates.Fields("DateReserved") >= currDate Then
                                    FinishNow = True
                                End If
                            end if
                        loop
                    End If
                end if
                if not rsdates.EOF then
                    if rsdates.Fields("DateReserved") = currDate then
                        OutStyle = 1
                    end if
                end if
            end if
        end if

        If OutStyle <> 1 Then
            if isdate(session("s_FromDate")) then
                if currDate = cdate(session("s_FromDate")) Then
                    OutStyle = 2
                end if
            end if
        End If
       
        If OutStyle <> 1 Then
            if isdate(session("s_ToDate")) then
                if currDate = cdate(session("s_ToDate")) Then
                    OutStyle = 3
                end if
            end if
        End If
       
        if OutStyle <> 2 and OutStyle <> 3 then
            if isdate(session("s_FromDate")) and isdate(session("s_ToDate")) then
                if session("s_FromDate") > "01/01/1990" and session("s_ToDate") > "01/01/1990" Then
                    if currDate >= cdate(session("s_FromDate")) and currDate <= cdate(session("s_ToDate")) Then
                        if OutStyle = 1 then
                            OutStyle = 5
                        else
                            OutStyle = 4
                        end if
                    end if
                end if
            end if
        end if
       
        Select Case OutStyle
            Case 1 ' Unavailable
                outString = "<td class=""unavailable""><a OnClick=""alert('This date is already booked!')"">" & iCurrent & "</a></td>"
            Case 2 ' Start Holiday
                outString = "<td class=""startbook""><a OnClick=""alert('This is the start of your holiday')"">" & iCurrent & "</a></td>"
            Case 3 ' End Holiday
                outString = "<td class=""endbook""><a OnClick=""alert('This is the end of your holiday')"">" & iCurrent & "</a></td>"
            Case 4 ' Shade holiday
                outString = "<td class=""midbook""><a OnClick=""askStartEnd('" & currDate & "')"">" & iCurrent & "</a></td>"
            Case 5 ' Overlapping a booked day
                outString = "<td class=""overbook""><a OnClick=""alert('This date is already booked!')"">" & iCurrent & "</a></td>"
            Case Else ' Normal
                outString = "<td class=""norm""><a onclick=""confirmDate('" & currDate & "');"" >" & iCurrent & "</a></td>"
        End Select
          
        Response.Write outString & vbCrLf  
          
          ' If we're at the endof a row then write /TR
          If iPosition = 7 Then
                Response.Write vbTab & "</tr>" & vbCrLf
                iPosition = 0
          End If
          
          ' Increment variables
          iCurrent = iCurrent + 1
          iPosition = iPosition + 1
    Loop

    ' Write spacer cells at end of last row if month doesn't end on a Saturday.
    If iPosition <> 1 Then
          Do While iPosition <= 7
                Response.Write vbTab & vbTab & "<td class=""blank"">&nbsp;</td>" & vbCrLf
                iPosition = iPosition + 1
          Loop
          Response.Write vbTab & "</tr>" & vbCrLf
    End If
   
    dDate = DateAdd("m", 1, dDate)
    %>
    </table>
    </td>

    <% next%>
</td>
    <td align="right" valign="middle"><span class="cal_title_r">
      <input type="submit" value="&gt;&gt;" name="subNextMonth" />
    </span></td>
    </tr>
    </tbody></table>
    </form>
<%
    rsdates.Close
    Set rsdates=Nothing

End Function ' ShowCal
%>


0
 
LVL 10

Author Comment

by:slamhound
ID: 17507921
I still couldn't get your code working so have opted for a popup HTML web page that looks like a dialoug box.
0
 
LVL 30

Expert Comment

by:third
ID: 17508387
show me generated html codes please. or a link will work.
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

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-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

688 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