This is a migrated thread and some comments may be shown as answers.

how to catch input change event when moving to another tab

8 Answers 1855 Views
Input
This is a migrated thread and some comments may be shown as answers.
Lina
Top achievements
Rank 1
Lina asked on 04 Jan 2015, 12:21 PM
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>

8 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 07 Jan 2015, 03:18 PM
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.

 
0
Lina
Top achievements
Rank 1
answered on 08 Jan 2015, 01:44 PM
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.

0
Viktor Tachev
Telerik team
answered on 13 Jan 2015, 08:57 AM
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.

 
0
Lina
Top achievements
Rank 1
answered on 19 Jan 2015, 07:58 AM
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>

0
Accepted
Viktor Tachev
Telerik team
answered on 21 Jan 2015, 03:26 PM
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.

 
0
Lina
Top achievements
Rank 1
answered on 23 Jan 2015, 05:31 PM
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.

0
Lina
Top achievements
Rank 1
answered on 26 Jan 2015, 08:20 AM
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.

0
Viktor Tachev
Telerik team
answered on 28 Jan 2015, 11:43 AM
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.

 
Tags
Input
Asked by
Lina
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Lina
Top achievements
Rank 1
Share this question
or