I am trying to figure out why my AJAX call to a Web service is working on every browser but the IPad. I have an MVC 3 application which makes a Web Service call using Ajax.Actionlink to a Sharepoint API. The call works great everywhere, but the experience seems to fall short on the IPad. on the IPad, I am getting results similar to if you implemented the Ajax.ActionLink without referencing the jquery and Microsoft js scripts. I have tried enabling the Developer tools on the IPad and no longer get an errors. (The only error i was receiving was i tried using the CDN library Microsoft uses and the IPad didn't like that at all.) Now those errors are gone and the call redirects the page to a Partial view. This should not be happening as every other browser (including Safari for windows) seems to display a loading gif and then load the information within the same page. No redirection. Any ideas?
Site Master:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<%-- <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js" type="text/javascript"/>
<script src="•http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript" />
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js" type="text/javascript"/>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.js" type="text/javascript"/>--%>
</head>
<body style="background-color:White">
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Index: ( main page)
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<%:/* This calls the Ajax namespace to invoke an async call to a controller method
* we are using the POST method because the GET cache's the callback results
* Refernce:
* http://stackoverflow.com/questions/7282497/tinymce-in-mvc-3-razor-ajax-actionlinks-fail-after-first-ajax-call */
Ajax.ActionLink("Click to Get CIMS Folder", "CallWebService", new AjaxOptions()
{
UpdateTargetId = "placeHolder",
InsertionMode = InsertionMode.Replace,
LoadingElementId = "indicator",
HttpMethod="POST",
})
%>
<div id="indicator">
<img alt="AJAX Indicator" src="<%= Url.Content("~/images/ajax-loader.gif") %>" />
</div>
<div id="placeHolder">
</div>
PartialView (Makecall.ascx)
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AsyncCallTest.Models.SharepointModel>" %>
<table border="1">
<tr>
<td><font color="Black">Folder Name</font></td>
<td><font color="Black">Link</font></td>
</tr>
<tr>
<% if (Model != null)
{
for (int fileCounter = 0; fileCounter < Model.FolderList.Count(); fileCounter++ )
{
foreach (var file in Model.FolderList[fileCounter].FolderFiles)
{
%>
<td><font color="Black"> <%: file.FileName%></font></td>
<td><font color="Black"> <a href ='<%: file.FileWebPath%>'><%: file.FileWebPath%></a></font></td>
</tr>
<%
}
}
}
%>
</table>
the CDN's were the issue, so I changed the
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript" />
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js" type="text/javascript"/>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.js" type="text/javascript"/>
to
<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax") %>" type="text/javascript"></script>
Now it works. Thank you. Just odd that it worked in everything but IPad Safari and Javascript was enabled, so you would think it would have worked.
Related
This is what I'm getting in the browser after the page makes an Ajax request and the session has been timeout, I'm implementing OmniFaces FullAjaxExceptionHandler.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<partial-response id="j_id1">
<changes>
<update id="javax.faces.ViewRoot">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/WebWorkflow/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" /><link type="text/css" rel="stylesheet" href="/WebWorkflow/javax.faces.resource/css/xpm2.css.xhtml" /><script type="text/javascri
]]>
<![CDATA[
pt" src="/WebWorkflow/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.1.13&v=5.1.13"></script><script type="text/javascript" src="/WebWorkflow/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=5.1.13&v=5.1.13"></script><link type="text/css" rel="stylesheet" href="/WebWorkflow/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=5.1.13&v=5.1.13" /><script type="text/javascript" src="/WebWorkflow/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.1.13&v=5.1.13"></script> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /><script type="text/javascript" src="/WebWorkflow/javax.faces.resource/jsf.js.xhtml?ln=js"></script> <title>XPM </title></head><body><span id="j_idt10"><script language="javascript" type="text/javascript"> function faceletsDebug(URL) {day = new Date();id = day.getTime();eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=800,height=600,left = 240,top = 212');"); };(function() { if (typeof jsfFaceletsDebug === 'undefined') { var jsfFaceletsDebug = false; } if (!jsfFaceletsDebug) {var faceletsOrigKeyup = document.onkeyup;document.onkeyup = function(e) { if (window.event) e = window.event; if (String.fromCharCode(e.keyCode) == 'D' & e.shiftKey & e.ctrlKey) faceletsDebug('/WebWorkflow/error/expired.xhtml?facelets.ui.DebugOutput=1429028952601'); jsfFaceletsDebug = true; if (faceletsOrigKeyup) faceletsOrigKeyup(e); }; }})();</script></span> <div id="wrapper"> <div id="header"> <form id="headerForm" name="headerForm" method="post" action="/WebWorkflow/error/expired.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="headerForm" value="headerForm" /> <div id="headerContent"><img src="/WebWorkflow/javax.faces.resource/img/wf-logo.gif.xhtml" alt="" /><img src="/WebWorkflow/javax.faces.resource/img/header.gif.xhtml" alt="" /> <div id="welcome"> </div> </div> </form> </div> <div id="section"><div id="exceptionDialog" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container"><div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"><span id="exceptionDialog_title" class="ui-dialog-title">Exception: occured!</span><span class="ui-icon ui-icon-closethick"></span></div><div class="ui-dialog-content ui-widget-content"> Message: <br /> StackTrace: <button id="j_idt23" name="j_idt23" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="document.location.href = document.location.href;;window.open('/WebWorkflow/error/expired.xhtml','_self')"><span class="ui-button-text ui-c">Reload!</span></button><script id="j_idt23_s" type="text/javascript">PrimeFaces.cw("Button","widget_j_idt23",{id:"j_idt23",widgetVar:"widget_j_idt23"});</script></div></div><script id="exceptionDialog_s" type="text/javascript">$(function(){PrimeFaces.cw("Dialog","exceptionDialog",{id:"exceptionDialog",widgetVar:"exceptionDialog",height:"500px"});});</script> <div id="sectionContent"> <form id="j_idt25" name="j_idt25" method="post" action="/WebWorkflow/error/expired.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt25" value="j_idt25" /> Your session has expired. You were on page Back to login page </form> </div> </div> <div id="footer"> <div id="footerContent"><img src="/WebWorkflow/javax.faces.resource/img/stagecoachsignature.gif.xhtml" alt="" /> <ul> <li> About My Company </li> <li> PRIVACY, Cookies, Security, Legal </li> <li> Online Access Agreement </li> <li> Contact Us </li> </ul> </div> </div> </div></body> </html>
]]>
</update>
<update id="j_id1:javax.faces.ViewState:0">
<![CDATA[ -1772475063786038199:-292459209620208926 ]]>
</update>
</changes>
</partial-response>
This is the error shown in the console:
FullAjaxExceptionHandler: An exception occurred during processing JSF
ajax request. Error page '/errorpages/expired.xhtml' will be shown.:
javax.faces.application.ViewExpiredException: viewId:/login.xhtml -
View /login.xhtml could not be restored.
I solved by disabling FullAjaxExceptionHandler and implementing my own ViewExpiredExceptionHandler (ExceptionHandlerWrapper), and hardcoding the response in case of an Ajax request.
The Douglas Junior answer from this post is what worked for me: Session timeout and ViewExpiredException handling on JSF/PrimeFaces ajax request
Now I have another problem with the redirects, but that would be another post, thanks guys for the help.
I have followed different solution here in stacj overflow with regards to coinslider not moving. So here's mine. It seems that I dont know how to make it move.
here's my code.
Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="LeavemanagementFinal.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CrossXTrain - Home</title>
<link href="css/master.css" rel="stylesheet" />
<link href="css/coin-slider-styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<%--<style type="text/css">
.frame
{
font:12px arial;
width:200px;
height:200px;
border:none;
overflow:hidden;
border:1px solid black;
padding:5;
}
</style>
<script language="javascript">
i = 0
var speed = 1
function scroll() {
i = i + speed
var div = document.getElementById("news")
div.scrollTop = i
if (i > div.scrollHeight - 160) { i = 0 }
t1 = setTimeout("scroll()", 10)
}
</script>--%>
</head>
<body onload="scroll()">
<div class="divpage">
<img src="images/header2.png">
<div class="divmenu">
<a class="FontStaticMenuItemStyle" href="index.aspx"> Home</a>
<a class="FontStaticMenuItemStyle" href="leavemanagementlogin.aspx"> Leave Management</a>
<a class="FontStaticMenuItemStyle" href="news.aspx"> News</a>
<a class="FontStaticMenuItemStyle" href=""> Articles</a>
<a class="FontStaticMenuItemStyle" href="aboutus.aspx"> About Us</a>
<a class="FontStaticMenuItemStyle" href="contactus.aspx"> Contact Us</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#news').news();
});
</script>
<div class="mainbanner" id="news" >
<img src="images/BUBLES.jpg" />
<img src="images/CrossXtrain.jpg"/>
<img src="images/CrossXtrain3.jpg"/>
<img src="images/CrossXtrain4.jpg"/>
<img src="images/CrossXtrain5.jpg"/>
<img src="images/CrossXtrain6.jpg"/>
<img src="images/CrossXtrain7.jpg"/>
<img src="images/CrossXtrain8.jpg"/>
<img src="images/CrossXtrain9.jpg"/>
</div>
<div class="clear"> </div>
<div class="mainadfooter">
<input type="image" class="secondinput" src="images/BUBLES.jpg"/>
<input type="image" class="thirdinput" src="images/HCS.jpg" onclick="javascript: window.location.href = 'http://www.healthcaresynergy.com/'"/>
<input type="image" class="thirdinput" src="images/fusionplus.png" onclick="javascript: window.location.href = 'http://sync.fusionpl.us//'"/>
<input type="image" class="thirdinput" src="images/DoubleRule_Logo#2x.png" onclick="javascript: window.location.href = 'http://www.doublerule.com/'"/>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
<div class="footer"><p>Copyright © 2014. CrossXTrain Company Inc. All rights reserved. | Leave Management System - ISD (Php)</p></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#news').news();
});
</script>
Thank you so much all.
Your script needs to be inside the html tags.
I am using MVC 2 with aspx view engine.
In one partial view i am opening one modal popup with "bootstrap-modal.js".
In that client side validation is not working.
When i render my view like "<% Html.RenderPartial("Myview"); %> " and <% Html.RenderAction("Myview"); %> , client side validation is working fine. But, it is not working when i load my partial view with jquery dynamically.
I read the following discussions and apply as per guide in it, but no success.
https://stackoverflow.com/a/9324173/1752787
Unobtrusive validation doesn't work with Ajax.BeginForm
http://forums.asp.net/t/1716864.aspx/1
What is my little mistake ?
My Main view :
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link href="../../Content/BoroTheame/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/bootstrap-responsive.min.css" rel="stylesheet"
type="text/css" />
<link href="../../Content/BoroTheame/colorbox.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/fullcalendar_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/datatables_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/TableTools.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/ModelPopupcss.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modal.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modalmanager.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.debug.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<%--<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>--%>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function loadPartialViewForManageUser() {
// alert('ajax..');
$.ajax({
type: "POST",
cache: false,
url: 'Home/test',
success: function (html) {
$("#divContactInfo").html(html);
$.validator.unobtrusive.parse($("#divContactInfo"));
// var form = $("#divContactInfo").closest("form");
// form.removeData('validator');
// form.removeData('unobtrusiveValidation');
// $.validator.unobtrusive.parse(form);
},
error: function (e, args) {
}
});
return false;
}
</script>
<h2>
<%: ViewData["Message"] %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal" onclick="return loadPartialViewForManageUser();">
Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Modal header</h3>
</div>
<div class="modal-body">
<p>
One fine body…</p>
<%-- <% Html.RenderPartial("test"); %>--%>
<div id="divContactInfo">
<%--<% Html.RenderAction("test"); %>--%>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
My Partial view :
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DataAnnotation.Models.TestDA>" %>
<script type="text/javascript">
// $.validator.unobtrusive.parse("form");
// $.validator.unobtrusive.parse(document);
var onSuccess = function (divContactInfo) {
// enable unobtrusive validation for the contents
// that was injected into the <div id="result"></div> node
//$.validator.unobtrusive.parse($(divContactInfo));
// var form = $('#testform')
// .removeData("validator") /* added by the raw jquery.validate plugin */
// .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin */
// $.validator.unobtrusive.parse(form);
};
</script>
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
OnBegin = "onSuccess",
UpdateTargetId = "divContactInfo"
}, new { #id = "testform" }))
{%>
<%: Html.ValidationSummary(true)%>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.name)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.name)%>
<%: Html.ValidationMessageFor(model => model.name)%>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
This is My Controller :
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
[HttpPost]
public ActionResult Index(TestDA model)
{
if (ModelState.IsValid)
{
}
else
{
}
return View("test", model);
}
public ActionResult test()
{
return PartialView("test");
}
}
This is my Model :
public class TestDA
{
[Required]
[DisplayName("Your Name")]
public string name { get; set; }
}
I solved it, by adding below script blog :
<script type="text/javascript">
Sys.Mvc.FormContext._Application_Load();
$("#form0").submit(function (e) {
if (!Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) {
$.post("/ManageUser/SaveContactInfo", $(this).serialize(), function (data) {
$("#divContactInfo").html(data);
});
}
e.preventDefault();
});
</script>
For more info read this :
http://weblogs.asp.net/imranbaloch/archive/2010/07/11/asp-net-mvc-client-side-validation-with-dynamic-contents.aspx
I was facing performance problem while switching between the pages.I went to various forums and added something like faskclick and more.
First time, when i switch to different page, it takes around 3-4 seconds but from second time it is fast e.g. 1 - 1.5 sec. Now, sometimes, click does not work. Out of 5 clicks, only 2-3 clicks works. I am struggling to figure out what went wrong ?
If you can help me out finding why click is not working and how to improve performance when using jquery mobile, it would really be helpful. Following are my code snippets
<html>
<!-- head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
<title>Project</title>
<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />
<script src="StyleSheet/jquery-1.8.2.min.js"></script>
<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>
<script src="StyleSheet/fastclick.js"></script>
<script type="application/javascript">
$.mobile.defaultPageTransition = 'none';
$.mobile.transitionFallbacks.slideout = 'none';
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
$( document ).bind( "mobileinit", function() {
$.mobile.buttonMarkup.hoverDelay = 500
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="HomePage" class="jqm-demos">
<div class="ui-body ui-body-b">
CLick Me to go second page
</div>
</div>
<div data-role="page" id="SecondPage" class="jqm-demos">
<div class="ui-body ui-body-b">
<br> CLick Me to go first page
<div id="JQM" data-theme="b" data-content-theme="c"
data-role="collapsible" data-collapsed-icon="arrow-d"
data-expanded-icon="arrow-u">
<h3>
<span style="float: left;"> JQM is very slow </span> <a
href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span
style="float: right;"
class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>
</a>
</h3>
<p>I sther any way so that page transition should happen just
like native applciation when using JQM ? Botton click also also
sometimes not responsive.</p>
</div>
</div>
<!-- content -->
<!-- footer -->
<div data-role="footer" data-theme="b" data-tap-toggle="false"
data-position="fixed">
<!--class="ui-bar ui-bar-b"-->
<a href="#" data-rel="back" data-role="button" data-icon="arrow-l"
data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>
<center>
<a href="#HomePage" data-role="button" data-icon="home"
data-iconpos="notext" data-theme="b">Home</a>
</center>
<a href="#" data-role="button" data-icon="arrow-r"
data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>
so here's my problem.
i have a html page with a simple form and some javascript (jquery) code to validate it, ok then.
this page would looks like this: test.html
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
$('form').submit(function () {
var txt = $('#SYSTEM_NAME').val();
if (txt == '') $('#loading').append('field is empty');
return false;
})
}
window.onload = validate
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>
</body>
</html>
In this page above, if you try to insert without any information on the field 'SYSTEM_NAME', it would dysplay a message. Everything is fine here my form is validated.
But when i load this page from another one using ajax(jquery), what occurs is, after loaded it the validation that i made on 'test.html' doenst work.
Example:
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#go').click(function(){
$('#here').load('test.html')
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
Now if i click on 'Insert' the validation doest work anymore.
How can i solve this problem ? can i interact with loaded page and javascript code together ?
Hope you guys have understood my problem. Thanks and sorry for enlish mistakes.
forgive me if this is too much of a change, but i thought i might suggest another method for you. what about using jquery validate to help you with the validation? here is an example with the ajax-response validating as you want. below is the parent document... (notice that i am including jquery validate in the head. just ignore the 'get_test' i am using to load the partial.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#go').click(function() {
$('#here').load('get_test');
});
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
and the partial i am loading below... (notice that the text input has a class of 'required' - this is how jquery validate works. you will also see a validate method.)
<script type="text/javascript">
$("#form0").validate();
</script>
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" class="required" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>