jQuery.ajax()で取得したHTMLの一部を抜き出す方法
jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。 １．問題点 次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $.ajax({ url: 'http://user-domain/foo.html', dataType: 'html', }) .done(function(data) { $("#bar").html(data); }) .fail(function(data) { // ... }); </script> <div id="bar"></div> が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述す
jQueryのajax()を中断する方法
jQueryのajax()を中断する方法を紹介します。 １．問題点 次のように、ajax()メソッドでHTMLを取得するコードがあります。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function( data ) { // ... }); }); }); </script> <input type="button" id="exec
オシャレな読込エフェクトが詰まった「PACE」:phpspot開発日誌
PACE ? Automatic page load progress bars オシャレな読込エフェクトが詰まった「PACE」 Ajaxが生まれたばかりの時はGIFアニメーションが主流でしたが、読込エフェクトも進化してきました。 Googleが採用している、ページの最上部にプログレスバーを表示する方法をはじめとした多彩なエフェクトがこのライブラリに詰まっています デザインもフラットでカラーが自由に選べるのでフラットなサイトでより使いやすそうです 関連エントリ ボタンに直接ローディングボタンを付けられる「Ladda」 for Bootstrap 3 クールなローディングエフェクトのアイデア＆サンプル集 ボタンに直接ローディングアニメーションを付けられる「Ladda」
jQuery 開発者向けメモ - リファレンス
リファレンス $() jQueryオブジェクトを作り出す関数です． $("CSS文字列") CSSで要素を指定し，マッチした要素を持つjQueryオブジェクトを返します． 詳しい指定方法は Selectors を参照してください． jquery 1.1 までは XPath による指定もできましたが，最新版では削除されています． XPath Compatibility Plugin を利用することで，1.2 でも XPath を利用可能です． var $toc_1 = $("#toc_1"); jquery_dump($toc_1); var $h1 = $("h1"); jquery_dump($h1); var $h1head = $("h1.head"); jquery_dump($h1head); var $ahref = $("a[@href^='http://jquery.com
Ajaxの処理が完了したのになぜかajax:completeが発火しないときの話 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年08月28日17:53 JavaScript Ruby Ajaxの処理が完了したのになぜかajax:completeが発火しないときの話 例えば削除リンクを用意して、それクリックしたら要素がAjaxで削除されるみたいな処理の場合にハマったのでそういう悲しいことが他の人には起こらないように書いておきます。 削除リンクはこんな感じ。 = link_to 'Destroy', comment_path(@comment), method: :delete, remote: true, data: { confirm: 'Are you sure?' } リンクをクリックするとAjaxでDELETEリクエストがこのアクションに送られるとします。 def destroy @comment.destroy end これでとりあえず削除は出来るようになりました。ただ、そのときにこの要素自体も消
jQueryとJavaScriptでページ離脱時にAjaxをJSON送信する | debate
必要だったので、jQueryとJavaScriptでユーザがページ離脱したときに、Ajaxを送信したりイベントを実行しようとしたのですが、あまりにもFirefox(FF)、Safari、Chrome、InternetExplorer(IE)での挙動が違ったので、備忘録的にメモ。 結論からいうと、最終的にはIEと、FF、Safari、Chromeの２種類のブラウザを判定してAjax送信方法を切り替えるという方法で実装しました。 まずはページを離脱したときに動作させるjquery ユーザがページを離脱したときに確認分を出すコード。 $(window).on("beforeunload", function() { return "本当に移動しても良いですか？"; }); beforeunloadってのがページを離脱するときに動作するのですが、IEだとリンク内のJavascriptなどにも動作し
jQueryのAjaxでxmlをパースする - omnioo lab.
xmlのパースは今までphpのsimple_xmlみたいなものを使ってきましたが、なかなかこれだけでは仕事にならないというのもあって、最近はAjaxで処理してしまうという頻度が非常に増えています。実際はHTMLに吐き出される情報がローカルのみなのでHTMLソース時代には何も書かれていないというのが、問題なんだか問題じゃないんだか、むしろその方がいいのか...って話ですが、いわゆる素人さんにはそんなこと全然関係なくて、ただただ見てくれがいいという問題が最終的な落とし所になるので、Ajaxでいいじゃないかということになります。 $.ajaxメソッドを使う jQueryでxmlをパースするときは、$.ajaxメソッドを使います。かなり楽チンです。このメソッドはjQueryのプラグインみたいに使える（というか、Pluginはメソッドなのですが）ので、適当なオプションを与えるだけでかなり簡単に使え
11 | 3月 | 2009 | PAOLOG
モコモコつうしん スコティッシュフォールド「モコ」の日々の様子を写真と動画で紹介してます。もうメロメロ♡ ねこと赤ちゃんの初めての遭遇 2015.02.23(Mon.)
jQuery.ajax()のまとめ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
jQueryのDeffered/Promiseを会得した(いまごろ) - ただのにっき(2013-04-17)
■ jQueryのDeffered/Promiseを会得した(いまごろ) なんか最近、やたらと非同期処理の文脈で「promise」というキーワードを見ることが増えて、なんか流行ってんのかなーくらいにしか思ってなかったんだけど、実はjQuery.ajaxを使っているときに恩恵を受けていたことを(いくつか実装してみて)ようやく理解したのであった。Deffered/Promiseが実装されたのは、もう2.0もなろうというjQueryが1.5のころの話である。鈍すぎる……。 というのも、あんまり理解せずにコピペしていたからなんだよな。かつてはこんな感じに書いていたjQuery.ajaxの呼び出しが: jQuery.ajax({ type: 'POST', url: '/', ..., success: function(){...}, error: function(){...} }); 何かのソ
VOYAGE GROUP エンジニアブログ : jQueryを用いた美しいajax処理
2013年02月14日10:48 カテゴリprogramming jQueryを用いた美しいajax処理 こんにちは、Research Panel Asia の関口(@takkyuuplayer)です。 jQueryを用いた非同期処理の待ち合わせについて書きたいと思います。 昨今WebにリッチなUIが求められていますが、その際によく遭遇するのが次のような処理です。 「処理A(非同期)が終わってからその結果を元に処理Bを行いたい。」 jQuery.getなんかでデータを取ってくる際には必須ですね。このような非同期処理の待ち合わせはjQuery.Deferredを使うと簡単に実現可能です。 jQuery.Deferred ex1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></titl
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
CSSのcounter-incrementを使ってリスト以外に番号を付ける方法
あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね。「counter-increment」で番号を付ける対象を指定して、疑似要素を使って表示することになります。 疑似要素を使っているため、IE7以下は非対応ですのでご注意ください。 今回サンプルを２つ用意しました。 ではHTMLから順番に解説していきます。 HTML HTMLはどちらのサンプルも同じで以下のようになっています。 <div class="divCount"> <h4><a href=
[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。
最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね～。みなさん、こんにちは nakamura です。 最近ちょっとおぉ！と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな～と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ！と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね～。 NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。 NETEYE Activity Indicator jquery-plugins/activity-indicator at master ·
![[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
様々なスタイルのツールチップを実装できるスクリプト・opentip - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 様々なスタイルでツールチップを実装する為のJavaScriptフレームワーク・opentipのご紹介です。噴出しの形状や表示場所、Ajax対応など、状況に応じて実装する事が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 <div data-ot="Shown after 2 seconds" data-ot-delay="2"></div> カスタムデータ属性でセッティングできるみたい。 new Opentip("#foobar", "Shown after 2 seconds", { delay: 2 }); 上
How can I add a custom HTTP header to ajax request with js or jQuery?
There are several solutions depending on what you need... If you want to add a custom header (or set of headers) to an individual request then just add the headers property: // Request with custom header $.ajax({ url: 'foo/bar', headers: { 'x-my-custom-header': 'some value' } }); If you want to add a default header (or set of headers) to every request then use $.ajaxSetup(): $.ajaxSetup({ headers:
jQuery で HTTP 接続するときの書き方: Days on the Moon
12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
jQuery.ajax()の非同期通信で実行順序を保証する方法
jQuery.ajax()の非同期通信で実行順序を保証する方法を紹介します。 具体的には、jQuery.ajax()による非同期通信を連続して実行する場合やjQuery.ajax()メソッドによる非同期通信と他の処理を続けて実行する場合、お互いの実行順序を保証する方法です。 本エントリーではjQuery1.8を使って解説します。その関係で、done()メソッドを使っています。done()がサポートされていないバージョンであればsuccess()に読み替えてください。 １．jQuery.ajax()の仕様 「仕様」という表現は適切でないかもしれませんが、例えばjQuery.ajax()による非同期通信を連続実行した場合、実行結果の順序は不定です。 簡単なサンプルとして、for文の中でjQuery.ajax()を実行するコードを用意しました。 <meta charset="utf-8" />
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームの送信をAjax化できるjQueryプラグイン「Submitter」:phpspot開発日誌