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>
Related
``I am new in using ckeditor and working on simple crud application using ckeditor. it is working well in the create blade but not showing in the update blade.
here is my blade code
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ckeditor').ckeditor();
})
</script>
</head>
<body>
<form method = "post" action="{{url('updateblog')}}" enctype = "multipart/form-data">
#csrf
#method('PATCH')
<label for="title">Title</label>
<textarea class="ckeditor form-control" name="title">{!!$blog ->title!!}</textarea><br>
</form>
Try this, this worked for me:
<textarea class="ckeditor form-control" name="title">{{ $blog->title }}</textarea>
I hope i can help you.
Does anybody at all know the public site-key for YeezySupply.com? I am creating a captcha harvester. I need it so i can implement it into something like this:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
I am using phonegap and jquery mobile to build a web app, django on the server side. First, i start out from index.html page,and inject a login form from server into index.html and change page to the jquery mobile page containing the sign in form. But the problem is that the form is getting submitted but not in ajax, but if i test it in web browser,it works. I have already white listed the domain name in config.xml file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page">
<div class="app" style="display:none;">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div data-role="header">
<h1>DOCTORSLOG</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
$(function(){
$.ajax({
url: 'http://doctorslog.net/mobile/login-test/',
success: function(data){
//append the response(sign-in.html) to the body
$('body').append(data);
}
});
});
</script>
</body>
</html>
sign-in.html
<div data-role="page" data-fullscreen="true" id="login">
<div data-role="header" data-theme="b">
<h1 id="title">DOCTORSLOG</h1>
</div>
<div data-role="content">
<form id="sign_in_form" method="post" action="http://doctorslog.net/mobile/login/">{% csrf_token %}
<div data-role="fieldcontain">
<label for="id_username" style="font-size: 1.3em;line-height: 350%;">Username</label>
<input id="id_username" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="text" maxlength="30" name="username" autocomplete="off">
</div>
<div data-role="fieldcontain">
<label for="id_password" style="font-size: 1.3em;line-height: 350%;">Password</label>
<input id="id_password" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="password" name="password">
</div>
<div style="width: 100%;text-align: center;font-size: 1.6em;">
<input id="sign-in-btn" type="submit" data-inline="true" value="Sign me in" />
</div>
<input type="hidden" name="next" value="{% firstof next '/home/' %}"/>
<input id="hiddenID" type="hidden" name="regID" value=""/>
</form>
</div>
<script>
$(function(){
//change active page to this page and since it is a jquery mobile page with data-role=page,i expect automatic ajax submission on clicking submit button
$(':mobile-pagecontainer').pagecontainer('change','#login');
$('#sign_in_form').trigger('create');
});
</script>
</div>
The question is, if i can make Ajax GET request,why can not i make POST request. Any help is appreciated. Thanks.
Ok, i have solved this issue by disabling jquery mobile default form hijacking by setting data-ajax="false" on the form tag and submitting the form by $.ajax . Nothing like $.mobile.allowCrossDomainPages worked. And i also have set Access-Control-Allow-Origin response headers on the server side , really did not know if this is required.
Here is the script to submitform -
$(function(){
$('#sign_in_form').submit(function(e){
e.preventDefault();
$.mobile.loading('show');
var url = $(this).attr('action');
var data = $(this).serializeArray();
$.ajax({
beforeSend:function(jqXHR,settings){
jqXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
},
url:url,
type:'POST',
data:data,
crossDomain:false,
success: function(data){
$.mobile.loading('hide');
$('body').append(data);
}
});
});
});
the jquery datepicker is not working. I don't know why. Everyone is doing the same thing, same code, but mine is not working. Can anybody tell where is my problem, my code is given below --
Javascript:
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$('#dtpStartDate').datepicker({ dateFormat: "dd/MM/yy" });
});
</script>
html Code in view:
<div class="row">
<div class="span3">
<div class="text-left">
#Html.LabelFor(model => model.StartDate)
</div>
</div>
<div class="span3">
<div class="text-left">
#Html.TextBoxFor(model => model.StartDate, new { #id = "dtpStartDate" })
#Html.ValidationMessageFor(model => model.StartDate)
</div>
</div>
</div>
Just adding the jquery.js at the top is the key of the solution, this thing was placed at the bottom of the _layout page. The new sequence is -
script src="#Url.Content("~/Scripts/jquery.js")" type="text/javascript">
script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript">
script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">
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.