Solved

Dialoge Box with Custom Buttons

Posted on 2006-07-16
11
167 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
  • 5
  • 4
11 Comments
 
LVL 30

Accepted Solution

by:
third earned 500 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

707 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

14 Experts available now in Live!

Get 1:1 Help Now