jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
history.back();問題を解決してみる at softelメモ
history.back()はブラウザの履歴を利用して1つ前のページに戻る機能です。これによりどのページから来た訪問者でも個々のユーザーに合わせたページへ戻ることができます。 この機能、多くのところでは以下のように書かれており、ブラウザからアドレスを入力して開いた場合は機能しません。 <a href="javascript:history.back();">一つ前のページへ戻る</a> 戻るリンクはそのサイトのトップなり1つ上のカテゴリページへ戻ることを意識してリンクをクリックしますので、動かなかったり、検索エンジンへ戻ったりするとユーザーはそのままサイトから離脱している可能性が高いです。 そこで対策を考えてみます。直接来た場合はトップページへ返すことを考えます。 まず、history.lengthで考えてみます。これは戻す、進むで使う履歴がいくつあるか取ることができます。ですので、直接開
jQueryのAjaxを使用して外部htmlを読み込む
Posted: 2011.04.04 / Category: javascript / Tag: Ajax, jQuery Ajaxとは画面遷移なしで、データを取得したり表示したりできるあれです。最近のWebアプリケーションでは必須な技術らしいです。 知識としては知っていたものの実際使ったことがなかったので、かなり今更感が高いですが挑戦してみます。 Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。 まずは読み込まれる側のhtmlファイルを作成します。 load.html <li>読み込めたかな？</li> 読み込まれる側は「li」だけです。「load.html」という名前で保存します。 次は読み込む側です。 index.html <ul id="sample01"></ul> <p><a href="#" id="button01">ボ
【jQuery】ページが読み込まれた瞬間にFancyboxを呼び出す - もぐめぽろぐ
読み込まれた瞬間にFancyboxを呼び出す。。。 その方法とはっ！！ まぁ答えは以下にいろいろ書いてあります。 How to launch jQuery Fancybox on page load? 僕がとった方法はこんなかんじで使いました。 $( function() { $.fancybox({ hideOnContentClick:true, overlayShow:true, type:'iframe', width:660, height:200, href:'読み込むページアドレス', }).click(); });
Fancy Box - how to refresh parent page when close iframe popup?
I want my parent page to refresh when I close a Fancy Box popup frame. I have a login page inside the popup, so I need the parent page to refresh to show the new login state when the Fancy Box closes. I can get it to work without the iFrame code: <script type="text/javascript"> $(document).ready(function() { $("a.iframeFancybox1").fancybox({ 'width': 800, 'height': 450, 'onClosed': function() { pa
【JavaScript】ドラッグ＆ドロップで画像を非同期アップロードできるライブラリ dropzone.js の デフォルトCSS を有効にしたままカスタマイズする - pospomeのプログラミング日記
【追記 2013/10/24】 サンプルをアップしました。 https://github.com/pospome/DropzoneJsSample 【追記 2013/09/13】 CSSの設定を追記しました。 基本的な使い方を書きました。 http://d.hatena.ne.jp/pospome/20130913/1379050713 dropzone.jsはAjaxを利用した非同期ファイルアップロードライブラリ。 http://www.dropzonejs.com デモを見るとかなりいい感じ。 アップロード中のプログレスバー表示などデザインもちゃんとしている。 jQueryに依存しないというのも環境によっては嬉しい。 ただ、dropzone.jsのデフォルトデザインを活かしたまま、ちょっと手を加えようとすると ハマってしまったのでメモ。 以下はdropzone.jsのデフォルトデザイン
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章を[続きを読む]などであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.jtruncate.js" type="text/javascript"></script> 実装 対象の要素にidもしくはclassを指定して、オプションを設定します。 <div id="div627">折りたたみする文章</div> <script type="text/javascript"> $().ready(function() { $('#div627').jTruncate({ length: 200, // 表示す
PHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみた
こんにちは かねしろ@pinkrootです。 昨日は久しぶりにPHPでのコーディングを行いました。 取り組んだのはPHPとjQueryを組み合わせて、あるボタンが押されたときにajaxなPOSTを飛ばして、その飛んでいったパラメータをMySQLに格納する、という文字での説明が難しい処理です(笑) イメージとしては、ボタンを押しても画面がリロード(更新)されず、処理の裏側でDBへのデータ格納を行なっている、という感じ。 備忘録的にやり方をまとめます。 HowTo 自分で作成するファイルは以下の3つ。 ユーザが閲覧してボタンを押す画面(index.html) ボタンが押されたら呼び出されるjavascriptファイル(post.js) バックボーンで動作し、MySQLでデータを格納するPHPファイル(post.php) 上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ポーキーブログ
TOPSY API を使ってみる | doli blog