タグ

jQueryに関するtvskのブックマーク (60)

  • jQuery: ajax メソッドのヘッダーを変更する

    jQuery 1.5 以降であれば headers プロパティでヘッダーを指定することができる。 $.ajax({ url: '/test', type: 'PUT', headers: { 'X-HTTP-Method-Override': 'PUT', 'Content-Type': 'application/json' }, dataType: 'json', data: '{"test": "テスト"}', }).done(function() { console.log('成功'); }); Content-Type のために contentType プロパティも用意されている。複数のヘッダーを指定する場合は、headers プロパティにまとめておいたほうが散らからずにすむだろう。 headers: { 'X-HTTP-Method-Override': 'PUT', }, co

    jQuery: ajax メソッドのヘッダーを変更する
  • Access Control Request Headers, is added to header in AJAX request with jQuery

    I would like to add a custom header to an AJAX POST request from jQuery. I have tried this: $.ajax({ type: 'POST', url: url, headers: { "My-First-Header":"first value", "My-Second-Header":"second value" } //OR //beforeSend: function(xhr) { // xhr.setRequestHeader("My-First-Header", "first value"); // xhr.setRequestHeader("My-Second-Header", "second value"); //} }).done(function(data) { alert(data)

    Access Control Request Headers, is added to header in AJAX request with jQuery
    tvsk
    tvsk 2017/08/09
    POSTリクエストで ヘッダ操作する
  • File APIその後使ってみて - それマグで!

    ファイルAPIをその後ちょっと使う機会があった。いくつか気づいたことがあったのでメモ The File object provides information about -- and access to the contents of -- files. These are generally retrieved from a FileList object returned as a result of a user selecting files using the input element, or from a drag and drop operation's DataTransfer object. input type file以外でもファイルは取れるが ドラッグ&ドロップは DataTransfer オブジェクト経由 XmlHttp は BlobBuilder 経由 da

    File APIその後使ってみて - それマグで!
  • Examples

    There are lots of examples showing basic chart functionality as well as zoom proxies, dynamic replotting, Mekko charts, trend lines, block plots, log axes, filled line (area) plots, and...well you get the picture. When you download a distribution, you'll get over 90 examples of plot types, features and functionality! The examples are a great way to understand what jqPlot is capable of, and to lear

    tvsk
    tvsk 2017/07/24
    グラフ描画。IE7でも動く。
  • jQuery Deferredまとめ - Qiita

    参照 よく分かるjQuery Deferred http://amzn.to/1SkAQXn 学習内容 .done()と.fail() Promise 非同期と同期処理 Deferred .then() $.when() $.Callbacks() 非同期処理を直列に記述、実行するための仕組み。 非同期処理で、複数の処理を、指定した順番で実行することができる。 Promise Jquery ver.1.5からAjax関係のメソッドは「Promise」を返すようになった Ajaxが無事終了した時、「Promise」に、コールバック関数を、done()というメソッドを使って登録する。 Ajaxが異常終了した時、「Promise」に、コールバック関数を、fail()というメソッドを使って登録する。 function onSuccess(){ console.log("成功"); } functi

    jQuery Deferredまとめ - Qiita
    tvsk
    tvsk 2017/06/20
    Deffered の使い方集
  • jCanvasによる楽々グラフィック描画 - Qiita

    データベースと言ったら、何を連想しますか?SQLOracle?いろいろと出てくると思いますが、きっと10位以内に入ってるキーワードとして、必ず「ER図」はあると思います。ER図は書くのが面倒なので、もし手元にある実際のデータベースからER図を自動的に書いてくれたら、こんなに楽なことはないですよね?はい、作ってみました。 この機能を作るために、いくつか図を描画するためのライブラリを検討しました。しかし、しっくり来るものは残念ながらありませんでした。一つ使えそうだったのがJointJSだったのですが、依存ライブラリとして「jQuery, Backbone, Lodash, Geometry, Vectorizer」というそうそうたるメンバーが必要で、やむなく断念しました。そう、ないものは自分で作るしかありません。ER図のような作図は、オブジェクトを描画すること自体は難しくありません。とにかく

    jCanvasによる楽々グラフィック描画 - Qiita
    tvsk
    tvsk 2017/06/09
    Chrome プラグインのRDBMSツールの作者による jCanvas つかったD&Dインタフェース作成
  • 結果の順番を保証して、且つ『並列』でAjax通信を行う方法 - Qiita

    var request = [ { url: 'hoge00.json', params: { hoge: 123, huga: 456 } }, { url: 'hoge01.json', params: { hoge: 246, huga: 912 } }, { url: 'hoge02.json', params: { hoge: 369, huga: 1368 } }, { url: 'hoge03.json', params: { hoge: 492, huga: 1824 } }, { url: 'hoge04.json', params: { hoge: 615, huga: 2280 } } ]; var results = []; var doneCount = 0; for (var i = 0; i <= request.length; i++) { $.ajax({

    結果の順番を保証して、且つ『並列』でAjax通信を行う方法 - Qiita
    tvsk
    tvsk 2017/04/28
    success 関数で順繰り回すのではなく、並列に通信するケース
  • jQueryを使った文字数カウントとthrottle/debounce - ELAB.

    はじめまして、こんにちは。 軽めのjQuery Advent Calendar 2012の9日目の記事です。 今回はよくある文字数カウントをjQueryで実装してみるのと、便利(?)なプラグインの紹介。 初記事ですので、どうぞお手柔らかにお願いさせていただきたく。(ちなみに現時点ではこれ以外にページはありません!) 文字数カウントの実装 早速ですが、こんな感じでHTMLとJSを書いていきます。 textareaに入力された文字数をdiv#result要素の中に表示していく流れですね。 HTML <textarea></textarea> <div id="result">0</div> JavaScript $(function(){ var cnt; // キー入力が発生する度に実行 $('textarea').on('keyup', function(){ // テキストエリアのval

    tvsk
    tvsk 2017/04/28
    jQueryプラグインとして提供されている throttle/debounce を使ってみるサンプル。コードサンプルとデモあり。
  • How to convert HTML table to Javascript Object with jQuery

    tvsk
    tvsk 2017/04/26
    テーブルをjsonに変換したい。 “var tbl = $('#students tr:has(td)').map(function(i, v) { var $td = $('td', this); return { id: ++i, name: $td.eq(0).text(), age: $td.eq(1).text(), grade: $td.eq(2).text() } }).get();”
  • jQuery公式のテンプレートplugin 「jQuery Templates」

    jQuery公式のテンプレートplugin 「jQuery Templates」 Check Tweet 配布元:jquery’s jquery-tmpl at master – GitHub リファレンス:jQuery Templates jQueryプロジェクトからいくつかの公式プラグインが公開されました。そのひとつが「jQuery Templates」。これはJavaScriptで利用できるテンプレートエンジンです。 利用方法 エントリー執筆時点ではGitHubからダウンロードして利用できますが、jQuery 1.5からはjQuery体に組み込まれ、プラグインなしで利用することが出来ます。(体への組み込みは延期されました)また、MicrosoftのCDNでも公開されていますので次のような記述で読み込むことも可能です。 <script type="text/javascript"

    tvsk
    tvsk 2017/04/26
    ミニマムな使い方の紹介。素性、基本、応用よく整理されている。
  • DOMContentLoaded周りの処理を詳しく調べてみました - Qiita

    利用者が一定数いるIE6,7,8を除いて、現在利用されているほぼ全てのブラウザで標準仕様として扱えるようになっています。2006年ごろから登場したjQueryの$(document).readyは有名ですが、この存在もDOMContentLoadedが正式に取り入れられるきっかけの1つになっています。 2. jQueryのreadyとの違い HTML5で定義されているDOMContentLoadedとjQueryの$(document).readyは、DOMツリーの構築が完了したことを判定するという点で役割は一緒といえます。ただ、jQueryは古いバージョンのブラウザをサポートするためにDOMContentLoadedを使わないready判定の実装を行っていました。 1. jQuery Core 1.0のready判定(1.0から1.2.1まで) jQyer Core 1.0を見るとIE/

    DOMContentLoaded周りの処理を詳しく調べてみました - Qiita
  • jQuery Advanced Scrollbar Demo

    tvsk
    tvsk 2016/12/06
    スクロールバーのカスタマイズ
  • jQuery.ajax()のまとめ

    jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする(1.4で止まっているとか)ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は15項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見(といっても古い情報ですが…)があり、jQueryが日々進化していること

  • jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry

    インターネット・スマホ、そしてテレビにwebの魔法をWizardry

    tvsk
    tvsk 2016/06/28
  • jQuery AJAX POST Tutorial

    Jorge Colon Jorge is a seasoned, Zend-certified PHP expert with over 7 years of experience as a software consultant. 1 Introduction You load a website and you see something. You click on a button — maybe "next page" to change the result set — and it loads new data, but the page didn't refresh. This happened thanks to AJAX. Let's look at a real-life example. Go to google.com and search for "dogs" —

    jQuery AJAX POST Tutorial
    tvsk
    tvsk 2016/06/20
    POST で ajax で、としたときの content-type
  • Adding data attribute to DOM

    tvsk
    tvsk 2016/06/15
    $.data() は DOMの属性にアクセスしない。 HTML5のカスタムデータ属性を作成したり、参照する場合は $.attr() を使う。
  • とほほのjQuery入門 - とほほのWWW入門

    トップ > jQuery > Ajax Ajax(Shorthand Methods) ◆ obj.load(url[, data][, complete(data, textStatus, xhr)]) (1.0)

    tvsk
    tvsk 2016/05/10
    “$.ajaxSetup” というデフォルトオプションを設定する関数が存在する。便利。ほかにも Ajax の グローバルな挙動を設定できる Ajax(Global Ajax Event Handlers) など
  • $.extend() | jQuery 1.9 日本語リファレンス | js STUDIO

    補足事項 引数が1つの場合、targetオブジェクトが省略されたと見なされ、jQuery自体がtargetとなります。 jQueryプラグイン作成時にjQuery名前空間を拡張する際に使用されます。 targetに指定したオブジェクトが変更され、また、そのオブジェクトが戻り値となることに注意してください。 もし、元のオブジェクトを変更したくなければ空のオブジェクトをtargetに指定します。 var object = $.extend({}, object1, object2); $.extend()は通常、再帰的なマージを行いません。 もし、targetに指定したオブジェクトのプロパティがそれ自身もオブジェクトであったり、配列であった場合、 第2引数以降のオブジェクトにキーが一致するプロパティがあれば、完全に上書きされてしまいます。 第1引数のdeepに対して、trueを指定すればこれら

    tvsk
    tvsk 2016/04/19
    日本語のjQuery リファレンスはこれがシンプルでわかりやすいかも
  • Can you have a JavaScript hook trigger after a DOM element's style object changes?

    tvsk
    tvsk 2016/04/19
    任意のセレクタのクラス変化を拾う $.fn.attrchange のつかいかた。
  • jQuery.extend() メソッドの使い方まとめ | Tips Note by TAM

    知っている人には当たり前のことかもしれませんが、使い方をまとめておきます。 jQuery.extend() は、基的には複数のオブジェクトをマージして返してくれるメソッドです。 (プラグインのソースで、デフォルトの設定値を上書きする時などによく見かけますね) jQuery.extend(target[, object1][, objectN]) こんな感じで使います。 オブジェクト a の内容と b の内容をマージしたいとき、 var a = { id: 1, name: 'TAM' }; var b = { name: 'TAM-new', hobby: 'football' }; $.extend(a, b); console.log(a); // 結果: // { // id: 1, // name: "TAM-new", // hobby: "football" // } $.e

    jQuery.extend() メソッドの使い方まとめ | Tips Note by TAM
    tvsk
    tvsk 2015/09/17
    オブジェクトのマージをおこなうjQuery関数extend