how to catch input change event when moving to another tab

9 posts, 1 answers
  1. Lina
    Lina avatar
    31 posts
    Member since:
    May 2013

    Posted 04 Jan 2015 Link to this post

    i have RadTabStrip, with General and other tabs. there are input fields and save button on the general tab.

    the purpose of the code bellow is to enable the general save button only when the user changed a value on general tab and don't allow him to continue to another tab if there is unsaved data.
    the accomplish it:
    1) $('#MainContent_RadPageViewGeneral :input').change(...
    using this event I identify changes in any input and enable the save button
    2) OnClientTabSelecting
    using this event i identify when the user try to move to another tab, and block him in case he
    didn't perform save (if the save button is enabled)

    it's working beside in one case when the user enter the general tab, perform first change in a field and
    then press on another tab without moving to another field inside this tab. in this case, change event isn't called, so the save
    button didn't become enable and the user is allowed to move to another tab, even tough the field was modified.

    how can i catch this event of modification on first time and pressing on another tab?

    piece of code (.aspx):
    <telerik:RadTabStrip ID="RadTabStripEditClaim" runat="server" MultiPageID="RadMultiPageEditClaim" SelectedIndex="0" OnClientTabSelecting="OnClientTabSelecting">
        <Tabs>
            <telerik:RadTab Text="General" Enabled="true" Value="General"></telerik:RadTab>
            <telerik:RadTab Text="Files" Enabled="true"  Value="Files"></telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
      
    <telerik:RadMultiPage ID="RadMultiPageEditClaim" runat="server" SelectedIndex="0" >
        <telerik:RadPageView ID="RadPageViewGeneral" runat="server">
            <fieldset>
            </fieldset>
        </telerik:RadPageView>
        ....
     </telerik:RadMultiPage>  
      
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <%--load jquery library--%>
       <script type="text/javascript">
            $(document).ready(function () {
      
                //disable button <Save and Continue Update>
                $("#MainContent_ButtonSubmit").attr('disabled', 'disabled');
                $("#MainContent_ButtonSubmit").css({
                    "cursor": "default",
                    //"box-shadow": "none"
                });
              
                //in case the user perform changes in General tab
                $('#MainContent_RadPageViewGeneral :input').change(function () {
                    //disable button <Save and Continue Update>
                    $("#MainContent_ButtonSubmit").removeAttr('disabled');
                    $("#MainContent_ButtonSubmit").css({
                        "cursor": "pointer",
                        //    "box-shadow": "1px 0px 6px #333"
                    });
                });
              
            });
                          
             //client-side event occurs when the user selects a tab, before the tab is selected.
            function OnClientTabSelecting(sender, eventArgs) {
              
                var pageView = multiPage.get_selectedPageView();
                if (pageView.get_id() == 'MainContent_RadPageViewGeneral')
                {
                    //we are exiting General tab
                    //check status of save button, if not disabled then we need to save
                    var disabledValue = $("#MainContent_ButtonSubmit").attr('disabled');
                    if (disabledValue != 'disabled')
                    {
                        alert('You cannot continue without performing save');
                        eventArgs.set_cancel(true); //stop the selection
                        return;
                    }
                }
              
                eventArgs.set_cancel(false);
            }
      
         
        </script>
    </telerik:RadCodeBlock>
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Jan 2015 Link to this post

    Hi Lina,

    In order to achieve the described behavior you can use keypress or keyup events to determine when the user has entered a value in the input field. This way the input would not need to be blurred to enable the button. The rest of the logic can be similar to the current one.

    Additionally, you can also set the second Tab as disabled initially. To enable the Tab you can use the Click event of the Button control. This way you will ensure that the Tab will not be accessible before the Button was clicked.

    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lina
    Lina avatar
    31 posts
    Member since:
    May 2013

    Posted 08 Jan 2015 in reply to Viktor Tachev Link to this post

    thanks Victor.
    I want the second tab to be disabled only if the user perform changes in the first tab and didn't save them.
    There are a lot of fields in the first tab with different types
    asp:TextBox,telerik:RadMaskedTextBox, asp:DropDownList(inside asp:UpdatePanel), telerik:RadComboBox, telerik:RadDatePicker etc.
    keypress and keyup won't give me the information if the field was changes. I don't won't to go to each field and check if it was changed.
    This is why i have used the change event.
    in case no field was change i don't want the second (and other tabs) to be disabled, so i can't disabled initially.

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 13 Jan 2015 Link to this post

    Hello Lina,
     
    The change event for an input element is fired after the element loses focus. For dropdown controls it is fired automatically after the user selects an option with the mouse.

    In order to implement the functionality you can attach keypress to the input elements and implement the same logic you currently have. You can use the change event for the dropdown controls.

    $('#MainContent_RadPageViewGeneral :input').keypress(function () {
        //disable button <Save and Continue Update>
        $("#MainContent_ButtonSubmit").removeAttr('disabled');
        $("#MainContent_ButtonSubmit").css({
            "cursor": "pointer",
            //    "box-shadow": "1px 0px 6px #333"
        });
    });

    This way the button will be enabled when the user starts typing in an input. Thus, changing tabs will be prevented until the changes are saved.



    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Lina
    Lina avatar
    31 posts
    Member since:
    May 2013

    Posted 19 Jan 2015 in reply to Viktor Tachev Link to this post

    Thanks viktor,

    I tried your solution but the problem is that keypress is called even if there are no changes (like pressing on tab).
    i have many controls and type of controls on this page and i prefer not to check one by one if something was modified.
    how can i know if something was modified using keypress event or is there another solution?

    in addition, when there are controls with UpdatePanel AutoPostBack="True" (for example i have drop down as bellow), in some point the change event isn't called. Do you know how to prevent it?

     <asp:UpdatePanel ID="panelA" runat="server">
       <ContentTemplate>
          <asp:DropDownList ID="controlA" runat="server" CssClass="select"
              AutoPostBack="true" OnSelectedIndexChanged="DropDownListA_SelectedIndexChanged" >   
        </asp:DropDownList>

  7. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 21 Jan 2015 Link to this post

    Hello Lina,

    In order to determine if the pressed key was a character you would need to implement custom logic. Check out the following stackoverflow threads that describes an approach you can use.


    Regarding your other query. I am afraid that it is not related to our controls as the behavior is observed with standard DropDownList control. Nevertheless I would recommend checking the following resources that describe similar issue and possible solutions:




    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Lina
    Lina avatar
    31 posts
    Member since:
    May 2013

    Posted 23 Jan 2015 in reply to Viktor Tachev Link to this post

    thanks Viktor,

    1) the links didn't contain complete solution, because i had problems with delete, paste etc.
    I found another solution for the text box. I'm saving the controls
    values in the beginning, and on keyup I'm checking if the value was
    changed.

    2) for complete solution, i still need the .change event to work.
    the problem is that the change of jquery isn't called in some cases.
         $('#MainContent_RadPageViewGeneral :input').change(function ()
    in another tab we call to RadAjaxManager1_AjaxRequest to update the general tab.
    the method defined in <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    after the call to this method, changing the value in telerik:RadComboBox, which is under update panel don't call the jquery .change event.

  9. Lina
    Lina avatar
    31 posts
    Member since:
    May 2013

    Posted 26 Jan 2015 in reply to Lina Link to this post

    moving .change from
        $(document).ready(function () {
    to be under
     function pageLoad(sender, args) {
    solved the problem that the jquery change event wasn't called after postback.

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Jan 2015 Link to this post

    Hi Lina,

    I am glad that the issue was resolved. In case you would like additional information on the differences between $(document).ready() and pageLoad() you would find the following blog post interesting.



    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017