カテゴリー : JavaScript

[JavaScript] form内にname=”submit”という要素があるとsubmit()が動かない

JavaScript で、form内にname=”submit”という要素があると .submit() が動かないらしいです。

そんなわけで、jQueryで下記のように書いたら Property ‘submit’ of object # is not a function というエラーが出ました。

<form id="js-form" method="POST" action="/create">
  <input type="text" name="sample" />
  <input id="#js-submit-btn" type="submit" name="submit" value="保存" />
</form>
 
<script type='text/javascript'>
  $('#js-submit-btn').click(function(){
    $(this).attr('disabled', true);
    $('#js-form').submit();
  });
</script>

formタグの中に submit という name の要素を置くと、そちらを参照してしまうようです。

なので、

<input id="#js-submit-btn" type="submit" name="submit" value="保存" />

<input id="#js-submit-btn" type="submit" name="save" value="保存" />

というように修正すればOKです。


参考情報

javascriptでsubmitできない? | dTblog | デザインとプログラムの境界をさまようブログ

[jQuery]form.submit()できない原因 | HappyQuality

javascript – Property 'submit' of object #<HTMLFormElement> is not a function – Stack Overflow

[jQuery] $.ajax GET をキャッシュさせない設定方法

jQuery で Ajax GET をキャッシュさせない設定方法をご紹介します。

IE はデフォルトで ajax GET は cahce : true らしく、2回目以降サーバーへリクエストを送りません。

なので、明示的に cache : false してあげるといいです。

$.ajax({
  type: 'GET',
  dataType: 'json',
  url : "http://example.com/",
  cache : false,
  ...
});

また、常にキャッシュを無効にする方法もあります。

$.ajaxSetup で cache : false を設定するコードをJavaScriptの共通処理に加えておけば、ajax GET はデフォルトで cache : false で処理してくれます。

$(function() {
  $.ajaxSetup({
    cache: false
  });
});

IE11 で ajax GET の結果がキャッシュされてて正常に動かなくて苦しみました・・・

参考情報

[jQuery] slideDown() のアニメーションが動かないときの解決方法

jQuery の slideDown() のアニメーションが動かないときの解決方法をご紹介します。

普通に使う分には問題ないのですが、divを入れ子にしたような構造で使う場合に slideDown() を呼び出してもアニメーションが動かず、show() を呼んだときのようなパッと表示されてしまいました。

以下に、アニメーションが動かなかったときのHTMLと、解決したJavaScriptのコードを記載します。

.show().slideDown() のメソッドチェーンで解決する

// 一旦、内部elementを非表示にする
$('#content-inner').hide();
 
// 外側のelementを表示してから slideDown()
$('#content-outer').show().slideDown();
 
// 最後に、内部のelementにも slideDown()
$('#content-inner').slideDown();

slideUp() は普通に使うだけ

$('#content-outer').slideUp();
$('#content-inner').slideUp();

参考情報

javascript – jQuery slideDown() animation not working – Stack Overflow

codeigniter – JQuery slidedown effect not working? – Stack Overflow

slideDown([speed], [callback]) – jQuery 日本語リファレンス

slideUp([speed], [callback]) – jQuery 日本語リファレンス

[jQuery] スクロール中に特定の要素を固定するプラグイン「hcSticky」

スクロール中に特定の要素を固定するjQueryプラグイン「hcSticky」が便利だったのでご紹介します。

hcSticky – jQuery Floating Sticky Plugin | Some Web Log

特定の要素に hcSticky() を呼ぶだけで、スクロール時に要素を固定してくれます。

$('#sidebar').hcSticky();

使い方がシンプルでおすすめです。

[jQuery] Minimalect で onChange イベントを発生させる

フォームのselect要素を綺麗に表示させる jQuery ライブラリ「Minimalect」で onChange イベントを発生させる方法をメモ。

$('#js-target-select').minimalect({
  onchange: function() {
    $('#js-target-select').trigger('change');
  }
});
 
$('#js-target-select').change(function(){
  // do onchange event
});

上記のように Minimalect の onchange で select の onchange を発火させればいいみたい。


参考情報

jQuery Minimalectのonchange – プログラミングメモ

[jQuery] mouseover/mouseout と mouseenter/mouseleave の違い

jQuery のイベント mouseover/mouseout, mouseenter/mouseleave の違いを知らずに、かなりハマってしまった…。

下記のサイトが分かりやすく説明してくださってました。

DOM Leve3 イベント mouseover/mouseout, mouseenter/mouseleave それぞれの違いについて – 今日もスミマセン。

mouseenter/mouseleave イベントの方が、利用用途として直感的ですね。

mouseover/mouseout は、内部のDOMを出入りするときもイベントが発火してしまうので、思わぬ挙動をしてしまって結構悩みました。

[JavaScript] モバイルのタップイベントを高速化するライブラリ「fastclick.js」

モバイルのタップイベントを高速化するJavaScriptライブラリ「fastclick.js」が便利そうなのでメモ。

ftlabs/fastclick

スマートフォンwebのタップイベントを高速化するライブラリ"fastclick.js"をさわってみた – ushisantoasobu's blog

[jQuery] Minimalect で値の変更を反映させる方法

フォームのselect要素を綺麗に表示させる jQuery ライブラリ「Minimalect」で、値の変更を反映する方法をメモ。

$("#myselect").val("newvalue").change();

.val() だけでは値はセットされるが表示が変わらないので、.change() で変更したことを教えて上げる必要があるみたいです。


参考情報

Minimalect by groenroos

[JavaScript] 日付や時刻をカンタンに扱えるライブラリ「moment.js」

JavaScript の日付や時刻をカンタンに扱えるライブラリ「moment.js」が超便利だったのでメモ。

Moment.js | Parse, validate, manipulate, and display dates in javascript.

moment/moment – github

JavaScriptで日付を扱うならこれ!「moment.js」 : アシアルブログ

[jQuery] jQuery.ajax(options)、$.ajax のメモ

jQuery の $.ajax メソッドの引数や、success, error, complete などに指定する引数をよく忘れてしまうのでメモ。

jQuery 1.7 までの $.ajax

$.ajax({
  url: 'http://api.example.com/v1/posts',
  type: 'POST',
  dataType: 'HTML',
  data: {
    id: '123'
  },
  success: function(data, statusText, xhr){
    if (xhr.status === 200) {
      // 成功時の処理
    } else if (xhr.status === 302) {
      // HTTPステータスコードによって、処理を分岐
 
      // 302 でリダイレクトさせたり
      location.href = 'http://example.com/redirect';
    }
  },
  error: function(xhr, statusText, error) {
    // エラー処理
  },
  complete: function(xhr, statusText){
    // 共通処理
  }
});

jQuery 1.8 以降の $.ajax

success, error, complete が .done, .fail, .always に変更されているようです。

これについては、いつか更新します。


参考情報

jQuery.ajax()のまとめ: 小粋空間

jQuery モダンAjaxな書き方を目指して 〜Deferredを使ったAJAX〜 – Hack Your Design!

jQuery.ajax(options) – jQuery 日本語リファレンス

jQuery.ajax() | jQuery API Documentation