東京発、雲に乗って

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月13日2017年4月13日

【JavaScript】FORMタグのないページからPOST送信する

FORMタグがない状況でJavaScriptからパラメータをPOSTで渡す関数です。

var post_submit = function(url, data) {
  // FORMがなければ作ればいいじゃない。
  var _html = '<form method="POST" action="' + url + '" id="temp_form" style="display:none;">';
  for(var x in data) {
    _html += '<input type="hidden" name="' + x + '" value="' + data[x] + '" >';
  }
  _html += '</form>';
  $("body").append(_html);

  $('#temp_form').submit();
  $('#temp_form').remove();
};