Datepicker popup not working in Safari Mobile

[Michael Hurse]

Hi
I have an aspx page with two datetimepickers. Wehn I select the calendar icon in Safari Mobile the popups do not appear at all. They appear in every other browser. Is there somewhere obvious I should be doing for Safari Mobile that I don't know about
cheers
Michael

[Marin]

Hello Michael,

 I tried to reproduce the problem on mobile safari with one of our demos but to no avail. The RadDatePciker should be running normally on mobile browsers. Is it possible to post as well the markup for the problematic page? Also you can check whether there any javascript errors on the page that might prevent the popup from appearing.

Greetings,
Marin
the Telerik team

[Michael Hurse]

Hi

Thanks for your time and expertise Marin. Here is the relevant code as requested. I am not receiving any javascript errors when running in different browsers.
cheers
Michael

javascript:

 <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
  <script type="text/javascript">
    function closeHistory(){
   var pvid = <%= VisitID %>;
    var o = document.getElementById("<%= lblNoteType.ClientID %>").innerHTML
    if (o == "VisitNew"  || o == "FileNoteNew")
    {   
      if (confirm("Click 'OK' to close or 'Cancel' if you need to save the note?"))
      {
         if (window.opener)
         {
          window.opener.focus();
         }
         window.close();
         return;
    }
  }
  else
  {
    window.close();
   }
   }

   function OnClientLoad(sender, args)
   {
      //startCounter();
      sender.add_spellCheckLoaded(function()
      {
        var spell = sender.get_ajaxSpellCheck();

        spell.add_spellCheckStart(function(sender, args)
        {
         });

         spell.add_spellCheckEnd(function(sender, args)
         {
         });
        }
       );
      }

   function DDLMode_OnClientSelectedIndexChanging(sender, args)
   {
   var hiddenControl = '<%= hidDate.ClientID %>';
     if (document.getElementById(hiddenControl).value == "")
     {
        alert("Please set the date and time first.");
        args.set_cancel(true);                 
     }
   }

  function EnableNotes()
  {
    var  NoteType = document.getElementById("<%= lblNoteType.ClientID %>").innerHTML
        if ( NoteType  == "VisitNew" && (document.getElementById("<%= chkDiag.ClientID %>").checked || document.getElementById("<%= chkCBTSP.ClientID %>").checked || document.getElementById("<%= chkCBTCS.ClientID %>").checked || document.getElementById("<%= chkPE.ClientID %>").checked || document.getElementById("<%= chkCBTBS.ClientID %>").checked || document.getElementById("<%= chkCBTRS.ClientID %>").checked || document.getElementById("<%= chkIS.ClientID %>").checked || document.getElementById("<%= txtOtherDiagnosis.ClientID %>").value != "" || document.getElementById("<%= txtOther.ClientID %>").value != ""))
        {
            document.getElementById("<%= lblMessage.ClientID%>").innerHTML = "You can now add comments.";
            document.getElementById("btnHdrSave").style.display = "inline";
            document.getElementById("btnSave").style.display = "inline";
           document.getElementById('tdNewNotes').style.display = "inline";
           document.getElementById("<%=tdPreviousNotes.ClientID%>").width = "30%";
            var editor = $find("<%=txtVisitNotes.ClientID%>");   
            editor.set_mode(1);          }
        else if (NoteType == "FileNoteNew")
        {
            document.getElementById("<%= lblMessage.ClientID %>").innerHTML = "You can now add comments.";
            document.getElementById("btnHdrSave").style.display = "inline";
            document.getElementById("btnSave").style.display = "inline";
            var editor = $find("<%=txtVisitNotes.ClientID%>");   
            editor.set_mode(1);    

        }
        else
        {
            document.getElementById("btnHdrSave").style.display = "none";
            document.getElementById("btnSave").style.display = "none";
            var editor = $find("<%=txtVisitNotes.ClientID%>");   
            editor.set_mode(4);    
        }
}   
   
function CheckStatus(editor)
{
    var NoteType = document.getElementById("<%= lblNoteType.ClientID %>").innerHTML;
    var combo = $find("<%= ddlMode.ClientID %>");
if (NoteType  == "VisitNew" && (document.getElementById("<%= chkDiag.ClientID %>").checked
    || document.getElementById("<%= chkCBTSP.ClientID %>").checked || document.getElementById("<%= chkCBTCS.ClientID %>").checked
    || document.getElementById("<%= chkPE.ClientID %>").checked || document.getElementById("<%= chkCBTBS.ClientID %>").checked
    || document.getElementById("<%= chkCBTRS.ClientID %>").checked || document.getElementById("<%= chkIS.ClientID %>").checked
    || document.getElementById("<%= txtOtherDiagnosis.ClientID %>").value != ""
    || document.getElementById("<%= txtOther.ClientID %>").value != ""))
            {
            document.getElementById("btnHdrSave").style.display = "inline";
            document.getElementById("btnSave").style.display = "inline";
            document.getElementById("<%= lblMessage.ClientID %>").innerHTML = "You can now add comments.";
            var editor = $find("<%=txtVisitNotes.ClientID%>");   
            editor.set_mode(1);    
        }
        else if (NoteType == "FileNoteNew")
        {
        if (combo.get_value() == "") {
            document.getElementById("btnHdrSave").style.display = "none";
            document.getElementById("btnSave").style.display = "none";
            editor.set_mode(4);    
        }
        else
        {
              document.getElementById("btnHdrSave").style.display = "inline";
              document.getElementById("btnSave").style.display = "inline";
              var editor = $find("<%=txtVisitNotes.ClientID%>");   
              editor.set_mode(1);    
            }
        }
        else
        {
            document.getElementById("btnHdrSave").style.display = "none";
            document.getElementById("btnSave").style.display = "none";
            var editor = $find("<%=txtVisitNotes.ClientID%>");   
            editor.set_mode(4);    
        }
}
    
function Visible_Click(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'inline')
    {
    e.style.display = 'none';
    }
  else if(e.style.display == 'none')
    {
    e.style.display = 'inline';
    }
}    

function SetVisibility() {
  var hiddenControl = '<%= hidBrowser.ClientID %>';
  var o = document.getElementById("<%= lblNoteType.ClientID %>").innerHTML

  var agent=navigator.userAgent.toLowerCase();
  var is_ipad = ((agent.indexOf('ipad'))!=-1);
  if (is_ipad) {
  document.getElementById(hiddenControl).value = "iPad";
  }
  else
  {
  document.getElementById(hiddenControl).value = "Normal";
  }
    if (o == "VisitOld"  || o == "FileNoteOld")
    {
      document.getElementById("<% = chkDiag.ClientID%>").disabled = true;
      document.getElementById("<% = chkCBTBS.ClientID%>").disabled = true;
      document.getElementById("<% = chkCBTRS.ClientID%>").disabled = true;
      document.getElementById("<% = chkCBTCS.ClientID%>").disabled = true;
      document.getElementById("<% = chkCBTSP.ClientID%>").disabled = true;
      document.getElementById("<% = chkPE.ClientID%>").disabled = true;
      document.getElementById("<% = chkIS.ClientID%>").disabled = true;
      document.getElementById("<% = txtOtherDiagnosis.ClientID%>").disabled = true;
      document.getElementById("<% = txtOther.ClientID%>").disabled = true;
      document.getElementById("<%=tdNewNotes.ClientID%>").style.display = "none";
      document.getElementById("<%=tdPreviousNotes.ClientID%>").width = "100%";
      var datePicker = document.getElementById("DTPickers");
      datePicker.style.display = "none";
      document.getElementById("btnHdrSave").style.display = "none";
      document.getElementById("btnSave").style.display = "none";

    }
    else if(o == "VisitNew")
    {
     document.getElementById('tdNewNotes').style.display = "none";
    }
    else if((o == "FileNoteNew") && document.getElementById("<% = lblDateTime.ClientID%>").innerHTML == "" )
    {
     document.getElementById('tdNewNotes').style.display = "none";
      var datePicker = document.getElementById("<% = rtpStartTime.ClientID%>");
      document.getElementById("btnHdrSave").style.display = "none";
      document.getElementById("btnSave").style.display = "none";
    }
  }

jquery:
 $(document).ready(function()
 {
  if ($("#<%= lblNoteType.ClientID %>").html() == "VisitNew" || $("#<%= lblNoteType.ClientID %>").html() == "FileNoteNew")
  {
   setTimeout(saveMe, 10000);
  }
 });

 function AllowSave()
 {
  if ($("#<%= lblNoteType.ClientID %>").html() == "VisitNew" &&
      $("#<%= hidDate.ClientID %>").val() != "" &&
      $("#<%= hidTime.ClientID %>").val() != "" &&
    ($("#<%= chkDiag.ClientID %>")[0].checked || $("#<%= chkCBTSP.ClientID %>")[0].checked ||
    $("#<%= chkCBTCS.ClientID %>")[0].checked || $("#<%= chkPE.ClientID %>")[0].checked ||
    $("#<%= chkCBTBS.ClientID %>")[0].checked || $("#<%= chkCBTRS.ClientID %>")[0].checked ||
    $("#<%= chkIS.ClientID %>")[0].checked || $("#<%= txtOtherDiagnosis.ClientID %>").val() != "" ||
    $("#<%= txtOther.ClientID %>").val() != ""))
  {
   return true;
  }
  else if ($("#<%= lblNoteType.ClientID %>").html() == "FileNoteNew" &&
           $find("<%= ddlMode.ClientID %>").get_value() != "" &&
       $("#<%= hidDate.ClientID %>").val() != "" &&
       $("#<%= hidTime.ClientID %>").val() != "")
  {
   return true;
  }
  else
  {
   return false;
  }
 }
 
 function saveMe()
 {
  if (AllowSave())
  {

   var jsonData = '{' +
   '"visitID":' + $("#<%= hidVisitID.ClientID %>").val() + ',' +
   '"patientID":<%= PatientID %>,' +
   '"NoteType":"' + $("#<%= lblNoteType.ClientID %>").html() + '",' +
   '"Mode":"' + $find("<%= ddlMode.ClientID %>").get_value() + '",' +
   '"date":"' + $("#<%= hidDate.ClientID %>").val() + '",' +
   '"time":"' + $("#<%= hidTime.ClientID %>").val() + '",' +
   '"st_diagnosis":' + $("#<%= chkDiag.ClientID %>")[0].checked + ',' +
   '"st_psycho_ed":' + $("#<%= chkPE.ClientID %>")[0].checked + ',' +
   '"st_interpersonal":' + $("#<%= chkIS.ClientID %>")[0].checked + ',' +
   '"st_cbt_behaviour":' + $("#<%= chkCBTBS.ClientID %>")[0].checked + ',' +
   '"st_cbt_cognitive":' + $("#<%= chkCBTCS.ClientID %>")[0].checked + ',' +
   '"st_cbt_relaxation":' + $("#<%= chkCBTRS.ClientID %>")[0].checked + ',' +
   '"st_cbt_skills":' + $("#<%= chkCBTSP.ClientID %>")[0].checked + ',' +
   '"st_cbt_other":"' + $find("<%= txtOtherDiagnosis.ClientID %>").get_value() + '",' +
   '"st_other":"' + $find("<%= txtOther.ClientID %>").get_value() + '",' +
   '"Note":"' + $find("<%= txtVisitNotes.ClientID %>").get_html(true).replace(/(\n)/g, "") +'",' +
   '"userID": <%= UserID %>,' +
   '"userName":"<%= UserName %>",' +
   '"hasLastNotes":<%= HasLastNotes %>' +
   '}';

   $.ajax({
    type: "POST",
    url: "PatientNotes.aspx/Save_Data",
    data: jsonData,
    //processData: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg)
    {
     $("#<%= hidVisitID.ClientID %>").val(msg.d);
     setTimeout(saveMe, 10000);
    }
   });
  }
  else
  {
   setTimeout(saveMe, 10000);
  }
 }

 
html:
<telerik:RadDatePicker ID="rdpDV" runat="server" Skin="Telerik" Width="200px" MinDate="1890-01-01"

 OnSelectedDateChanged="SelectedDatesChanged" AutoPostBack="true">

 <DateInput EmptyMessage="Date of Note" LabelCssClass="riLabel radLabelCss_Telerik"

 Skin="Telerik">

 </DateInput>

 <Calendar ShowRowHeaders="False" Skin="Telerik" FastNavigationStep="12" UseColumnHeadersAsSelectors="False"

 UseRowHeadersAsSelectors="False" ViewSelectorText="x">

 <SpecialDays>

 <telerik:RadCalendarDay Date="">

</telerik:RadCalendarDay>

 </SpecialDays>

 </Calendar>

 <DatePopupButton HoverImageUrl="" ImageUrl="" />

 </telerik:RadDatePicker>

 

<telerik:RadTimePicker ID="rtpStartTime" runat="server" Skin="Telerik" AutoPostBack="true"

 OnSelectedDateChanged="SelectedDatesChanged">

 <TimePopupButton CssClass="" HoverImageUrl="" ImageUrl="" />

 <TimeView CellSpacing="-1" Culture="English (Australia)" Interval="00:30:00" StartTime="06:0:0"

 Skin="Telerik">

 </TimeView>

 <DateInput LabelCssClass="" Width="">

 </DateInput>

 <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">

 </Calendar>

 <DatePopupButton CssClass="" HoverImageUrl="" ImageUrl="" Visible="False" />

 </telerik:RadTimePicker>

code behind:

 

protected void SelectedDatesChanged(object sender, EventArgs e)

 {
if (rdpDV.SelectedDate.HasValue && rtpStartTime.SelectedDate.HasValue)

 {

 lblMessage.ForeColor = System.Drawing.Color.Black;

blMessage.Text =  "Now enter appointment mode";

lblMessage.Visible = true;

DateTime dt = rtpStartTime.SelectedDate.Value;

 string time = dt.ToShortTimeString().ToString();

 lblDateTime.Text = rdpDV.SelectedDate.Value.ToShortDateString() + " at " + time;
lblDateTime.ForeColor = System.Drawing.Color.White;

 hidDate.Value = Convert.ToString(rdpDV.SelectedDate);

 hidTime.Value = dt.ToShortTimeString().ToString();

 ViewState["DATE"] = hidDate.Value;

ViewState["TIME"] = hidTime.Value;
}

}

[Marin]

Hi Michael,

 I ran a sample page with the two pickers that you have posted and it was working fine in mobile safari. Maybe there is some other code that causes the problem. I noticed that in the javascript and the code behind you reference a lot of labels, checkboxes and other controls that were not in the provided markup. You can try a clean page only with two pickers to see if the problem also occurs there. Otherwise we will need the full page code that replicates the problem to investigate the issue further.

Kind regards,
Marin
the Telerik team

[Michael Hurse]

Hi Marin
I found my way through iPad settings to enable the debug console. As a result I can see errors that arises from RadEditor incompatibility on Safari Mobile.  I have listed them below. Could you please advise what my options are in resolving these problems:

• set to "Display" which the browser does not like.
• autoResizeHeight="True"

thank you kindly

Michael

[Rumen]

Hi,

Could you please explain what do you mean by "set to "Display" which the browser does not like"? If possible provide a screenshot or Jing video demonstrating the problem.

I tested RadEditor in iPad simulator and I verified that the AutoResizeHeight="true" feature functions as expected as shown in the following video: http://screencast.com/t/eR21h3dEbsDU.

Here is the RadEditor's declaration used in the test:

<telerik:RadEditor ID="RadEditor1"  runat="server" AutoResizeHeight="true">
    <Content></Content>
</telerik:RadEditor>

Note that in the older iOS systems, Safari does not offer rich text editing and for this reason the editor is rendered as a standard textarea. Rich Text Editing was introduced in iOS 5.

Greetings,
Rumen
the Telerik team

[Michael Hurse]

Hi
Sorry I am just going over my notes and I can see it has been a while since I submitted a reply to this forum. I must also apologise because my last posting was useless. So my first problem is that I have an aspx page which has a basic radEditor. Here is its tag:

                

<telerik:RadEditor ID="txtDischargeSummary" runat="server" EditModes="Design" Height="300px" Skin="Telerik"

ToolsFile="BasicTools.xml" Width="99%">               

 <Content>
</Content>                

</telerik:RadEditor>

I can add data to it but when I use the Safari Mobile debug console to see what errors I am getting I only get 1:

Javascript: Error
undefined
Sys.InvalidOperationException: Sys.InvalidOperationException: 'editModes' is not a property or an existing field.

I know this is the reason why my date calendar is not popping up because if I change the radEditor to a asp:textbox the popup works just fine.

I have a very similar problem on a different page but can we work on this one first.
thx
Michael

[Rumen]

Hello,

Do you experience the problem by removing the EditModes property? You can also remove all the properties except the ID and runat ones and test again.

Also test with the latest Q2 2012 build of RadControls for ASP.NET AJAX.

I tested the EditModes property by setting it to "Design" only but I was unable to reproduce the JS error as shown in the following demo: http://screencast.com/t/XM1BwdLEpmYS.


Best regards,
Rumen
the Telerik team