Ajax+pushStateでページ遷移したときにFacebookプラグインを更新する方法
jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法という記事を書きましたが、じつはAjaxでページを切り替えると、いろんな不都合が生じることが多いです。 とくに外部サービスのプラグインに多くて、ページを全部更新すれば正常なのに、Ajaxで更新したときだけエラーになることがよくあります。本当によくあります(^_^;) 原因としては、外部サービスのプラグインはだいたい、ページ読み込み後に独自のJavaScriptを実行するのですが、Ajaxでページの一部を変えてもプラグインが気づかないため、独自のJavaScriptが実行されずにエラーとなってしまいます。 ただ、気の利いたサービスならAjaxで読み込まれたときの対応方法が用意されています。例えば、Facebook。 ここSensebahnでも実装しているFacebookの「いいねボタン」をAjax対応にする方法をまと
jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法
Sensebahnのサイト内では、ページを遷移するときにページ全体の更新ではなくページの一部を書き換える方法をとっています。（2013/1/31のデザイン変更で廃止しました。） そうすることで、ページ全体を読み込むよりも速く遷移でき、さらに、画面がブランクになる瞬間が発生しないので目のチラツキを抑えられます。 仕組みとしてはAjaxを使います。 AjaxはJavaScriptで簡単に使うことができます。 JavaScriptを使って、Ajaxによりページの一部を、他のページの内容に書き換えるのです。具体的には、次のコードでやります。 example.html <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <scri
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
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">ボ
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のファイルが必要となり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsコンソールさんにAjaxのgetが非同期だよ(？)と指摘される | monologue
