jquery validations not working in updatepanel ?

Posted by Praveenraj under jQuery on 3/13/2013 | Points: 10 | Views : 5613 | Status : [Member] | Replies : 13
jquery validations are not working with updatepanel.without updatepanel it is working fine.whenever we put the updatepanel it was not working.
that time am added one script file under scriptmanager. validations working fine .but page refreshing in every click..what is the problem.can u tell me.




Responses

Posted by: Somu475 on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
Hi Praveenraj,

If you are using UpdatePanel and if you don't want to refresh the page everytime then do like this.

Specify UpdateMode="Conditional" and ChildrenAsTriggers="true".
And in Triggers give the control Id of the control on whose click the page should be refreshed.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

<Triggers>
<asp:PostBackTrigger ControlID="BtnRegister" />
</Triggers>
<ContentTemplate>
----------
<ContentTemplate>
</asp:UpdatePanel>

Let me know if you need something else.

-Somu

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Praveenraj on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
hi somu thanks for your reply. i tried this. but page will postback(refreshed). if page will refreshed why we are putting updatepanel.

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Dotnetrajanikanth on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
Hi Praveenraj,

I hope you are using
$(document).ready(function(){

})


Instead use pageLoad.

function pageLoad()

{
//Your code;
}


This will help. I faced similar issue and i solved it using this.

____________
www.flickr.com/photos/psdesigner/

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Praveenraj on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
hi rajinikanth..thanks for your reply. actually we have some jquery validations script are there.only we were used it at form action. that means form id="validate". this validate function declared in js files.

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Dotnetrajanikanth on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
Praveenraj,

Can you paste the js file code??

By that time check this link too

http://www.codeproject.com/Articles/534587/ASP-NET-jQuery-is-not-Working-in-UpdatePanels

____________
www.flickr.com/photos/psdesigner/

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Praveenraj on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
<head runat="server">
<title>Show Inline validation Messages</title>

<link href="css/template.css" rel="stylesheet" type="text/css" />
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#form1").validationEngine();
});
</script>

</head>
<body>
<form id="form1" runat="server" >
<asp:ScriptManager ID="scro" runat="server" ></asp:ScriptManager>

<asp:UpdatePanel ID="ups" runat="server" ><ContentTemplate>
<table align="center">
<tr>
<td colspan="2">
<div style="border: 1px solid #CCCCCC; padding: 10px;">
<table cellpadding="0" cellspacing="30" style=" background-color:White">
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtfname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtlname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr >
<td>Email:</td>
<td><asp:TextBox ID="txtemail" runat="server" CssClass="validate[required,custom[email]" />
</td>
</tr>
<tr >
<td>Url:</td>
<td><asp:TextBox ID="txtUrl" runat="server" CssClass="validate[required,custom[url]] text-input" />

</td>
</tr>
<tr>
<td valign="top">Address:</td>
<td>
<asp:TextBox ID="txtaddress" runat="server" TextMode="MultiLine" Rows="8" Columns="26"/></td>
</tr>
<tr>
<td>State:</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" CssClass="validate[required] radio">
<asp:ListItem value="">Choose State</asp:ListItem>
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem value="AL">Alabama </asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem value="AZ">Arizona</asp:ListItem>
<asp:ListItem value="AR">Arkansas</asp:ListItem>
<asp:ListItem value="CA">California</asp:ListItem>
<asp:ListItem value="CO">Colorado</asp:ListItem>
<asp:ListItem value="CT">Connecticut</asp:ListItem>
<asp:ListItem value="DE">Delaware</asp:ListItem>
<asp:ListItem value="FL">Florida</asp:ListItem>
<asp:ListItem value="GA">Georgia</asp:ListItem>
<asp:ListItem value="HI">Hawaii</asp:ListItem>
<asp:ListItem value="ID">Idaho</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Zip:</td>
<td>
<asp:TextBox ID="txtZip" runat="server" CssClass="validate[required,custom[integer]] text-input"/>
</td>
</tr>
<tr>
<td> I Agree Conditions</td>
<td>
<input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="text" id="txt" style="display:none" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblResult" runat="server" Font-Bold="true"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</ContentTemplate>

</asp:UpdatePanel>
</form>

</body>

this is .aspx code.this is have 3 js file are there

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Praveenraj on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
these are 3 js file
 Download source file

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Dotnetrajanikanth on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
Try to change
<script type="text/javascript"> 

jQuery(document).ready(function() {
jQuery("#form1").validationEngine();
});
</script>


[I ][B ]to

<script type="text/javascript">
function pageLoad()
{
jQuery("#form1").validationEngine();
}
</script>

____________
www.flickr.com/photos/psdesigner/

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Praveenraj on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
validations and serverside code executed at a time.

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Dotnetrajanikanth on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
<script type="text/javascript"> 

function pageLoad()
{
if(! jQuery("#form1").validationEngine())
{
event.returnValue = false;
return false
}
}
</script>


Which browser are you using??

____________
www.flickr.com/photos/psdesigner/

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Praveenraj on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
chrome and mozilla

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Praveenraj on: 3/13/2013 [Member] Starter | Points: 25

Up
0
Down
<script type="text/javascript">

function pageLoad()

{

if(! jQuery("#form1").validationEngine())

{

event.returnValue = false;

return false

}

}

</script>

using this script ..,it can validations.but.,cs code is not working.serverside code will not executed.

Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rimi1289 on: 4/26/2013 [Member] Starter | Points: 25

Up
0
Down
You have to ReInitialize all the controls for JQuery to function after a postback.

    $(document).ready(function() {

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

BindControls();
});


function InitializeRequest(sender, args) { }
function EndRequest(sender, args) { BindControls(); }


function BindControls() {


JQuery functions in here...

}


Praveenraj, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response