タグ別アーカイブ: jQuery

[jQuery]CSVファイルを配列にする

カテゴリー: jQuery | タグ: , , , , | 投稿日: | 投稿者:

最近、怖い話を聞きながら寝るのにハマってるモリです。

今回、紹介するのはAjaxで読み込んだCSVのデータを配列に変換する方法です。

用意したデータは以下。

No 品種 原産国 補足

1

ブルーマウンテン ジャマイカ バランス型
2 キリマンジャロ タンザニア 酸味とコク
3 マンデリン インドネシア コクと苦み
4 コロンビア コロンビア 香りと角のないコク

 

用意するライブラリは本家jqueryと今回は「simple_csv」を使用します。

使い方はAjaxで読み込んだデータをsimple_csvに渡すだけ!

配列で返してくれます。

サンプルソース:

&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	$.ajax({&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  url:&#39;sample.csv&#39;,&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  beforeSend:function(xhr){&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  xhr.overrideMimeType(&amp;amp;amp;amp;quot;text/html;charset=UTF-8&amp;amp;amp;amp;quot;);&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  }&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	}).done(function (csv_data, status, error) {&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  var data = $.simple_csv(csv_data);&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  console.dir(data);&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	});&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	

beforeSendでCSVの文字コードをUTF-8にしてます。

simple_csv

でわ。。。


ajaxのキャッシュ

タグ: , | 投稿日: 投稿者:

こんにちは。kikuです。
先日ajaxでの通信で、期待通りの値が取れなくて困ったことがありました。
無事解決したので、備忘録として書き残したいと思います。

jQueryのajaxを使ってアクセスした場合、2回目以降のリクエストが実際には発行されずにキャッシュされた値が使われてしまう場合があります。
そんな時は cache に false を設定します。
※これはHEADとGETリクエスト時のみ正常動作します

$.ajax({
    url : "http://dev.blog.fairway.ne.jp",
    cache : false,
    data : {
        hoge : "fuga"
    }
}).done(function(success){
    console.log(success);
});

cacheはリクエストURLに “_={timestamp}” をGETパラメーターで追加しています。
上記では http://dev.blog.fairway.ne.jp?hoge=fuga&_=1253863496678  のようになってリクエストを投げます。

で、今回プチハマリしたのはPOST時です。
上で「HEADとGET時にしか正常動作する」という点を見逃していて、POST時に頑張ってcacheの設定をしていたので期待通りの動きをしなかったようです。

POST時にキャッシュされた値が使われてしまっていた場合は、XMLHttpRequest.setRequestHeader を使ってリクエストヘッダで If-Modified-Since を設定することによりキャッシュされた値が使用されなくなります。
ただXMLHttpRequest.setRequestHeader は XMLHttpRequest.open の後にしなければエラーになってしまいますので beforeSend でコールバック関数を指定します。

$.ajax({
    type : "POST",
    url : "http://dev.blog.fairway.ne.jp",
    beforeSend : function(xhr){
        xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
    },
    data : {
        hoge : "fuga"
    }
}).done(function(success){
    console.log(success);
});

このように設定することで、リクエストをキャッシュさせずに発行することができました。

うまく動かなかった時にキャッシュが原因と判断するまで結構時間がかかってしまわないように、キャッシュのことを頭の隅に置いておきたいところです。


jQuery検索機能付きプルダウンメニュー

タグ: | 投稿日: 投稿者:

はじめまして、モリです

入力項目でプルダウンメニューでリスト表示するときに便利なjQueryを紹介。

『chosen』というjQueryプラグイン
項目が多くなってくるとスクロールするのが大変ですよね、このプラグインを使用することで検索が出来るようになります。

chosen1

見た目はこんな感じ

chosen1

テキストのエリアに検索文字を入力するとドンドン絞られていきます。

chosen1

単一の選択だけではなく、複数のMultiSelectにも対応しています。

chosen1

使い方はClass属性に「chosen-select」を指定するだけ。

<select class="chosen-select" multiple="multiple" name="sample"><option value="">Optionを選択してください</option><option value="1">Option1</option><option value="2">Option2</option><option value="2">Option3</option><option value="2">Option4</option><option value="2">Option5</option>
</select>

ダウンロードはこちらからhttps://github.com/harvesthq/chosen/releases