Welcome Guest Search | Active Topics | Sign In | Register

SpellChecker (needing ability to dynamically change the ControlToCheck via javascript) Options
Darrell Reinke
Posted: Friday, September 12, 2008 12:10:29 PM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Good Afternoon,

I have been working with your spell checker object and spell check dialog for a while and the functionality has been great, however, I would like to ask if it would be possible to add some functionality to be able to change the "ControlToCheck" property dynamically via javascript? I know you can set it server side, but I need to be able to change it clientside. My users do not want to have to spell check a text box if no changes have been made to it. I am using a hidden field that is populated with the "OnTextChanged" event in order to see if a user has made any changes.

Please let me know if you need any further clarification or if I am missing some syntatically on the javascript side.

Thank you,

Darrell
eo_support
Posted: Friday, September 12, 2008 12:15:15 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

Thank you very much for your feedback. I do not believe that is possible in the current version. But we will certainly keep that in mind when we develop our future versions.

Thanks!
Darrell Reinke
Posted: Friday, September 12, 2008 1:58:30 PM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Thank you. I have been trying to find a work around for this, but have been unsuccessful. I have tried using the endSpellCheck_handler to kick off the new spell checker object "spchkNOIYTD", but when it executes the spchkNOIYTD.start() it will flash the the spell check box (I only found this out because of an alert("should be working") right after the start statement. if you remove that alert the dialog will immediately dissappear.

I can provide a mock up of the functionality I am trying to accomplish if needed. Below is a snippet of what I am trying to execute.


Code: JavaScript
function chkWaterFallTabUpdate(tabIndex){

         g_oldPageIndex = tabIndex;
         
         var mpCapital = eo_GetObject("<%=mpDataEntry.ClientID%>");
         var tbWaterfall = eo_GetObject('<%=tbWaterfall.ClientID%>');

         //alert(tabIndex);        
         switch (tabIndex)
         {
            case 0:

               var noi_cur_spell_chk_indic = document.getElementById("noi_cur_spell_chk_indic");

               if (noi_cur_spell_chk_indic.value == "Y") {
                  noi_cur_spell_chk_indic.value = "N";
                  eo_GetObject("&lt;%=QIRSpChkDlg.ClientID%&gt;").initData = "noi_ytd_spell_chk_indic, " + tabIndex;
                  //Since Spell Checking will be performed, then reselect the page to be spell checked.
                  tbWaterfall.setSelectedIndex(tabIndex);
                  mpCapital.selectPageByIndex(tabIndex);
                  document.getElementById("lblYTDNOI").innerHTML = ""
                  document.getElementById("lblCURNOI").innerHTML = "Performing Spell Check..."
                  alert(spchkNOI.ControlToCheck);//="txtNOICurrentQtrComments"
                  spchkNOI.start();

                  var noi_ytd_spell_chk_indic = document.getElementById("noi_ytd_spell_chk_indic");
                  if (noi_ytd_spell_chk_indic.value == "Y")
                  {
                     document.getElementById("lblYTDNOI").innerHTML = "Performing Spell Check..."
                     spchkNOIYTD.start();
                  }
               }
               else {
                  //See if the Next Dialog Box needs to be spell checked.  If so, then complete request
                  var noi_ytd_spell_chk_indic = document.getElementById("noi_ytd_spell_chk_indic");
                                 
                  if (noi_ytd_spell_chk_indic.value == "Y") {
                     noi_ytd_spell_chk_indic.value = "N";
                     //Since Spell Checking will be performed, then reselect the page to be spell checked.
                     tbWaterfall.setSelectedIndex(tabIndex);
                     mpCapital.selectPageByIndex(tabIndex);
                     document.getElementById("lblCURNOI").innerHTML = ""
                     document.getElementById("lblYTDNOI").innerHTML = "Performing Spell Check..."
                     spchkNOIYTD.start();
                   }               
               }
               
               break;
            case 1:
               break;      
         }
      }
            
      function message_handler(control, name, message)
      {
          if (name == "no_error") {
            //You can place more code in this function to indicate if you can proceed to the next step
            return;    //silent "no_error" message
          }
      }
          
      function endSpellCheck_handler(dialog, arg){
            
         var sTxtSpellCheck = eo_GetObject("&lt;%=QIRSpChkDlg.ClientID%&gt;").initData;
         
         //txtArray contains {"next spell check to invoke", "tabIndex to Move to"}
         txtArray = sTxtSpellCheck.split(",");
         var sSpellCheckType = txtArray[0];
         //alert(sSpellCheckType + " ---- " + txtArray[1]);

         if (sSpellCheckType == "noi_ytd_spell_chk_indic")
         {
               //See if the Next Dialog Box needs to be spell checked.  If so, then complete request
               var noi_ytd_spell_chk_indic = document.getElementById("noi_ytd_spell_chk_indic");
               if (noi_ytd_spell_chk_indic.value == "Y")
               {
                  document.getElementById("lblCURNOI").innerHTML = ""
                  document.getElementById("lblYTDNOI").innerHTML = "Performing Spell Check..."
                  //alert("value is:  " + noi_ytd_spell_chk_indic.value);
                  noi_ytd_spell_chk_indic.value = "N";
                  eo_GetObject("&lt;%=QIRSpChkDlg.ClientID%&gt;").initData = "complete";
                  spchkNOIYTD.start();
                  //alert("should be started");
                 }
               
         }


Thank you for your time.

Darrell
Darrell Reinke
Posted: Tuesday, September 16, 2008 6:49:43 AM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Just wondering if you have had a chance to respond to the previous post?

Thank you for your time,

Darrell
eo_support
Posted: Tuesday, September 16, 2008 6:59:22 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

Sorry that we missed the previous post. We looked into the issue again and noticed that you can actually pass the element to start. It will be something like this:

Code: JavaScript
checker.start(document.getElementById("TextBox1"));


Please try that and see if it works for you.

Thanks!
Darrell Reinke
Posted: Tuesday, September 30, 2008 8:46:07 AM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Thank you for your input, however, I finally figured out how to get the functionality I needed using a javascript method you had informed me of in a different post. I have included a sample screen in case other users of your product are interested in similar functionality. Basically, this test screen will allow you to enter in text in either of the comment boxes and it will only spell check the text boxes whose information has changed.

Please take this as is. I know it is not very pretty, but it serves its purpose for testing out functionality. I am hoping that this is the most effcient way of producing this type of functionality. If you have a chance to test this out and know of a better way to accomplish this functionality, I would appreciate the input.

By the way, once you have the basic functionality of these objects down, development time is soooo much faster. Thank you for your time and work with providing developers with a great product!

Please place the following code in the Page_Load (Handles Me.Load) event of the ASPX page:
Code: Visual Basic.NET
txtNOICurrentQtrComments.Attributes.Add("onkeyup", "onTextChangedComment(this.id)")
      txtNOIYtdComments.Attributes.Add("onkeyup", "onTextChangedComment(this.id)")


sample ASPX page with Javascript
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SpellCheckerTabs.aspx.vb" Inherits="QIR.SpellCheckerTabs" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Spell Check Example</title>
    
    <script language=javascript >
      function onTextChangedComment(sObject){
         //This function will switch the spell check indicator that so the spell check function will know what to check.
         switch (sObject)
         {
            case "txtNOICurrentQtrComments":
               var noi_cur_spell_chk_indic = document.getElementById("noi_cur_spell_chk_indic");
               noi_cur_spell_chk_indic.value = "Y";
               break;
            case "txtNOIYtdComments":
               var noi_ytd_spell_chk_indic = document.getElementById("noi_ytd_spell_chk_indic");
               noi_ytd_spell_chk_indic.value = "Y";
               break;
            case "txtCurrentQtrCapitalCmt":
               break;      
            case "txtYTDCapitalCmt":
               break;
            case "txtCBIComments":
               break;
            
         }
      }    
      //*********************************************************************************************************************
      //**Spell Checking 
      //*********************************************************************************************************************
      var g_oldPageIndex = null;
      var g_oldTabIndex = null;
      
      function tabstrip_onclick(e, info)
      {
          window.setTimeout("check_multipage()", 10);
      }

      function check_multipage()
      {
         var mp = eo_GetObject("<%=mpSpellCheck.ClientID%>");
         var newIndex = mp.getSelectedIndex();

         if (newIndex != g_oldPageIndex)
         {
             if (g_oldPageIndex != null)
             {
               //the old tab page has just been hidden, do something you need
               //to do when the page is being hidden here
               //chkWaterFallTabUpdate(g_oldPageIndex);
               document.getElementById("lblDebug").innerHTML = "OldPageIndex When Not NULL:  " + g_oldPageIndex
               chkWaterFallTabUpdate(g_oldPageIndex);
              }
              else {
               chkWaterFallTabUpdate(0);
               document.getElementById("lblDebug").innerHTML = "Execute Spell Check for Tab 0 (g_oldIndex is NULL)"
               //return false;
              }
                       
             g_oldPageIndex = parseInt(newIndex);
             //the new tab page has just been displayed, do something you need
             //to do when the page is displayed here
          }
          
         document.getElementById("lblDebug2").innerHTML = "OldPageIndex:  " + g_oldPageIndex

      }
      
      function chkWaterFallTabUpdate(tabIndex){

         g_oldPageIndex = tabIndex;
         
         var mpCapital = eo_GetObject("<%=mpSpellCheck.ClientID%>");
         var tabSpellExample = eo_GetObject('<%=tabSpellExample.ClientID%>');

         //alert(tabIndex);        
         switch (tabIndex)
         {
            case 0:

               var noi_cur_spell_chk_indic = document.getElementById("noi_cur_spell_chk_indic");

               if (noi_cur_spell_chk_indic.value == "Y") {
                  noi_cur_spell_chk_indic.value = "N";
                  eo_GetObject("<%=SpellCheckerDialog1.ClientID%>").initData = "noi_ytd_spell_chk_indic, " + tabIndex + ", end_spell_check1";
                  //Since Spell Checking will be performed, then reselect the page to be spell checked.
                  tabSpellExample.setSelectedIndex(tabIndex);
                  mpCapital.selectPageByIndex(tabIndex);
                  document.getElementById("lblYTDNOI").innerHTML = ""
                  document.getElementById("lblCURNOI").innerHTML = "Performing Spell Check..."
                  alert("Spell Check for the first box should appear.");
                  spchkNOI.start();

               }
               else {
                  //See if the Next Dialog Box needs to be spell checked.  If so, then complete request
                  var noi_ytd_spell_chk_indic = document.getElementById("noi_ytd_spell_chk_indic");
                                 
                  if (noi_ytd_spell_chk_indic.value == "Y") {
                     noi_ytd_spell_chk_indic.value = "N";
                     //Since Spell Checking will be performed, then reselect the page to be spell checked.
                     eo_GetObject("<%=SpellCheckerDialog1.ClientID%>").initData = "complete";
                     tabSpellExample.setSelectedIndex(tabIndex);
                     mpCapital.selectPageByIndex(tabIndex);
                     document.getElementById("lblCURNOI").innerHTML = ""
                     document.getElementById("lblYTDNOI").innerHTML = "Performing Spell Check..."
                     alert("Spell Check for the second box should appear.");
                     spchkNOIYTD.start();
                   }
               }
               
               break;
            case 1:
               break;      
         }
      }
      
     
      function message_handler(control, name, message)
      {
          if (name == "no_error") {
            //You can place more code in this function to indicate if you can proceed to the next step
            return;    //silent "no_error" message
          }
      }
          
      function endSpellCheck_handler(dialog, arg){

         var sTxtSpellCheck = eo_GetObject("<%=SpellCheckerDialog1.ClientID%>").initData;
         
         //txtArray contains {"next spell check to invoke", "tabIndex to Move to"}
         txtArray = sTxtSpellCheck.split(",");
         var sSpellCheckType = txtArray[0];
         var sEndOneSpellCheck = "";
         if ( txtArray.length == 3 ) {
            sEndOneSpellCheck = txtArray[2]         
            //alert(sSpellCheckType + " ---- " + txtArray[1] + " ---- " + txtArray[2]);
         } 
         else {
            sEndOneSpellCheck = sSpellCheckType;
         }
         
         if (sSpellCheckType == "noi_ytd_spell_chk_indic")
         {
               //See if the Next Dialog Box needs to be spell checked.  If so, then complete request
               var noi_ytd_spell_chk_indic = document.getElementById("noi_ytd_spell_chk_indic");
               if (noi_ytd_spell_chk_indic.value == "Y")
               {
                  document.getElementById("lblCURNOI").innerHTML = ""
                  document.getElementById("lblYTDNOI").innerHTML = "Performing Spell Check..."
                  alert("value is:  " + noi_ytd_spell_chk_indic.value);
                  noi_ytd_spell_chk_indic.value = "N";
                  eo_GetObject("<%=SpellCheckerDialog1.ClientID%>").initData = "complete";
                  alert("second dialog should appear.......");
                  window.setTimeout("start_spellchecker('spchkNOIYTD')", 10);
                 }
               
         }

         //Clear out the SpellCheck Messages.
         switch (sEndOneSpellCheck)
         {
            case "end_spell_check1":
               document.getElementById("lblCURNOI").innerHTML = ""
               break;
            case "complete":
               document.getElementById("lblCURNOI").innerHTML = ""
               document.getElementById("lblYTDNOI").innerHTML = ""
               
               //Insert Code to Perform a client side postback if necessary.
               break;
         }
         
      }
      
      function start_spellchecker(sStartSpellCheck) {
      
         switch (sStartSpellCheck)
         {
            case "spchkNOIYTD":
               //alert("NOI YTD Present and ready to be started");            
               spchkNOIYTD.start();
               break;
            case "spchkNOI":
               spchkNOI.start();
               break;
         }
            
      
      }      
      //*********************************************************************************************************************
      //**END Spell Checking
      //*********************************************************************************************************************
     </script>    
</head>
<body>
    <form id="frmSpellCheckExample" runat="server">
    <div>
       <asp:Label ID="lblInstructions" runat="server" Font-Bold="True" Font-Names="Tahoma" Font-Size="11px" Text='Change some text in each text box and then click on the tab "Click here to trigger tab1 spell check.'></asp:Label>
       <eo:TabStrip ID="tabSpellExample" runat="server" ControlSkinID="None" DesignOptions-BackColor="239, 235, 222" MultiPageID="mpSpellCheck" ClientSideOnItemClick="tabstrip_onclick">
          <LookItems>
             <eo:TabItem Image-BackgroundRepeat="RepeatX" Image-Mode="TextBackground" Image-SelectedUrl="00010205" Image-Url="00010202" ItemID="_Default" LeftIcon-SelectedUrl="00010204"
                LeftIcon-Url="00010201" RightIcon-SelectedUrl="00010206" RightIcon-Url="00010203">
                <SubGroup OverlapDepth="8" Style-CssText="font-family: tahoma; font-size: 8pt; background-image: url(00010200); background-repeat: repeat-x; cursor: hand;">
                </SubGroup>
             </eo:TabItem>
          </LookItems>
          <TopGroup>
             <Items>
                <eo:TabItem PageViewID="pvSpell1" Text-Html="Spell Tab1">
                </eo:TabItem>
                <eo:TabItem PageViewID="pvSpell2" Text-Html="Click Here to trigger tab 1 spell check.">
                </eo:TabItem>
             </Items>
          </TopGroup>
       </eo:TabStrip>
       <eo:MultiPage ID="mpSpellCheck" runat="server" Height="180px" Width="100%">
          <eo:PageView ID="pvSpell1" runat="server" Width="100%">
                     <table cellpadding=0 cellspacing=0 border=0>
                        <tr>
                           <td>
                              <asp:Label ID="Label23" runat="server" Text="Current Quarter" Font-Bold="True" Font-Names="tahoma" Font-Size="XX-Small"></asp:Label></td>
                           <td style="width: 32px">
                           </td>
                        </tr>
                        <tr>
                           <td>
                               </td>
                           <td style="width: 32px">
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <asp:Label ID="Label25" runat="server" Text="Comments:" Font-Bold="True" Font-Names="tahoma" Font-Size="XX-Small"></asp:Label> 
                              <asp:Label ID="lblCURNOI" runat="server" Font-Bold="True" Font-Names="tahoma" Font-Size="XX-Small"
                                 ForeColor="Red" Width="314px"></asp:Label>
                              <asp:HiddenField ID="noi_cur_spell_chk_indic" runat="server" Value="N" />
                           </td>
                           <td style="width: 32px">
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <asp:TextBox ID="txtNOICurrentQtrComments" Font-Names="Tahoma" Font-Size="XX-Small" runat="server" Height="115px" TextMode="MultiLine" Width="663px">This sampel uses a dialog to display the spell errors. Please refer to the product documentaton under section "Using Spell Checker Dialog" for more deteils.</asp:TextBox>                           
                           </td>
                           <td style="width: 32px">
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <asp:Label ID="Label24" runat="server" Text="Year to Date" Font-Bold="True" Font-Names="tahoma" Font-Size="XX-Small"></asp:Label></td>
                           <td style="width: 32px">
                           </td>
                        </tr>     
                        <tr>
                           <td>
                               </td>
                           <td style="width: 32px">
                           </td>
                        </tr> 
                        <tr>
                           <td>
                              <asp:Label ID="Label26" runat="server" Text="Comments:" Font-Bold="True" Font-Names="tahoma" Font-Size="XX-Small"></asp:Label> 
                              <asp:Label ID="lblYTDNOI" runat="server" Font-Bold="True" Font-Names="tahoma" Font-Size="XX-Small"
                                 ForeColor="Red" Width="314px"></asp:Label>
                              <asp:HiddenField ID="noi_ytd_spell_chk_indic" runat="server" EnableViewState="False" Value="N" />
                           </td>
                           <td style="width: 32px">
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <asp:TextBox ID="txtNOIYtdComments" Font-Names="Tahoma" Font-Size="XX-Small" runat="server" Height="115px" TextMode="MultiLine" Width="663px">Text Box Two:  Chack to see iif it will find thes spellling msitakes.</asp:TextBox>                           
                           </td>
                           <td style="width: 32px" valign="bottom">
                              </td>
                        </tr>                                          
                     </table>
                     <eo:SpellChecker ID="spchkNOI" runat="server" ControlToCheck="txtNOICurrentQtrComments"
                        DialogID="SpellCheckerDialog1" ClientSideOnMessage="message_handler">
                     </eo:SpellChecker><eo:SpellChecker ID="spchkNOIYTD" runat="server" ControlToCheck="txtNOIYtdComments"
                        DialogID="SpellCheckerDialog1" ClientSideOnMessage="message_handler">
                     </eo:SpellChecker>
          </eo:PageView>
    <eo:PageView ID="pvSpell2" runat="server" Width="100%">
          </eo:PageView>
       </eo:MultiPage>
    <asp:Label ID="lblDebug" runat="server" Font-Names="tahoma" Font-Size="11px" Text="Debug...." Width="765px"></asp:Label><br />
    <asp:Label ID="lblDebug2" runat="server" Font-Names="tahoma" Font-Size="11px" Text="Debug...." Width="765px"></asp:Label><br />
       <eo:SpellCheckerDialog ID="SpellCheckerDialog1" runat="server" AllowResize="True" BorderColor="#335C88" BorderStyle="Solid" BorderWidth="1px" CloseButtonUrl="00070101"
          ControlSkinID="None" HeaderHtml="Dialog Title" Height="200px" MinimizeButtonUrl="00070102" ResizeImageUrl="00020014" RestoreButtonUrl="00070103" ShadowColor="LightGray"
          ShadowDepth="3" Width="300px" ClientSideOnEnd="endSpellCheck_handler">
          <ContentStyleActive CssText="border-top: #335c88 1px solid; background-color: #e5f1fd" />
          <HeaderStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 11px; background-image: url(00070104); padding-bottom: 3px; padding-top: 3px; font-family: tahoma" />
          <FooterStyleActive CssText="background-color: #e5f1fd; padding-bottom: 8px;" />
       </eo:SpellCheckerDialog>
    </div>
    </form>
</body>
</html>


eo_support
Posted: Tuesday, September 30, 2008 9:02:41 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Thank you very much for sharing. Would you mind if we include this in our sample project?
Darrell Reinke
Posted: Tuesday, September 30, 2008 9:06:51 AM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Not at all. Please share. If I can make someone else's coding life easier, I am all for it!

Like I said, it probably needs to be "cleaned up" because I didn't fully make the test screen as "generic" as it should be.
eo_support
Posted: Tuesday, September 30, 2008 9:09:43 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Thank you very much! Don't worry about "clean up". We will try to make it as generic as possible.
Darrell Reinke
Posted: Tuesday, September 30, 2008 9:19:52 AM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Sounds good. Happy coding!!!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.