【jQuery】プログラミングサンプル集
jQueryを書くときに忘れやすいコードをまとめて紹介していきます。
※随時更新します。
イベント関係
チェックボックスの状態確認
if($("#id").prop('checked')) { /*チェック済み*/ }else{ /*チェックなし*/ }
該当のチェックボックスにチェックをつける
$('#id').prop('checked',true); /*チェックをはずすとき*/ $('#id').prop('checked',false);
チェックボックスにチェックが入ったものだけを取得し配列に格納
var ids = []; $( '#checkbox:checked' ).each( function() { ids.push( $( this ).val() ); });
セレクトボックスを選択する
/*optionのvalueが1になっている項目に選択*/ $('#id').val(1);
セレクトボックスの選択をはずす
$('#id' option').attr('selected', false);
ID名の取得
$('#id').attr('id');
クラス名の取得
$('#id').attr('class');
クラス名の判定
$('#id').hasclass('class名');
表示/非表示の交互に切り替え
$('#id').toggle();
form値を取得してajaxでPOST
var formdata = $('#formname').serialize(); $.ajax({ url: url, type:'POST', dataType: 'text', data : formdata, }).done(function(data) { /*成功時の処理*/ }).fail(function(XMLHttpRequest, textStatus, errorThrown) { /*失敗時の処理*/ })
form値を追加
var formdata = $(form).serializeArray(); formdata.push({param1: 'value1', param2: 'value2'}); $.ajax({ url: url, type:'POST', dataType: 'text', data : formdata, }).done(function(data) { /*成功時の処理*/ }).fail(function(XMLHttpRequest, textStatus, errorThrown) { /*失敗時の処理*/ })
.onイベントの使い方(動的に追加したものも判定
$(document).on('click', '#button', function(){ /*ここに処理記述*/ });
コンソールにログを出力
console.log('サンプル');
デバックダイアログを表示
alert('サンプル');
formのsubmitボタンを押したときにajaxでさらにPOSTしたときの動作について
WordPressのプラグインをカスタマイズすることがあり、
どうしてもフックができなくて致し方なく、submitボタンを押したときにajaxで追加でPOSTする処理を入れました。
しかし
PCだと正常に動作するのに、スマホだとエラー(undefinedエラー)になり更新されない現象が判明。
なので、一時的に非同期処理しないようにajax部分に「async:false」を追加すると反映されることが確認できました。
var formData = $('form').serialize(); $.ajax({ type: "POST", dataType:"text", url:"sample.php" data: formData, async: false, }).done(function(res){ }); });
似たようなサンプル作り、同じ現象になるか試したいと思います。
↓↓↓
プログラムのサンプルと結果を追記しました。
テスト結果「ダメなパターン」
index.php
<html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <form method="POST"> <input type="text" name="txt" value=""> <input type="submit" id="testpost" value="POST実行"> </form> <script type="text/javascript"> $(document).ready(function(){ $(document).on('click', '#testpost', function(){ var formData = $('form').serialize(); $.ajax({ type: "POST", dataType:"text", url:"ajaxpost.php", data: formData }).done(function(res){ alert("ok"); }).fail(function(jqXHR, textStatus, errorThrown){ alert("ng"+jqXHR.status+':'+textStatus+':'+errorThrown); }); }); }); </script> </body> </html>
ajaxpost.php
※テストでファイル作成しただけなので、何も記述しなくても問題ないです。
ajaxpost
「async: false」をなしで、スマホでテストした結果「ng」のほうに飛んでしまいます。
「jqXHR.status」「textStatus」「errorThrown」でエラーを出力してみると、
jqXHR.status=0 textStatus=error errorThrown=
エラーの詳細が書かれてません。。。
似たようなエラーが出た場合は、「async: false」を追加、または、ajaxだけでPOSTする処理に変更したほうが良いかもしれません。
そもそも、2重POSTする時点でおかしいですが、似たようなエラーに遭遇された方に参考になれば嬉しいです。
コード検索にオススメ！サクラエディタのGrep検索を使おう
大量のプログラムを調べるときに、サクラエディタのGrep検索を使うと、当てはまる箇所を一覧で表示してくれる便利な機能があります。
hotmail宛てにメールが送れない件
hotmail宛てにメールを送信しても、エラーが返ってくるようであれば、
対象のIPが受信拒否されている可能性があります。
http://mail.live.com/mail/troubleshooting.aspx#errors
対処法
1.マイクロソフトに問い合わせをしてみる。
早ければ数時間後、遅くても1日後には、マイクロソフトから返信が届くと思います。
これで解決すればいいのですが、解除後すぐ規制されるようでしたら、サーバの乗り換えをオススメします。
特に、共有サーバーだと、同じIPを利用している会社がほとんどで、使う頻度が高いユーザーが混じると、ブロックされる可能性が高くなります。
共有サーバーではない場合、短時間でメールの送りすぎなので、IP分散するか、一時的にブロックされたIPを切り替えることで対処が可能です。
※IPアドレスの切り替えは、解決にはなってないため、送る通数を絞ったり、スパム対策をしたほうが良いでしょう。
2.別のサーバに移転する
IPアドレスが原因なので、対処してもらえないのであれば、サーバを移転するしかありません。
事前に、検討しているレンタルサーバ会社に問い合わせをして、規制されたときの対処、過去に規制されたことがあるかなど、確認するといいでしょう。
【jQuery】notifIt!を使ってフローティングウインドウを表示させる
フローティングウインドウを簡単に実装できるサンプルを紹介したいと思います。
もっとカッコイイデザインで表示させたい！と思った方は、モーダルダイアログの記事も参考にしてくださいね。
zen6a.hateblo.jp
notifIt!のダウンロード先
http://naoxink.hol.es/notifIt/
Step 2 - Download it!の「Now!」ボタンを押すとダウンロードできます。
使用用途
- ajaxで取得結果を表示させたいとき。
- データの更新や削除したときに、画面遷移せず、結果を表示させたいとき。
サンプル1(とりあえず、動作確認を見たい場合
<html> <head> <title>notifIt!</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./notifIt/css/notifIt.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./notifIt/js/notifIt.min.js"></script> </head> <body> <script> notif({ msg: "<b>Success:</b> <br />In 5 seconds i'll be gone", type: "success", multiline: true });[f:id:zen6a:20170731005233p:plain] </script> </body> </html>
下記のフローティングウインドウが表示されれば成功です。
notifIt!のオプション説明
| 引数 | 設定値 | 説明 |
|---|---|---|
| msg | 自由入力 | フローティングウインドウに表示させるテキスト |
| position | center left right |
フローティングウインドウの位置 |
| type | success info warning error |
フローティングウインドウの背景色 |
| bgcolor | カラーコード 例(黒色を指定)：#000000 |
フローティングウインドウの背景色 |
| color | カラーコード 例(黒色を指定)：#000000 |
テキストの色指定 |
| opacity | 数値を入力 例：0.8 |
透明度設定 |
| timeout | 数値を入力 例(1秒表示)：1000 |
フローティングウインドウの表示時間 |
| autohide | true(初期値) false |
自動でフローティングウインドウが消えないようにする |
| multiline | true false(初期値) |
テキストを改行させる |
| clickable | true | ボタンを押したときにフローティングウインドウが閉じる |
ajaxと組み合わせた使い方
<?php /* * notifIt! * https://github.com/naoxink/notifIt/archive/master.zip * Demo * http://naoxink.hol.es/notifIt/ */ ?> <!DOCTYPE html> <html> <head> <title>notifIt!</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./notifIt/css/notifIt.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./notifIt/js/notifIt.min.js"></script> </head> <body> <script> $.ajax({ type: "POST", dataType:"text", url:"http://......", data: { "text":"aaa" }, success: function(res) { notif({ msg: "<b>Success:</b>", type: "success", multiline: true }); }, error: function(res) { notif({ msg: "<b>error:</b>", type: "error", multiline: true }); } }); </script> </body> </html>
