What's New?

[CLOSED] How to find if dynamically added form input values have changed (v0.8 )

  1. #1
    Jul 30, 2010, 8:53 PM

    [CLOSED] How to find if dynamically added form input values have changed (v0.8 )

    I have a FormPanel that I am adding items to in code-behind when the page is loaded:

                                 <ext:Tab 
                                ID="TabCustomFields"
                                runat="server"
                                Title="Custom Fields" StyleSpec="padding:10px;" Visible="false" AutoScroll="true" Width="400">
                                <Body>
                                   <ext:ColumnLayout ID="ColumnLayout7" runat="server" >
                                        <ext:LayoutColumn ColumnWidth="0.5">
                                            <ext:FormPanel ID="FormPanelCustomFieldLeft" runat="server" Header="false" Frame="false" Border="false">
                                                <Body>                                                
                                                    <ext:FormLayout ID="FormLayoutCustomFieldLeft" runat="server" LabelAlign="Left" LabelWidth="75" LabelSeparator=":">
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Hidden runat="server" ID="HiddenCustomFieldIDs"></ext:Hidden>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Hidden runat="server" ID="HiddenCustomFieldNames"></ext:Hidden>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Hidden runat="server" ID="HiddenCustomFieldDataTypes"></ext:Hidden>
                                                        </ext:Anchor> 
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Hidden runat="server" ID="HiddenCustomFieldInputTypes"></ext:Hidden>
                                                        </ext:Anchor>                                                        
                                                    </ext:FormLayout>
                                                </Body>
                                            </ext:FormPanel>
                                        </ext:LayoutColumn>                                       
                                    </ext:ColumnLayout>      
                                </Body>
                            </ext:Tab>
    'create a text box control
txtTemp = New Coolite.Ext.Web.TextField
txtTemp.ID = CustomFieldFormID
txtTemp.MaxLength = MaxLength
txtTemp.Text = Null2String(Value)
txtTemp.FieldLabel = FieldName

tmpAnchor = New Anchor
tmpAnchor.Items.Add(txtTemp)

FormLayoutCustomFieldLeft.Anchors.Add(tmpAnchor)
    I want to know if any values on the form have been updated so I only save the data if there is a change.

    I tried putting in a javascirpt save function that is called as a Fn when a button is clicked, but it always returns true for isDirty even when nothing has been changed.

    var saveForm = function() {
            alert(FormLayoutCustomFieldLeft.isDirty());
            Coolite.AjaxMethods.Save();
        };
    Does adding the items dynamically cause the FormPanel to be set to IsDirty? Is there a way I can accomplish finding out if any form input has been changed?
    Last edited by Daniil; Aug 02, 2010 at 12:38 PM.
  2. #2
    Jul 30, 2010, 11:10 PM
    Hello!

    I've prepare the example based on your code. It demonstrates that dynamically adding a field doesn't cause the FormPanel to be set to IsDirty. There is true in alert box only if a TextField value has been changed.
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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>Example</title>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            TextField txtTemp = new Coolite.Ext.Web.TextField();
            txtTemp.MaxLength = 50;
            txtTemp.Text = "asas";
            txtTemp.FieldLabel = "Field name";
            Anchor tmpAnchor = new Anchor();
            tmpAnchor.Items.Add(txtTemp);
            FormLayoutCustomFieldLeft.Anchors.Add(tmpAnchor);
        }
    </script>

    <script type="text/javascript">
        var saveForm = function() {
            alert(FormPanelCustomFieldLeft.isDirty());
            //            Coolite.AjaxMethods.Save();
        };
    </script>

</head>
<body>
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <form id="form1" runat="server">
    <ext:FormPanel ID="FormPanelCustomFieldLeft" runat="server" Header="false" Frame="false"
        Border="false" Height="200" Width="200">
        <Body>
            <ext:FormLayout ID="FormLayoutCustomFieldLeft" runat="server" LabelAlign="Left" LabelWidth="75"
                LabelSeparator=":">
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldIDs">
                    </ext:Hidden>
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldNames">
                    </ext:Hidden>
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldDataTypes">
                    </ext:Hidden>
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldInputTypes">
                    </ext:Hidden>
                </ext:Anchor>
            </ext:FormLayout>
        </Body>
    </ext:FormPanel>
    <ext:Button runat="server" Text="save">
        <Listeners>
            <Click Fn="saveForm" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>
    So, please provide us with a full sample code producing this issue.
    Also you can use the workaround. You can just reset isDirty status by using the initFields method from the last post of this topic: http://forums.ext.net/showthread.php...hlight=isDirty
    Last edited by Daniil; Jul 30, 2010 at 11:13 PM.
  3. #3
    Jul 31, 2010, 1:30 PM

    Ahso! That's correct... Thank You.

    I had also added some ComboBoxes dynamically and then used the SetValue() function, which seemed to be setting dirty to true. Sorry about the incomplete example, it turned out to make a big difference :rolleyes:. Thanks for the quick reply, it allowed me to fix the problem with the ComboBox.
    Last edited by iansriley; Jul 31, 2010 at 1:37 PM. Reason: Didn't work the example fully
  4. #4
    Jul 31, 2010, 4:08 PM

    MultiSelect always showing IsDirty = True (a little more help please...)

    I am now adding a multiselect input box into the form. Once again, the IsDirty attribute is always showing as True. Any idea how I can add this control and its items to the form and keep the IsDirty as false.


    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
    <title>Example</title>
 
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim tmpMulti As MultiSelect = New MultiSelect
            tmpMulti.ID = "MultiSelect1"
            tmpMulti.FieldLabel = "MultiSelect1"
            tmpMulti.MultiSelect = True

            Dim li As Coolite.Ext.Web.ListItem
            Dim sli As Coolite.Ext.Web.SelectedListItem

            'we only need the value list, for multi-select lists the option text and values are always the same
            Dim ValueList As String = "one,two,three,four"
            Dim arrValueList As String() = ValueList.Split(",")
                         
            'the values could be comma separated
            Dim arrValues As String() = "two,three".ToString.Split(",")

            Dim ThisValue As String
            Dim j As Integer
            For j = 0 To arrValueList.GetUpperBound(0)
                ThisValue = arrValueList(j)
                             
                'add this item to the list
                li = New Coolite.Ext.Web.ListItem(ThisValue, ThisValue)
                tmpMulti.Items.Add(li)
                             
                'add it as a selected item if necessary
                If Array.IndexOf(arrValues, ThisValue) > -1 Then
                    sli = New Coolite.Ext.Web.SelectedListItem(ThisValue, ThisValue, j)
                    tmpMulti.SelectedItems.Add(sli)
                End If
            Next

            Dim tmpAnchor As Anchor
            tmpAnchor = New Anchor
            tmpAnchor.Items.Add(tmpMulti)
            
            
            FormLayoutCustomFieldLeft.Anchors.Add(tmpAnchor)            
        End Sub
    </script>
 
    <script type="text/javascript">
        var saveForm = function() {
            alert('IsDirty: ' + FormPanelCustomFieldLeft.isDirty());
            //            Coolite.AjaxMethods.Save();
        };
    </script>
 
</head>
<body>
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <form id="form1" runat="server">
    <ext:FormPanel ID="FormPanelCustomFieldLeft" runat="server" Header="false" Frame="false"
        Border="false" Height="200" Width="200">
        <Body>
            <ext:FormLayout ID="FormLayoutCustomFieldLeft" runat="server" LabelAlign="Left" LabelWidth="75"
                LabelSeparator=":">
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldIDs">
                    </ext:Hidden>
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldNames">
                    </ext:Hidden>
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldDataTypes">
                    </ext:Hidden>
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:Hidden runat="server" ID="HiddenCustomFieldInputTypes">
                    </ext:Hidden>
                </ext:Anchor>
            </ext:FormLayout>
        </Body>
    </ext:FormPanel>
    <ext:Button ID="Button1" runat="server" Text="save">
        <Listeners>
            <Click Fn="saveForm" />
        </Listeners>
    </ext:Button>
    </form>
</body>
  5. #5
    Jul 31, 2010, 10:29 PM
    Hi,

    The problem that MultiSelect controls has no init value (it is always empty, originalValue is always empty). Therefore if selection is presented in the MultiSelect then isDirty will be true

    Try the following code to fix the problem
    tmpMulti.Listeners.Render.Handler = "this.originalValue = this.getValue();"
tmpMulti.Listeners.Render.Delay = 50
  6. #6
    Aug 02, 2010, 12:30 PM

    Thanks all...

    Please mark as [CLOSED]

Similar Threads

  1. How to find the modifed or added records in two different gridpanel when a button is clicked
    By Mr.Techno in forum 1.x Help
    Replies: 7
    Last Post: Mar 21, 2012, 10:24 AM
  2. Need to fetch changed values from grid panel dynamically
    By pooja in forum 1.x Help
    Replies: 0
    Last Post: Oct 15, 2010, 6:04 AM
  3. Detecting changed values
    By Hossam hanna in forum 1.x Help
    Replies: 2
    Last Post: Dec 18, 2009, 12:01 PM
  4. Input changed
    By Nime in forum 1.x Help
    Replies: 4
    Last Post: Feb 06, 2009, 11:21 AM
  5. [CLOSED] Something changed in 0.7 using TabPanel dynamically?
    By iwen in forum 1.x Legacy Premium Help
    Replies: 0
    Last Post: Nov 23, 2008, 8:26 AM

Posting Permissions