Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy:
Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy:
ajax-retry.coffee ЭpC V P�RC V ### ajax通信エラー時にretryするplugin.. timeoutの秒数は1通信に対しての秒数のため、 最長 retryCount * timeoutミリ秒待つことになる. @params url url文字列 @params done 成功時のcallback @params fail 失敗時のcallback @params options ajaxのoption ### do ($ = jQuery)-> DEFAULT_RETRY_NUM = 3 DEFAULT_TIMEOUT = 10000 $.ajaxRetry = (url, done, fail, options = {retryCount: DEFAULT_RETRY_NUM, timeout: DEFAULT_TIMEOUT})-> count =
IE9以下でも画面遷移なしにファイルをアップロードする必要があり、少しつまづいたので紹介したいと思います。古くからある手法のようです。 ajaxでアップロード HTML ファイルをアップロードする わかりやすいように必要最低限のHTMLです。<button> の type 属性は はJS側で送信するので、buttonとしておきます。 PHP // 一時ファイルパス $tmp = $_FILES['file']['tmp_name']; // アップロードするフォルダのパス $save = 'test/'.$_FILES['file']['name']; // アップロードに成功したとき if (@move_uploaded_file($tmp, $save)) { echo json_encode(array('state' => true, 'name' => $_FILES['file
ファイル選択をしたら自動的にajaxでアップロードする機能をつくっていたのだけど、やっぱりIE対応でつまづいた。いちおうIE8対応を目指した。 ajax送信は、このライブラリを使用。 jQuery Form Plugin http://malsup.com/jquery/form/ そのままだとIEで動かない。 596行目のfinallyがIEではエラーになるので、コメントアウト。 次、ファイル選択で自動アップロードしたかったので、jQueryのchangeイベントで処理を書いたが発火してくれない。 jQueryのchangeイベントで気をつけること http://d.hatena.ne.jp/sho-yamasaki/20120319/1332168988 onchangeならうまくいくらしい。 あと、ファイル選択部分を以下をつかって整えた。 JavaScript · Jasny Boo
jQueryを使用し、フォームの値をsubmitする方法をメモします。 送信したいデータを変形や追加、バリデーションのチェックなど jQueryやjavascriptを使用するとデータを送信する前に処理することが可能です。 色々な用途で使用できます。 いつも忘れてしまうので、jQueryでformをsubmitする方法と javascriptでformをsubmitする方法をメモします。 ■ jQueryでsubmitする方法 【jQuery】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#form1').submit(funct
jQueryのchangeイベントですが、IEだけ挙動が少し違いました。 jQueryはv1.4.1です。 以下はファイルを選択すると、changeイベントが発生するコードの概略です。 Smple Code <input type="file" id="imageUpForm"> $("#imageUpForm").change(function() { // 処理 }); ただしIEだと発火しない ファイルを選択後、イベントが発火するはずなのですが、IEの場合は発火しません。 IE以外のブラウザでは、画像を選択するとinput要素からフォーカスが外れてイベントが発火します。 IEの場合はinput要素からフォーカスが外れません。 IE以外 ファイルを選択→イベント発火 IE ファイルを選択→ほかの要素をクリック→イベント発火 対策 onchange要素に指定すればIEでも問題なく動作しま
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
黒川仁の文具堂ブログ三昧 このブログでは、金沢市在住のプログラマ/サーバエンジニア 黒川 仁がWeb技術っぽい記事を書いています。 既存のコードをあまり変えずにPOSTしたい場合や、そのまま書くとformタグがネストしてしまう時にjQueryだけでPOSTできたら嬉しいかなと思い、その方法を調べてみた。 AjaxではなくformタグでPOSTしてページ遷移するのと同じ状況にしたい。 やり方としてはjQueryオブジェクトでformを作成してbodyへ追加した後、submitメソッドを実行すればそういうフォームが存在するのと同じことになる。 <script type="text/javascript"> function postForm(){ $('<form/>', {action: 'post.php', method: 'post'}) .append($('<input/>', {
知見の広いエンジニアの方なら、もちろん全てご存知だと思います。 https://t.co/DzqDrvKJwh
よく勘違いして慌てているので書いておきます。 フォーム部品のcheckedやselectedといったbool型のプロパティの操作は、propを使用する。以前はattrを使っていた記憶がありますが、それではちゃんと動いてくれないです。 いちご みかん りんご 全部 $(function () { //全部選択もしくは解除 $('#checkAll').change(function(){ $('input.fruit').prop( 'checked', $(this).prop('checked')); $('select[name=fruit] option').prop( 'selected', $(this).prop('checked')); }); //チェックボックスの変更をリストへ反映 $('input.fruit').change(function(){ $('select
JavaScriptはなぜトレンドが毎年変わると思われていたのか JavaScriptのエンジニャーは口を開くたびに出てくるツール名が違う、いつも環境設定をしている、みたいな話をよく聞きます。実際、それを揶揄するようなエントリーが人気だったりします。 とはいえ、JavaScriptを実際に使い込んでいる人は別にそんなに大きな変化だと思っていない節があって、台風は外周部ほど風速が速い、みたいな印象を感じます。 カンブリア紀のJavaScript ウェブサイトをパカパカ動かすための言語でした。DHTMLです。FireBugが出る前のJavaScriptを開発していた人類は、念力デバッグを駆使していました。あるいはalert()。 三畳紀のJavaScript prototype.js、jQuery、Closure Compiler、YUI、mochikit、Ext.jsなどの時代。JavaSc
jQuery でセレクトボックスを操作!value 値の取得や選択項目の指定、プルダウンテキストの取得方法 select ボックスに対する jQuery の操作をまとめてみました。 JavaScript では value 値が取得・設定に特化することが多いですが、jQuery を使うことで option タグ内のテキスト(プルダウンに表示している文言)も簡単に取得することができます。 以下、サンプルプログラムでは id 属性「select_test」を持つセレクトボックスを用いて解説していきます。 <select id="select_test"> <option value="1">選択肢1</option> <option value="2">選択肢2</option> <option value="3">選択肢3</option> <option value="4">選択肢4</op
Webフォント(@font-face)や均等割付(text-align: justify;)、日本語と英語の間のスペース調節(text-autospace)などCSS3では文字や文章に関わる表現力も大きく向上している。とはいうもののないものはないので、親要素の幅にちょうど収まるようにフォントを拡大、つまりimg要素にwidth: 100%;を指定した時のようにはCSSではできない(少なくとも思いつかなかった)。というわけでふんだんにjQueryを利用したJavaScriptでどうにかしてみた。 Demo: Resize Font Based on Content Width #6 フォントレンダリングの関係上、Firefoxの方が綺麗なのでスクリーンショットはFirefoxで撮影した。 $(window).load(function () { var start = $.now(); $(
Ajaxで通信を強制停止するには XMLHttpRequestのabortを使います。 実際には、abortなんてそうそう使う機会はありません。 果たして使い道はあるのでしょうか? 例えば、Ajax通信中に、「Now Loading・・・」なんていうメッセージをモードレスダイアログで表示し、さらにユーザが手動で通信を停止させる手段としてダイアログの右上に×ボタンを用意しておき、ボタンが押されたタイミングで、abortする、なんていうことが考えられます。 Ajax通信中に他のページに移動する際の問題 ミッションクリティカルなWebシステムでない限り、Ajax通信中に他のページへの移動を許容する事は間々あるかと思います。 例えば、最近私が作成したWebシステムでは、Topページのパフォーマンス向上のために、Ajaxで情報を遅延ロードして表示するような仕組みを採用しました。 どれぐらい、パフォー
オートコンプリートのフィールドはフォーカスが当たるか、または何かが入力されると検索を開始して指定されたリストにマッチする項目を表示します。入力を続けれことで更に対照を絞りこみます。 オートコンプリートは、記事へのタグ付け、アドレス帳からのメールアドレス入力、都市名、郵便番号の入力の際に使用されると便利です。 リストへ表示する項目は、ローカルまたはリモートから、そのデータを取得することが可能です。 ローカルからの取得は小規模なデータセット、例えば50件程のアドレス帳で使用するのに適しており、また 数百、数百万のデータベースなどの大規模なデータを取扱う場合は、リモートからの取得が必要になります。 データ取得の詳細を調べるには、オプションのsourceを参照してください。 <label>プログラム言語を選択してください。</label> <input id="autocomplete" /> <
jQueryでselect要素のテキストを取得する方法を紹介します。 このエントリーでは、 プルダウンで選択したoption要素のテキスト取得 select要素内のすべてのoption要素のテキスト取得 指定したテキストに合致するoption要素を選択状態にする方法 について解説します。 それぞれのサンプルも用意しています。 1.選択したオプションのテキストを取得する 選択したオプションのテキストを取得するには「opstion:selected」とtext()を組み合わせます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> jQuery(function(){ jQuery('#foo').change(function(){ alert(jQ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く