2012-03-10

ファイルアップロード × Ajax

Java Script jQuery

jQuery プラグイン http://www.phpletter.com/Our-Projects/AjaxFileUpload/ で
ファイルアップロードをAjaxで実装した

このプラグイン自体は古かったのか…
”handleError”とかいうエラーが出たとき
そのエラー自体がjQuery1.5からremoveされてるぽくて
http://stackoverflow.com/questions/6329589/when-was-handleerror-removed-from-jquery
ライブラリ自体に修正を加えなきゃなんなかった

でも、なんとかファイルアップロードできた！

エラーの原因は、dataTypeで指定した型がちゃんと返ってきてなかったこと

dataTypeで指定できる型は、String型でいろいろあるみたいだけど、
サーバー側では何も返してないのに、'json'て指定しててエラーが起きてた
そこを'text'に変えて、emptyをとってくるようにしたらエラーは消えた

	$(document).ready(function() {

	$('#upload_form').submit(function() {
			var $this = $(this);
			$.ajaxFileUpload({
				url : '<c:url value="/tweet.do"/>',
				secureuri : false,
				fileElementId : 'icon_field',
				data : ({
					tweet : $('#tweet_msg').val()
				}),
				dataType : 'text',
				global:false,
				success : function(obj) {
					loadTimeline();
					$('#tweet_msg').val("");
					$("#notice_dialog").dialog("open");
					var ul = $('#timeline-list');
					setTimeout(function() {
						$('li:first', ul).effect('highlight', 5000);
					}, 500);
				},
				 error: function (xml, status, e) {
					 console.log(xml);
					 console.log(status);
					 console.log(e);
					 &#160; &#160;alert('error!');
				}

			});
			return false;
		});

		$('#tweet_btn').change(triggerUpload);
	});



	function triggerUpload() {
		$('#upload_form').trigger('submit');
	}

jQuery初心者ぽいエラーだらけのさこちゃんでした

2012-03-08

JSON × Ajax

jQuery Java Script

jQueryのAjaxでJSON使った！

JAVA側はJSONIC使って

//タイムライン読み込み
function loadTimeline(){
	$.ajax({
		url: '<c:url value="/tweetTimeline.do"/>',
		data: {},
		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		success: function(data){
			$('#timeline-list').empty();
			$.each(data, function(i, v){
				var li = $("<li style='border-color:#00bf00'></li>");
				var div = $("<div></div>");
				var anc = $("<a style='font-size:20px;'><b></b></a>");
				var anc2 = $("<a></a>");
				var img = $("<img style='width:50; height:50px;'></img>");
				img.attr('src','<c:url value="/rscsvr/img.irc?img='+ v.userid + '.png"/>');
				var icon = $("<i class='icon-star' style='width:200px, height:200px;'></i>");
				li.append(img);
				li.append(anc);
				li.append(anc2);
				li.append(div);
				anc.attr('href', userPagePath + "?userid=" + v.userid);
				anc.html(v.userid);
				if((v.liked == '0') && (loginuser != v.userid)){
					anc2.attr('href', favPath + "?tweetid=" + v.tweetid);
					anc2.html(icon);
				}
				div.html( autoLink(v.tweet)+'<br>'  + "<i class='icon-time' style='width:50px, height:50px;'></i>"+'<font size=2px>'+ v.time + '</font>'+'<br><br>');
				$('#timeline-list').append(li);
			});
		},
		dataType: 'json'
	});
}

//ツイート投稿
function tweet(){
    var msg = $('#tweet_msg').val() ;
    $.post(
    	'<c:url value="/tweet.do"/>',
    	{tweet: msg},
		function( data ) {
    		loadTimeline();
    		$('#tweet_msg').val("");
    		$("#notice_dialog").dialog("open");
    		var ul = $('#timeline-list');
    		setTimeout(function(){
        		$('li:first', ul).effect('highlight', 5000);
    		}, 500);
		});
}

//最初の読み込み
	$(function() {
		currentTab == 'timeline';
		loadTimeline();
		//通知ダイアログの初期化
		$("#notice_dialog").dialog({
			height : 100,
			position : [ 500, 300 ],
			autoOpen : false,
			show : "bounce",
			hide : "explode"
		});
　　　　　　　　//1秒おきにロード
		setInterval(loadTimeline, 1000);
	});

JAVAは

/**
 * ツイートタイムラインアクション
 *
 */
public class TimelineAction extends Action {

	@Autowired
	private TweetService tweetService;

	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {

		String userid;
		PrintWriter out = ResponseUtils.getPrintWriter(response);
		String paramId = request.getParameter("userid");
		if (paramId != null) {
			userid = paramId;
		} else {

			UserDto user = AppUtils.getUser(request);
			userid = user.getUserid();
		}

		// 自分とフォローのツイート一覧を取得
		List<TweetDto> tweets = tweetService.getTweetList(userid);

		out.print(JSON.encode(tweets));
		return null;
	}
}

ってな感じでPrintWriterにDTOの型をそのまま書き込んだ

http://thinkit.co.jp/article/70/1

JSONは、XMLよりは通信量も軽くて実装も簡単だから、

個人的におすすめ★

2011-12-18

本でのお勉強

JAVA Java Script

JavaScriptｻｲ本とEffective Java
　　　　

この本はおすすめと薦められたので、Amazonで購入

特に、Effective JavaはJavaエンジニアなら読んでおきたい本らしい

O'Reillyの本もはずれはあんまりないとか

がんばって勉強しよう！！

2011-12-18

画像アニメーション

Java Script

sakochan.netのピグのアニメーション作った！

Gimp使って画像編集してたけど、

Gimpはちょっと使いにくい

Photoshopの方が個人的には優れてると思った

画像編集は大変だなとつくづく感じた！

2011-12-07

RSSフィード

Java Script

アメブロのフィードとってくるJavaScript書いてみた

最初、jQueryのライブラリでとってくるようにするつもりだったけど

クロスドメインとか何とかのせいでなんかできなかった

だからGoogleのAPI使ってとってくるようにした

それでなんとかとってこれた！

	google.load("feeds", "1");

	entry = function(){
		//var me = this; 
		var feed = new google.feeds.Feed(rss);
		feed.setNumEntries(100);
		feed.load(function(result) {
			if (!result.error) {
				var entries = result.feed.entries;
				for(i=0;i<entries.length;i++){
					console.log(entries[i].title);
					$('#ameba_list').append('<li>'+entries[i].title+'</li>');
					console.log($('#ameba_list'));
				}
			}
		});
	};

	google.setOnLoadCallback(entry);