Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
First off I know very little about styles. That said I'm working with a designer who uses "jquery.jqtransform.js". This allows a lot of pretty pictures (not a bad thing I guess). But currently on the form I building I have some very customized validation control class. When I have both the jquery and validation on the same page each control validates (there is a big alignment issue, but that a different concern) but no page validation (the page simple submits).
 
I removed the custom validation and used MS validation controls to no avail. Anyone experience this? Any thoughts?
 
Thanks in advance,
 
Eric
Posted 8-Mar-11 11:01am
ehwash838
Comments
Monjurul Habib at 8-Mar-11 17:08pm
   
Share you code to help you.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

In your ajax return function (on the html page) you need to reapply the jquery commands you run the first time the page loads.
 
jQuery runs over the DOM and does what you tell it to. When the ajax call returns and replaces a part of the page, all runtime changes for that region are lost, so you need to reapply them.
 
Basically you need to call whatever function is called in jqtransform.js and in functions.js on page load on the html element which is replaces.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Sorry for the delay. I've been really busy on other projects. Below are some code snippet from the page. The Validation is a custom control written by someone else, but even if I use Microsoft's built-in validation I get the same issue. This is not a page per-se but an .ascx control on another MVC page. So there is a lot of scripts running at the same time.
 
The commented section at the start is the offending .js code. With it commented out like this validation works normally and prevents the page from posting. If I un-comment the script I get a beautiful page with graphics but no validation. The code-behind only populate controls and post the data.
 
<%--    <script type="text/javascript" src="/content/XXX/js/forms/jquery.jqtransform.js" ></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $('form.style2').jqTransform({ imgPath: '/content/XXX/js/forms/img/' });
            $('#style2').jqTransform({ imgPath: '/content/XXX/js/forms/img/' });
        });
    </script>--%>
...
<section class="int-inner">
<div id="style2">
    <form id="style2" class="style2">
        <table cellpadding="0" cellspacing="0" border="0" class="fieldsettable">
            <tr>
                <td style="width: 260px" class="fieldsettd">
                    <table>
                        <tr>
                            <td>
                                <table border="0" cellspacing="0" cellpadding="0" class="int-table">
                                    <tr>
                                        <td>
                                            <asp:DropDownList ID="ddlXState" runat="server"/>
                                            <asp:HiddenField ID="XState" runat="server" />
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlXsOfInterest" runat="server"/>
                                            <asp:HiddenField ID="XsOfInterest" runat="server" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table border="0" cellspacing="0" cellpadding="0" class="int-table">
                                <tr>
                                    <td>
                                        <asp:TextBox ID="DesiredDate" runat="server" />
                                    </td>
...
        </table>
        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" RelativeTo="Element"
            Position="BottomRight" AutoTooltipify="true" ContentScrolling="Default"  EnableShadow="true"
            HideEvent="ManualClose" ShowEvent="OnFocus" Width="175px" Height="10px" ShowDelay="0">
        </telerik:RadToolTipManager>
    </form>
    </div>
    </section>
</article>
<asp:HiddenField ID="WaterMarksCtl" runat="server" />
<XXX:Validation ID="FV1" runat="server" PostBackControls="Send" >
    <XXX:TestRequired>
        <%--<XXX:TestField ControlID="XsOfInterest" />--%>
        <XXX:TestField ControlID="FirstName" />
        <XXX:TestField ControlID="LastName" />
        <XXX:TestField ControlID="Zip" />
        <XXX:TestField ControlID="Email" />
        <XXX:TestField ControlID="PhoneNumber" />
...
 </XXX:Validation>
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 17 Mar 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid