I have problem about autocomplete with ajax.
I take datas from my java class to ajax jsp file.
But i cant append it to my listing area.
index.jsp
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#keyWord2").keyup(function(){
if($(this).val().length>4){
fill_data($(this).val());
}//endif
if($(this).val().length<4){
$("#show").html("");
$("#show").css("display","none");
}//endif
});//end keyup function
});//end document ready function
function fill_data(aranan){
$.ajax({
type: "POST",
url: "ajaxSearch.jsp",
data:"name="+encodeURIComponent(aranan),
dataType: "json",
success: function(){
alert("success");
$("#show").css("display","block");
$("#show").html("");
$.each(data, function(i, item) {
$("#show").append("<div >"+item.clientNumber+"</div>");
});//end each function
}//end success function
});//end ajax
}//end fill_data
</script>
</head>
<body>
<div>
<input type="text" id="keyWord2" autocomplete="off" maxlength="50"/>
<div style=" display: none; " id="show"></div>
</div>
</body>
i call my datas from ajaxSearch.jsp and it returns me the list.But function doesnt come to success it doesnt show my element whose id is "show" and doesnt alert success.
Related
Here is my json file(list.js)
{
"loginid":"Wafiqa",
"password":"123"
}
Here is my html file(ajaxTest.html)
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body>
<p>Username:</p>
<div id="uname"></div>
<p>Password:</p>
<div id="pword"></div>
<script>
$.ajax({
type:"GET",
datatype:"json",
async:false,
url:'ref/list.js',
success:function(data){
alert(data.loginid);
},
error:function(jqXHR,textStatus){
errorHandling(textStatus);
}
});
</script>
</body>
</html>
What I want to do is. I want to display the user id and password from the json file in div id="uname" and div id="pword". How can I do that?
success:function(data){
var jsonObj = JSON.parse(data);
$('div#uname').text(jsonObj.loginid);
$('div#pword').text(jsonObj.password);
},
For all beginners, here are the answer for your reference
Username:
Password:
<script>
$.ajax({
type:"GET",
datatype:"json",
async:false,
url:'ref/list.json',
success:function(data){
alert("Welcome "+data.password+data.loginid);
console.log(data.password);
$('#uname').html(data.loginid);
$('#pword').html(data.password);
}
});
</script>
</body>
</html>
I want a simple button that when I click, it shows the content from a file file.php ( this file when triggered it shows a random number) and if it's clicked several times refreshes the content from file.php.
You can try something like this:
PHP File: file.php
<?php
//your php code for random number...
?>
HTML File:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="button" id="clkMe" value="Load File" />
<div id="response"></div>
<script>
$(document).ready(function(){
$("#clkMe").click(function(){
var dataString={};
$.ajax({
url:"file.php",
type: 'POST',
cache:false,
data: dataString,
beforeSend: function() {},
timeout:10000,
error: function() { },
success: function(response) {
$("#response").html(response);
alert(response);
}
});
});
});
</script>
</body>
</html>
I hope this is what you are asking.
Happy Coding!!!
Dynamic data is not appearing in the list. Data is fetched dynamically in jsonp format. When checked in Chrome developer tools i am able to see the response. Please find the code below. Can someone help me here ?
<!DOCTYPE html>
<html>
<head>
<title>Pull to refresh</title>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul id="pull-to-refresh-listview"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
#= Title #
</script>
<script>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 1,
transport: {
read: {
url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
alert(kendo.stringify(options));
return {
q: "javascript",
page: options.page,
rpp: options.pageSize
since_id: options.since_id //additional parameters sent to the remote service
};
}
},
schema: {
data: "movies" // the data which the data source will be bound to is in the "results" field
}
});
alert("Before kendoMobileListView");
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource ,
pullToRefresh: function(){ alert("dataSource"); return true },
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text(),
endlessScroll: true,
pullParameters: function(item) {
return {
since_id: item.id_str,
page: 1
};
}
});
}
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
JSONP which i am receiving is :
({"movies":[{"ID":1,"Title":"Movie 1","ReleaseDate":"/Date(1355250600000)/","Genre":"Comedy","Price":10},{"ID":2,"Title":"Movie 2","ReleaseDate":"/Date(1355250600000)/","Genre":"Thriller","Price":10}]})
There must be a call back function name in the returned JSONP. The output I see here doesn't have any function name. You need to make changes to your server side code.
On the click of a button i want to sumbit a form if another form, in the same page (not a ligthbox) is valid. That validation is a Custom Validation I created and is working fine.
This is the code in the view
$("#btnSave").click(function (e) {
if ($("#GeneralButtonFrm").valid()) {
$("#ButtonFrm").submit();
} else {
//Error Message
} });
The problem is that the submit action is executing without waiting for the response of the custom validation which return false.
Any idea why this is happening?
Note: I said I am not using a ligthbox rendering a partial becouse in that case the solution would be jQuery.validator.unobtrusive.parse('#form');
Thanks
You are still very vague, in your question. But i think what you want is to call ajax and do a serverside validation. If so, the problem is that your validation will return before ajax request since the ajax request is async.. Do this
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
jQuery.validator.addMethod("ajaxCustom", function (value, element) {
var wrap = $(element);
var url = wrap.data("customAjaxUrl");
var result;
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function (data) {
result = data.valid;
},
data: { value: value, id: element.id },
async: false
});
return this.optional(element) || result;
}, "Ajax");
$.validator.unobtrusive.adapters.addBool('ajaxCustom');
</script>
<style type="text/css">
.input-validation-error {
background: red;
}
</style>
</head>
<body>
<form action="/">
<input data-val-ajaxCustom="Tuckel" data-val="true" data-val-required="Its required" data-custom-ajax-url="validate.html" />
<button type="submit">Submit</button>
</form>
</body>
</html>
I can't make heads or tails of this and am wondering if you could help! When I click on the button, nothing happens. Ideally, I would like the form to validate before submission and to prevent submission if it doesn't validate.
<script type="text/javascript" src="../assets/js/validate/jquery.validate.min.js">
</script>
<script type="text/javascript" src="../assets/js/validate/jquery.validate.more.js">
</script>
<script type="text/javascript" language="javascript">
var J = jQuery.noConflict();
J(document).ready(function(){
J("form#nameform").validate({
rules: {
"name": {
required: true,
format: true},
},
submitHandler: function() {
J.ajax({
type: "POST",
url: "process.php",
data: J("form#nameform").serialize(),
success: function(html) {
J('form#nameform').html('hello');
}
});
};
});
});
</script>
<div id="name">
<form id="nameform" method="post">
<input id="name" class="text" name="name" size="20" type="text">
<input type="submit" value="go" />
</form>
</div>
A lot of tutorial to make Jquery Form valitation, they show how to make ajax validation too :)