jQuery – ページ 2 – 東京発、雲に乗って

2017年4月19日2017年4月21日

【jQuery】配列や連想配列をコピーする

var array2 = array1;

1	var array2 = array1;

のように配列や連想配列をそのまま代入すると「参照渡し」という形になり、
コピー先だけ変更したつもりがコピー元も一緒に変更されてしまいます。

コピーするには配列の中身を代入していく必要があるのですが、
jQueryの場合はextend関数で簡単にコピーできます。

配列：

var array2 = $.extend(true, [], array1);

1	var array2 = $.extend(true, [], array1);

連想配列：

var array2 = $.extend(true, {}, array1);

1	var array2 = $.extend(true, {}, array1);

2017年4月18日

【jQuery】val()、prop()で値を変更した際にonchangeイベントを発火させる

jQueryでフォームの値を変更した際に、単に

$(フォーム).val(値);
$(フォーム).prop('checked', true);

1 2	$(フォーム).val(値); $(フォーム).prop('checked', true);

としただけでは、onchangeイベントは実行されませんが、

$(フォーム).val(値).change();
$(フォーム).prop('checked', true).change();

1 2	$(フォーム).val(値).change(); $(フォーム).prop('checked', true).change();

のようにchange()を呼ぶことでonchangeイベントを発火させることができます。

2017年4月17日2017年4月17日

【jQuery】Ajaxの非同期通信を中断する

jQueryの$.ajax関数で

async: true

1	async: true

にして非同期通信を行うときに、通信を中断することができます。

やりかたは、$.ajax関数の戻り値を変数に格納し、

var ajax_obj = $.ajax({
  url: '(URL)'
 ,type: 'POST'
 ,data: '(データ)'
 ,async: true
 ,success: function(result) {
    // 成功時の処理
  }
 ,error: function(xml, error, thrown) {
    if(thrown == 'abort') {
      alert('処理を中断しました');
    }
  }
});

var ajax_obj = $.ajax({

url: '(URL)'

,type: 'POST'

,data: '(データ)'

,async: true

,success: function(result) {

// 成功時の処理

}

,error: function(xml, error, thrown) {

if(thrown == 'abort') {

alert('処理を中断しました');

}

});

中断したい場合はその変数のabortメソッドを呼びます。

ajax_obj.abort();

1	ajax_obj.abort();

abortメソッドを呼ぶと、上記の例のように
thrownに「abort」が返されますので
エラーなのか中断なのかの切り分けが可能です。

通信中にモーダルでローディング表示を行っている場合などに
ローディングダイアログに「中断」リンクをつけてあげると親切ですよね。

2017年4月7日2017年4月12日

【jQuery】ページのトップ（最上部）へなめらかにスクロール

最近多用している、ページトップへのアニメーションスクロール、
jQueryなら簡単に実装できます。

var pagetop_scroll = function() {
  var speed = 500; /* ミリ秒 */
  var position = $('html').offset().top;
  $('body,html').animate({scrollTop:position}, speed, 'swing');
};

var pagetop_scroll = function() {

var speed = 500; /* ミリ秒 */

var position = $('html').offset().top;

$('body,html').animate({scrollTop:position}, speed, 'swing');

};

2012年12月19日2017年2月28日

【jQuery】Ajax関数に渡すためのフォームデータを取得

Ajax関数に渡すためのフォームの値を一括で取得します。

var form1 = new FormData($('#フォームのID').get()[0]);

1	var form1 = new FormData($('#フォームのID').get()[0]);

これを$.ajax関数のdataにそのまま渡すことができます。