jQuery – IT研究所

JavaScriptでコールバック関数に引数をとりAjaxでデータを取得してみる

投稿者: utsubo 投稿日: 2013-07-17 in jQuery、js

JavaScriptでコールバック関数の実装ですが、いろいろなところで書かれているのですがちょっとよくわからなかったので試してみました。

a.html

<html>
	<body>
		<script type="text/javascript">
			function my_func(callback){
				callback("d","e");
			}
			function my_callback(a,b){
				alert("a="+a+",b="+b);
			}
		</script>
		<button id="aaa" onclick="my_func(my_callback)">test</button>
	</body>
</html>

<html>

<body>

function my_func(callback){

callback("d","e");

}

function my_callback(a,b){

alert("a="+a+",b="+b);

}

</script>

</body>

</html>

これで

	a=d,b=c

a=d,b=c

と表示されます。

ここでjQueryを使ってAjaxでデータを取得してみます。

b.txt

test

test

これを用意しておきhttpで取得してみます

<html>
<head>
<script type="text/javascript" src="jquery1.4.2.min.js"></script>
<body>
<script type="text/javascript">
	function my_func(callback){
		$.ajax({
			url:"http://localhost/b.txt",
			dataType:"html",
			success:function(data){
				callback(data,"d");
			}
		})
	}
	function my_callback(a,b){
		alert("a="+a+",b="+b);
	}
</script>
<button id="aaa" onclick="my_func(my_callback)">test</button>
</body>
</html>

<html>

<head>

<body>

function my_func(callback){

$.ajax({

url:"http://localhost/b.txt",

dataType:"html",

success:function(data){

callback(data,"d");

}

})

}

function my_callback(a,b){

alert("a="+a+",b="+b);

}

</script>

</body>

</html>

a=test,b=d

1	a=test,b=d

うまくとれましたが、これでいいのかどうか。

ie10でjQueryUIのautocompleteが動かない？

投稿者: utsubo 投稿日: 2013-03-28 in jQuery

http://stackoverflow.com/questions/6511258/jquery-autocomplete-plugin-ie-9-not-working

HTMLヘッダにこれを入れると動きます

autocompleteで送信パラメタをカスタマイズしてみた

投稿者: utsubo 投稿日: 2013-03-25 in jQuery

jQueryAutoCompleteではデフォルトの送信パラメタはtermのみでちょっと使い勝手が悪かったりします。

そこでカスタマイズしてみます

source:function(request,response)をオーバーライド

<html>
<head>
	<title>Insert title here</title>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<script type="text/javascript" src="./jquery-1.9.0.js"> </script>
	<script type="text/javascript" src="./jquery-ui.js"> </script>
	<script type="text/javascript" src="./test.js"></script>
	<link rel="stylesheet" type="text/css" href="./jquery-ui.css">
</head>
<body>
 
<div class="ui-widget">
	<input type="hidden" name="val1" id="val1" value="1234567890" />
	<input type="hidden" name="val2" id="val2" value="aaaaa" />
 	<input id="searchTags" />
</div>

</body>
</html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

</div>

</body>

</html>

test.js

$(function() {
		var url="./searchEngine.jsp";
		var val1=$("#val1").val();
		var val2=$("#val2").val();
		$( "#searchTags" ).autocomplete({
		source : function( request, response ) {
					 request["val1"]=val1;
					 request["val2"]=val2;

			 $.ajax({
				url: url,
				data: request,
				dataType: "jsonp",
				jsonpCallback:'callback',
				success: function( data ) {
					response( data );
				},
				error: function() {
					response( [] );
				}
			});
		},

		});
});

$(function() {

var url="./searchEngine.jsp";

var val1=$("#val1").val();

var val2=$("#val2").val();

$( "#searchTags" ).autocomplete({

source : function( request, response ) {

request["val1"]=val1;

request["val2"]=val2;

$.ajax({

url: url,

data: request,

dataType: "jsonp",

jsonpCallback:'callback',

success: function( data ) {

response( data );

error: function() {

response( [] );

}

});

searchEngine.jsp

<%@ page language="java" contentType="text/html; charset=Shift_JIS"
		pageEncoding="Shift_JIS"%>
Map map = request.getParameterMap();
Iterator it = map.keySet().iterator();
while (it.hasNext()) {
	String name = (String)it.next();
	String[] val = (String[])map.get(name);
	for (int i = 0;i<val.length;i++) {
		System.out.println(name + "=" + val[i] );
	}
}

<%@ page language="java" contentType="text/html; charset=Shift_JIS"

pageEncoding="Shift_JIS"%>

Map map = request.getParameterMap();

Iterator it = map.keySet().iterator();

while (it.hasNext()) {

String name = (String)it.next();

String[] val = (String[])map.get(name);

for (int i = 0;i<val.length;i++) {

System.out.println(name + "=" + val[i] );

}

jQuery-uiのautocompleteで遊んでみる

投稿者: utsubo 投稿日: 2013-02-27 in jQuery

eclipse 4.2
MaxOS10.8.2

ajaxでjsonpをあらかじめ取得しておき、autocompleteにわたすサンプル

jspで取得する値はmemcachedに入っている

sample.jsp

<%@ page language="java" contentType="text/html; charset=Shift_JIS"
		pageEncoding="Shift_JIS"%>
<%@ page import="java.util.*" %> 
<%@ page import="java.net.*" %>	 
<%@ page import="net.rubyeye.xmemcached.*" %>
<%@ page import="net.rubyeye.xmemcached.utils.*" %>
<%@ page import="net.rubyeye.xmemcached.exception.*" %>
<%--
memcachedに以下のデータが入っている
key,value
1,value1
2,value2
3,value3
..

出力はJsonp
[ {"label":"1","tag":"value1"} , {"label":"2","tag":"value2"} , {"label":"3","tag":"value3"} , {"label":"4","tag":"value4"} , {"label":"5","tag":"value5"} , {"label":"6","tag":"value6"} , {"label":"7","tag":"value7"} , {"label":"8","tag":"value8"} , {"label":"9","tag":"value9"} ] 
 --%>
<%
	String callback=request.getParameter("callback");
	String callbackHeader="";
	String callbackFooter="";
	if(callback!=null){
		callbackHeader=callback+"(";
		callbackFooter=");";
	}
%>
<%=callbackHeader%>[
<%
	XMemcachedClientBuilder builder=
		new XMemcachedClientBuilder(AddrUtil.getAddresses("localhost:11211"));
	MemcachedClient client=builder.build();
	client.setPrimitiveAsString(true);
	
	boolean isFirst=true;
	for(int i=1;i<10;i++){
		String val=client.get(String.valueOf(i));
		if(val==null)continue;
		if(isFirst){
			isFirst=false;
		}else{
%>
,
<%
		}
%>
{"label":"<%=i %>","tag":"<%=val %>"}
<%
	}
%>
]<%=callbackFooter%>

<%
	client.shutdown();
%>

<%@ page language="java" contentType="text/html; charset=Shift_JIS"

pageEncoding="Shift_JIS"%>

<%@ page import="java.util.*" %>

<%@ page import="java.net.*" %>

<%@ page import="net.rubyeye.xmemcached.*" %>

<%@ page import="net.rubyeye.xmemcached.utils.*" %>

<%@ page import="net.rubyeye.xmemcached.exception.*" %>

<%--

memcachedに以下のデータが入っている

key,value

1,value1

2,value2

3,value3

出力はJsonp

[ {"label":"1","tag":"value1"} , {"label":"2","tag":"value2"} , {"label":"3","tag":"value3"} , {"label":"4","tag":"value4"} , {"label":"5","tag":"value5"} , {"label":"6","tag":"value6"} , {"label":"7","tag":"value7"} , {"label":"8","tag":"value8"} , {"label":"9","tag":"value9"} ]

--%>

String callback=request.getParameter("callback");

String callbackHeader="";

String callbackFooter="";

if(callback!=null){

callbackHeader=callback+"(";

callbackFooter=");";

}

<%=callbackHeader%>[

XMemcachedClientBuilder builder=

new XMemcachedClientBuilder(AddrUtil.getAddresses("localhost:11211"));

MemcachedClient client=builder.build();

client.setPrimitiveAsString(true);

boolean isFirst=true;

for(int i=1;i<10;i++){

String val=client.get(String.valueOf(i));

if(val==null)continue;

if(isFirst){

isFirst=false;

}else{

}

{"label":"<%=i %>","tag":"<%=val %>"}

}

]<%=callbackFooter%>

client.shutdown();

sample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8">
	<link rel="stylesheet" href="./jquery-ui.css" /> 
	<script src="./jquery-1.9.0.js"></script>
	<script src="./jquery-ui.js"></script>
	<script>
	$(function() {
		var values;
			$( "#tags" ).autocomplete({	 
				create:function(event,ui){
					if(!values){
					 $.ajax({
							url:"./sample.jsp",
							dataType:"jsonp",
							data:{},
							jsonpCallback:'callback',
							async:false,
							success:function(json){
							 values=eval(json); 
							},
							error:function(XMLHttpRequest,textStatus,errorThrown){
							}
						});
					}
				},
				
				source: function(request,response){
			 response(values);
				},
				select:function(event,ui){
								 // 選択時にtagを引数にページを呼ぶ
					location.href="http://localhost/test.jsp?code="+ui.item.tag;
				}
			});
		});
	</script>
</head>
<body>
<div class="ui-widget">
	<label for="tags">tag: </label>
	<input name="tags" id="tags" />
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

$(function() {

var values;

$( "#tags" ).autocomplete({

create:function(event,ui){

if(!values){

$.ajax({

url:"./sample.jsp",

dataType:"jsonp",

data:{},

jsonpCallback:'callback',

async:false,

success:function(json){

values=eval(json);

error:function(XMLHttpRequest,textStatus,errorThrown){

}

});

}

source: function(request,response){

response(values);

select:function(event,ui){

// 選択時にtagを引数にページを呼ぶ

location.href="http://localhost/test.jsp?code="+ui.item.tag;

}

});

</script>

</head>

<body>

</div>

</body>

</html>

jQueryのsuggestとautocompleteを使ってみる

投稿者: utsubo 投稿日: 2013-02-15 in jQuery

googleなどの検索ボックスで予測したり、ぺろっと出てくるあれ、実装してみました

予測で出てくるあれ

http://polarblau.github.com/suggest/

こちらからjquery.suggest.jsをゲット

ぺろっとでてくるあれ

http://api.jqueryui.com

こちらからjquery-1.9.0.jsとjquery-ui.jsをダウンロード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8">
	<link rel="stylesheet" href="./jquery-ui.css" />
		<style>
		input#tags {
			padding: 5px;
			font-size: 1.2em;
			letter-spacing: 0;
			font-weight: normal;
			font-family: Helvetica, Arial, sans-serif !important;
			position: relative;
			color: #333;
			width: 200px;
			background: #fff;
			z-index: 10;
		}
	</style>
	
	<script src="./jquery-1.9.0.js"></script>
	<script src="./jquery-ui.js"></script>
	<script src="./jquery.suggest.js"></script>
	<script>
	var availableTags = [
											 "ActionScript",
											 "AppleScript",
											 "Asp",
											 "BASIC",
											 "C",
											 "C++",
											 "Clojure",
											 "COBOL",
											 "ColdFusion",
											 "Erlang",
											 "Fortran",
											 "Groovy",
											 "Haskell",
											 "Java",
											 "JavaScript",
											 "Lisp",
											 "Perl",
											 "PHP",
											 "Python",
											 "Ruby",
											 "Scala",
											 "Scheme"
										 ];
	$(function() {
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	
	
	$(function(){
			$('#tags').suggest(availableTags);
		});
	</script>
</head>
<body>
<div class="ui-widget">
	<label for="tags">tag: </label>
	<input name="tags" id="tags" />
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

input#tags {

padding: 5px;

font-size: 1.2em;

letter-spacing: 0;

font-weight: normal;

font-family: Helvetica, Arial, sans-serif !important;

position: relative;

color: #333;

width: 200px;

background: #fff;

z-index: 10;

}

</style>

var availableTags = [

"ActionScript",

"AppleScript",

"Asp",

"BASIC",

"C",

"C++",

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Fortran",

"Groovy",

"Haskell",

"Java",

"JavaScript",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

"Scala",

"Scheme"

];

$(function() {

$( "#tags" ).autocomplete({

source: availableTags

});

$(function(){

$('#tags').suggest(availableTags);

});

</script>

</head>

<body>

</div>

</body>

</html>