jqxWindow and asp update panel – clears controls on submit

[Desai VatsalParticipant]

Hi,

I am working on asp.net webform application. In one of my page, I have an asp update panel in jqxWindow. In update panle I have asp textbox controls and asp submit button. When I click on submit button, value entered in textbox clear automatically and I am not able to get user input on my code behind. Please see my html code below:

<script type="text/javascript">
$(document).ready(function () {
            var theme = getTheme();
            $('#window').jqxWindow({ title: 'Add New', autoOpen: false, height: '100%', width: 1000, isModal: true, theme: theme });

    $('#<%=btnAddNew.ClientID%>').click(function () {
                $('#window').jqxWindow('open');
                return false;
            });
}
</script>
<div id="window">
                <div>Add New</div>
                <div>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <table>
                        <tr>
                            <td style="padding: 4px;"><span class="span">Title :</span></td>
                            <td colspan="3" style="padding: 4px;"> 
                                <asp:TextBox runat="server" ID="txtTitle" Width="635px"/>
                                <asp:RequiredFieldValidator ID="rfvName" runat="server" ValidationGroup="grpMain" ControlToValidate="txtTitle" Display="Dynamic" ErrorMessage="Enter your name." Text="*" ForeColor="Red" />
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 4px;"><span class="span">Start Date :</span></td>
                            <td style="padding: 4px;"> 
                                <div id="jqxStartDateTimeInput"></div>
                                <asp:HiddenField runat="server" ID="txtStartDate"/>                                
                            </td>
                            <td style="padding: 4px;"><span class="span">End Date :</span></td>
                            <td style="padding: 4px;">
                                <div id="jqxEndDateTimeInput"></div>
                                <asp:HiddenField runat="server" ID="txtEndDate"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 4px;"><span class="span">News :</span></td>
                            <td colspan="3" style="padding: 4px;">                                
                                <ckeditor:ckeditorcontrol id="CKEditor1" basepath="/ckeditor/" runat="server" Width="650px" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4" align="right" style="padding: 4px;">
                                <asp:Button runat="server" ID="btnSave" Text="Save" UseSubmitBehavior="false" OnClick="btnSave_Click" />
                                <asp:Button runat="server" ID="btnCancel" Text="Cancel" UseSubmitBehavior="false" OnClick="btnCancel_Click"/>
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
                </div>
            </div>

I am using latest version of ajax control toolkit and jqxWidget(3.5.0).

Thanks,
Vatsal

[NadezhdaParticipant]

Hello Vatsal,

You are missed the closing bracket of the ready function. Here is the corrected version:

<script type="text/javascript">
    $(document).ready(function () {
        var theme = getTheme();
        $('#window').jqxWindow({ title: 'Add New', autoOpen: false, height: '100%', width: 1000, isModal: true, theme: theme });

        $('#<%=btnAddNew.ClientID%>').click(function () {
            $('#window').jqxWindow('open');
            return false;
        });
    });
</script>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Desai VatsalParticipant]

I am sorry but I think I missed it during copy code here but, It’s ( the closing bracket ) there in my page. I double checked it.

So the problem remains same in my page. I am able to open window correctly but the problem is with submit behavior. If I put the update panel in page it self it works good but, when I copy the update panel in jqxWindow ( as I want to see the update panel in popup window ) the unexpected behavior occurs as I mentioned in my post. I can’t get the text value in my code behind on submit click.

If you want any other information please let me know.

Thanks

[Desai VatsalParticipant]

Hi Nadezhda,

Did you get chance to look into this issue? I am waiting if you have found any soln.

Thanks

[NadezhdaParticipant]

Hi Vatsal,

For more information you can look at http://www.jqwidgets.com/community/topic/jqxgrid-with-asp-update-panel/#post-59542.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Desai VatsalParticipant]

Thanks Nadezhda,

I am not sure but I think, the problem might be because of jquery and update panel. So I remove update panel from my page and start using $.ajax() function for ajax call. Now it’s works good.

In addition, I think one should have to use any one of both, either jqwidgets with jquery, or ajax control toolkit. There might be some conflict between both javascript libraries.

Anyways, please let me know if I can help someone to resolve this type of issue in future. I have implemented jqwidgets in both, asp.net MVC and asp.net webforms applications.

Regards,
Vatsal

[Author]

Posts