Language « 夢茶爺＆空茶爺のPC奮戦備忘録

ページの読込

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 16:34:22 | 最終更新：2017-01-04 (水) 10:45:14

参考サイトをメモ。

書式

Ajax(Low-Level Interface)
1.8 からこの書式。

$.ajax({
url: 'test.php'
})
.done(function(data, status, xhr) {
// 通信成功時の処理
})
.fail(function(xhr, status, error) {
// 通信失敗時の処理
}).always(function(arg1, status, arg2) {
// 通信完了時の処理
});

例

$.ajax({
url: 'test.php',
type: 'POST',
timeout: 10000
})
.done(function(data, status, xhr) {
$('#result').html(data);
})
.fail(function(xhr, status, error) {
$('#log').append('xhr.status = ' + xhr.status + '<br />'); // 例: 404
$('#log').append('xhr.statusText = ' + xhr.statusText + '<br />'); // 例: Not Found
$('#log').append('status = ' + status + '<br />'); // 例: error
$('#log').append('error = ' + error + '<br />'); // 例: Not Found
});

返却値の利用

$.ajax({
url: 'test.php'
})
.done(function(data, status, xhr) {
// これで JSON Object として扱える
var response = $.parseJSON(data);
})
.fail(function(xhr, status, error) {
// 通信失敗時の処理
})
.always(function(arg1, status, arg2) {
// 通信完了時の処理
});

参考サイト

とほほのWWW入門：jQuery入門　Ajax
→いつもいつもお世話になっております！

Crunchtimer：[jQuery] Ajaxの.loadと.post(.get)の違いについて

Designup：jQueryでAjax 画面遷移なしでデータを読み込む方法
→現在のページの指定箇所へ読み込む方法が載っている

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 16:34:22 | 最終更新：2017-01-04 (水) 10:45:14

Comments (0)

フォームデータの送信

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 16:31:51 | 最終更新：2015-02-11 (水) 16:31:51

参考サイトだけ残しておく。

参考サイト

小粋空間：jQueryでフォームデータを送信する方法のまとめ
小粋空間：jQueryでajax()の重複実行を回避する方法

Posted by muchag | jQuery |
初回投稿：2015-02-11 (水) 16:31:51 | 最終更新：2015-02-11 (水) 16:31:51

Comments (0)

jquery.pjax.js （defunkt 版）

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-02-11 (水) 15:20:23 | 最終更新：2015-02-18 (水) 15:29:09

Ajax と pushState を組み合わせた技術らしい。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4

概要

差し替え機能

とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
　

URL 変更機能

別ページの URL へ切り替える。
　

効能

ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
　

インストール

GitHub：defunkt/jquery-pjax から DL して配置。

falsandtru 版と呼ばれる別バージョンもあるそうなので

jquery.pjax.defunkt.js

とリネームして配置。
　

使い方

ライブラリの読込

<script src="jquery.min.js"></script>
<script src="jquery.pjax.defunkt.js"></script>

ファイルの配置

index.html

<body>
<div>pjax before.</div>
<div id="container">
<div><button>pjax before.</button></div>
</div>
<script type="text/javascript">
$( document ).ready( function() {
$( 'button' ).click( function() {
$.pjax({
url: 'pjax_test.php';
container: '#container',
fragment: '#container_new'
});
});
});
</script>
</body>

pjax_test.html

<body>
<div>pjax after.</div>
<div id="container_new">
<div>pjax after. Good Job!</div>
</div>
</body>

結果

これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
　

連続

ところが、１度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
　
そこで１枚のページで差し替えるタイプにしたら、連続して動作した。

index.php

<body>
<div id="container">
<div id="test">
<button id="hoge_1">pjax</button>
<button id="hoge_2"><?php echo ( empty( $_GET['value'] ) ) ? 1 : $_GET['value'] + 1; ?></button>
</div>
</div>
<script type="text/javascript">
$( document ).ready( function() {
$( 'button' ).click( function() {
$.pjax({
url: 'index.php?value=' + $( '#hoge_2' ).text(),
container: '#container',
fragment: '#container_new'
});
});
});
</script>
</body>

ただし、

container: '#container',
fragment: '#container'

ここを同じ名前にすると１回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな～。。。
　
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯

解決？

やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。

container: '#container',

これでちゃんと動く。
　

オプション、イベント

オプションやイベントを見てやってみましょう。
　

開始時処理

　
$(document).on('pjax:send', function(e) {
$('body').append("<div id='loading'>処理中</div>");
});

終了時処理

$(document).on('pjax:complete', function(e,data) {
$("#loading").remove();
});

これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に！
　

フォームの値の受け渡し

フォームの値の受け渡し参照。
　

注意

ブラウザバックとかの挙動への対処が必要ね～。
　

参考サイト

RakSul：はじめての「pjax」
Qiita：pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix：defunkt版pjaxの説明

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-02-11 (水) 15:20:23 | 最終更新：2015-02-18 (水) 15:29:09

Comments (0)

優先順位

Posted by muchag | CSS |
初回投稿：2015-02-11 (水) 13:50:44 | 最終更新：2015-02-11 (水) 13:50:44

計算式を発見！

優先順位

記述場所

タグの Style 属性　＞　.html ファイルに直書きの CSS　＞　外部 CSS ファイル

指定はどんどん上書きされていくから
要は、読み込む順序の問題である。
　

固有度

また、アプローチの仕方が異なって被る指定があった場合は
より固有度の高い指定が優先される。

id　＞　class　＞　タグ

<div id="hoge" class="moge">無茶な爺！</div>

div {
color: #ff0000;
}
#hoge {
color: #00ff00;
}
.moge {
color: #0000ff;
}

この場合、「無茶な爺！」という文字は、緑文字になる。
　

計算式

という風にザックリとイメージをしていたけど、計算式なるものを発見したので、メモ。
Qiita：CSSセレクタの優先順位の計算方法

Posted by muchag | CSS |
初回投稿：2015-02-11 (水) 13:50:44 | 最終更新：2015-02-11 (水) 13:50:44

Comments (0)

CSS Index

Posted by muchag | CSS |
初回投稿：2015-02-11 (水) 13:28:53 | 最終更新：2023-05-30 (火) 9:42:10

CSS も、色々と奥が深い。
ましてや、CSS3 が出てからはわけわけらんチーン。。。 🙄

丸っきりの書きかけ項目は Not found になる。

基本

基本

プロパティ

擬似クラス

:nth-child()

Tips

未分類

参考

w3c：Cascading Style Sheets
w3c：日本語訳ページ
MITSUE-LINKS：Web標準仕様日本語訳一覧：CSS
MDN：CSS

その他各参考サイトについては、各エントリーにて。

Posted by muchag | CSS |
初回投稿：2015-02-11 (水) 13:28:53 | 最終更新：2023-05-30 (火) 9:42:10

Comments (0)

書式

Posted by muchag | jQuery |
初回投稿：2015-02-10 (火) 11:14:07 | 最終更新：2016-04-17 (日) 17:07:06

色々なサイトを見て勉強させていただいているが、書式がバラバラで混乱してきたので、メモ。

jQuery フレームワークの利用

下記、どちらでも同じこと。

jQuery()
$()

　
なので

$.isNumeric( arg );
jQuery.isNumeric( arg );

これも同じこと。
jQuery 本体のメソッドを使ってるということ。
　

jQuery オブジェクト

下記の３タイプがある。

$( selector [, context ] )
$( html [, ownerDocument ] )
$( callback )

$( selector [, context ] )

いっぱいあるけど、代表は CSS セレクタ（とその属性）。
Category: Selectors

わかりやすくいえば、タグ、id、class など、CSS で直接指定できるもの。

$( 'body' ) // タグ <body>～</body>
$( '#hoge' ) // id <div id="hoge">～</div>
$( '.moge' ) // class <a class="moge">～</a>
$( '*' ) // ユニバーサルセレクタ（全称セレクタ）

これで、それぞれに該当する DOM 要素を捕まえることができる。
　

属性まで含める場合

// id が hoge で、name 属性が・・・
$( '#hoge[name="sun"]' ) // sun のもの
$( '#hoge[name!="sun"]' ) // sun でないもの
$( '#hoge[name^="sun"]' ) // sun で始まるもの
$( '#hoge[name$="sun"]' ) // sun で終わるもの
$( '#hoge[name*="sun"]' ) // sun を含むもの
$( '#hoge[name~="sun"]' ) // sun という「単語」が入っているもの

// name 属性を持っているもの
$( '#hoge[name]' )
// hreflang 属性が en であるもの
$( '#hoge[hreflang|="en"]' )
// name 属性を持っていて、value 属性が man で終わるもの
$( '#hoge[name][value$="man"]' )

$( html [, ownerDocument ] )

DOM 要素そのもの。
DOM 要素生成中に割り込む。

$( '<p>jQuery の可能性はすごいね～</p>' )

$( callback )

特別なお方。（要は私にはよくわからない） 🙄
DOM 要素を読み込み終えたときに発動。

$( document )

特別なので、クォーテーションで括らない。
　

メソッド or イベント

オブジェクトを捕まえたら、後はそのメソッドやらイベントやらを繋げていくだけ。

// id が hoge のオブジェクトの text の
$( '#hoge' ).text() // getter
$( '#hoge' ).text( arg ) // setter
$( '#hoge' ).click() // イベントリスナー

イベント

.click( handler )
.on( "click", handler )

どちらも同意。
と思ったけど、違うらしい。
前者は、読込時に定義してしまうので、動的に変化をさせたものには対応できない。
後者は、イベント発生時に都度調査をするので、動的な変化に耐えられる。
　

onメソッドはイベントが発生するごとにhtmlの構成をチェックします。

jQuery 入門：イベント(2)

マニュアルの上っ面だけを読んでいると危ないにゃ。。。 🙄
　

.trigger

.trigger( "click" )

これは、イベントを発動させる。
　

事前定義

どれも同意。

$( document ).ready( handler )
$().ready( handler )　←非推奨
$( handler )
$(document).on( "ready", handler ) ←これもあるけど、1.8で廃止予定？　てか、上の３つの後になるのでダメ？

　
確かによく見るのは下記２種。
DOM 要素の読み込みを完了したら呼ばれる。

$( document ).ready(function() {
// Handler for .ready() called.
});
$(function() {
// Handler for .ready() called.
});

this

$( this )
this

これも何気に困ってた。
　

$( this )：jQuery オブジェクト
this：DOM 要素（jQuery とは関係ない）

と書いてもすぐにはピンとこないよね～。

例えば、id を取得したかったら、下記のような表記の差が出る。

$( this ).attr( 'id' )
this.id

Posted by muchag | jQuery |
初回投稿：2015-02-10 (火) 11:14:07 | 最終更新：2016-04-17 (日) 17:07:06

Comments (0)

split

Posted by muchag | PHP |
初回投稿：2015-02-09 (月) 12:47:48 | 最終更新：2015-02-09 (月) 18:02:16

split は、文字列を指定文字で分割して、配列にして返してくれる関数。
　
PHP マニュアル：split

2015-02-09 追記

警告
この関数は PHP 5.3.0 で非推奨となりました。この機能を使用しないことを強く推奨します。

— snip —

ヒント
split() は PHP 5.3.0 以降で非推奨になりました。この関数のかわりに preg_split() を使うことを推奨します。正規表現の威力が必要ないのであれば、explode() を使用するほうがより高速です。これは正規表現エンジンのオーバーヘッドを受けません。

PHP マニュアル：split

あｗ
代わりは・・・explode っと。

ここまで

【環境】
[ PHP ] 5.4.7

書式

array split ( string $pattern , string $string [, int $limit = -1 ] )

string を、正規表現によって配列に分割します。

第１引数：大文字小文字を区別する正規表現
第２引数：入力文字列
第３引数：limit が指定された場合、返される配列には最大 limit の要素が含まれます。この場合、最後の要素には string の残りの部分が全て入っています。省略可
返り値文字列の配列
　

返り値

これまで、split を利用するときは、配列で受け取ることしかしてなかったけど、list で受け取ることができることを今日知った。

// デリミタはスラッシュ、ドット、ハイフンのどれかです。
$date = "04/30/1973";
list($month, $day, $year) = split('[/.-]', $date);
echo "Month: $month; Day: $day; Year: $year<br />\n";

戻り値の意味がよくわかる。これは便利。
マニュアルはちゃんと読まないとね。。。

Posted by muchag | PHP |
初回投稿：2015-02-09 (月) 12:47:48 | 最終更新：2015-02-09 (月) 18:02:16

Comments (0)

Numeral.js （数値フォーマット）

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-02-08 (日) 22:26:14 | 最終更新：2015-02-08 (日) 22:26:14

数値フォーマットライブラリ。

Qiita：JavaScriptでカンマ区切りなどによる数値のフォーマットができるNumeral.jsが便利
こちらで紹介されていた。
　
Numeral.js

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-02-08 (日) 22:26:14 | 最終更新：2015-02-08 (日) 22:26:14

Comments (0)

文字列 -> 検索（部分一致）

Posted by muchag | jQuery |
初回投稿：2015-02-08 (日) 20:12:02 | 最終更新：2015-02-11 (水) 18:01:35

部分的に一致する名前を持つ要素を一括で操作する方法。

jQuery の場合、ページ内の要素をいっぺんに操作することがあるけど、id などを利用して名前をつけている場合、微妙に名前が違うことがある。
これを一括で操作する方法を見つけた。

Qiita：jQueryで指定した文字列を含むidの要素を非表示にする

<tr id="row_1"></tr>
<tr id="row_2"></tr>
<tr id="row_3"></tr>

$( '#row_1' ).hide();
$( '#row_2' ).hide();
$( '#row_3' ).hide();
↓
$( '[id *= "row_"]' ).hide();

１行毎に隠したいときは上を。
全て隠したいときは下を。
便利～♪

Posted by muchag | jQuery |
初回投稿：2015-02-08 (日) 20:12:02 | 最終更新：2015-02-11 (水) 18:01:35

Comments (0)

jquery.shapeshift.js （要素を DnD で並べ替える）

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-02-08 (日) 19:18:53 | 最終更新：2015-02-12 (木) 12:34:33

前回の jquery.tile.js （タイル状に配置）で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js

またもや、下記サイトにお導きをいただきました。
啓文社：[jQuery] タイルをドラッグ＆ドロップで並べ替え

【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2

JS

GitHub：jquery.shapeshift
ここから DL して、入手。

すごい数のオプションｗ

<script type="text/javascript">
defaults = {
selector: "*",
enableDrag: true,
enableCrossDrop: true,
enableResize: true,
enableTrash: false,
align: "center",
colWidth: null,
columns: null,
minColumns: 1,
autoHeight: true,
maxHeight: null,
minHeight: 100,
gutterX: 10,
gutterY: 10,
paddingX: 10,
paddingY: 10,
animated: true,
animateOnInit: false,
animationSpeed: 225,
animationThreshold: 100,
dragClone: false,
deleteClone: true,
dragRate: 100,
dragWhitelist: "*",
crossDropWhitelist: "*",
cutoffStart: null,
cutoffEnd: null,
handle: false,
cloneClass: "ss-cloned-child",
activeClass: "ss-active-child",
draggedClass: "ss-dragged-child",
placeholderClass: "ss-placeholder-child",
originalContainerClass: "ss-original-container",
currentContainerClass: "ss-current-container",
previousContainerClass: "ss-previous-container"
};
</script>

HTML

JavaScript 部分

上記オプションの必要部分を、下記で上書きする。

<script type="text/javascript">
$(".container").shapeshift({
minColumns: 3
});
</script>

フック

参考サイトには、下記のような記述があった。
こうすることで、フックを作れるのね～。

<script type="text/javascript">
$(".container").on('ss-drop-complete', function(e){
$('.tile').tile(4);
});
</script>

要素部分

<div class="container">
<div class="tile">要素</div>
<div class="tile">要素</div>
<div data-ss-colspan='2'>要素</div>
<div class="tile">要素</div>
</div>

CSS

.container {
border: 1px dashed #ccc;
position: relative;
}
.container > div {
background: #CCC;
height: 100px;
position: absolute;
width: 80px;
}
.container > div[data-ss-colspan='2'] { width: 170px; }
.container .ss-placeholder-child {
background: transparent;
border: 1px dashed red;
}

タイルが全て重なってしまう現象

２度起きた。
　
１度目の原因と解決法は忘れてしまった。。。残念。
　

原因

JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯

$('[id = "hoge"') // 誤
$('[id = "hoge"]') // 誤

閉じカッコ（]）が抜けていた。
　
タイル要素内のテキストボックスの値チェックを入れたときに起きた。

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-02-08 (日) 19:18:53 | 最終更新：2015-02-12 (木) 12:34:33

Comments (0)

ブログ内検索

Main Menu

カテゴリー

最近のコメント

アーカイブ

メタ情報

ページの読込

フォームデータの送信

jquery.pjax.js （defunkt 版）

優先順位

CSS Index

書式

split

Numeral.js （数値フォーマット）

文字列 -> 検索（部分一致）

jquery.shapeshift.js （要素を DnD で並べ替える）