2018-11-17

【jQuery】Lity.jsの画像ポップアップ機能、動的に追加したコンテンツに効かないぞ！

画像をクリックしたときにポップアップで表示してくれる便利なjQueryライブラリ「Lity.js」
このライブラリですが、やはり動的に追加した「img」には反応してくれません・・。

動的に追加した「img」にもポップアップを有効にするには、追加後の要素に以下のようにイベントをセットしてあげる必要あります
（下記の「.hoge_alink」というのは「img」を囲んでいるaタグのことです・・）

 jQuery(".hoge_alink").click(function() {
      var url = jQuery(this).attr("href");
      var instance = lity(url);
      return false;
});

異常です！

2018-11-15

【FuelPHP】ajax送信データが$POSTの中に入ってないぞ！

最近アルバイトでFuelPHPのコードをいじっているですが、ajaxで送信したデータがサーバ側でうまく受信できない・・。

クライアント側では下記のようにajaxで送信です。

        var post_data = {
            "hoge1_id": "hoge",
            "hoge2_id": "hogehoge",
            "hoge3_id": "hogehogehoge"
        };
        $.ajax({
            url: "/api/hogege.json",
            type: 'POST',
            cache: false,
            dataType: 'json',
            data: post_data,
            contentType: 'application/json'
        }).done(function(data) {
            alert('成功！');
        }).fail(function() {
            alert('失敗・・');
        });

FuelPHP側では下記のようにajaxを受信です。

<?php
class Controller_Api extends Controller_Rest
{
    protected $default_format = 'json';

    public function post_hogege()
    {
        $hoge1 = Input::post('hoge1_id');
        $hoge2 = Input::post('hoge2_id');
        $hoge3 = Input::post('hoge3_id');
        return $this->response("ok", 200);
    }
}

FuelPHP側で、$_POSTの中に何も入ってなくてデータ受信できません！

原因はajaxの「contentType: 'application/json'」の記述・・。この記述がわるい！
この記述あると$POSTの中に値が入らなくてデータ取得できない！
↓
参考ブログ：
PHP で json の POST request の body を参照するには · Yuichi Takada

「contentType: 'application/json'」の記述はいらないので削除する！
これでサーバ側で「Input::post」でデータ受信できる！

あんましFuelPHPは関係ない問題かもしれないけど、めでたしめでたし、ちゃんとできた！
以上！

2018-11-15

【Teraterm】SSHでパスワードをコピペ入力するとログイン失敗する！

ターミナルソフト「Teraterm」でSSHログインするときに、右クリックで「貼り付け」を選択すると、クリップボードにあるパスワードをコピペ入力することができます。

この「貼り付け」で入力したパスですがが、なぜかログイン失敗してしまい、うまくいかない・・。

コピペ入力したパスは「●●●●」みたいに黒塗りで表示されているんだけど、よく見るとこの文字数が一つ多いような・・？
ためしに一番最後の「●」を削除してみると、無事にログイン成功しました・・。

末尾に余分な文字列が一つ付記されていたということなんでしょうか・・。なぜ「Teraterm」でだけこの現象が起きるのか不明ですが、まあこれからはログイン失敗したら、一番お尻の文字を1文字削ることにします・・。

以上・・。

2018-10-31

【CSS】GoogleMap APIを使ったマップのウィンドウ内がスクロールしない！

GoogleMap APIによって動的に追加したマップで、地点をクリックすると「info_window」というポップアップ・ウィンドウを表示をさせることができます。

このウィンドウ内のコンテンツが、iPhoneのサファリでうまくスクロールできない！
画面からはみ出た部分がちょん切れてしまい、見れなくて困ってしまいますた・・。

スクロールを効かせるためには、以下のようなcssを追加すると良いです。
ウィンドウの装飾用のクラス「gm-style-iw」に、スクロールを有効化するための設定をします。

.gm-style-iw {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

以上！

2018-10-30

【jQuery】IEでテーブル要素を追加したら親子関係がめちゃくちゃに！

最近「グーグルマップAPI」を使って遊んでいるんですが、変な問題に悩まされてしまいました・・。

グーグルマップをクリックしたときにポップアップ表示される「info_window」というのがあるですが、ここにjQueryで定義した要素をたくさん追加すると、親子関係が何かおかしくなってしまう・・。

具体的にいうと、「テーブル要素」の後に追加した要素が、全てテーブル中に取り込まれて、子要素になってしまう・・。

これはIEだけで起きる現象で、他のブラウザでは起きません・・。

これは恒例のIEクソバグだと思うので、もう理屈を考えても仕方ありません・・。

下記のように、IEの場合だけ、テーブル要素の後ろに追加するべき要素を、遅れたタイミングで追加(append)するようにしました・・。
（こうすればテーブル要素内に取り込まれず、兄弟関係として追加できるみたい）

  //Googleマップのウィンドウを定義
  var info_window = new google.maps.InfoWindow({
    //パラメータ
    content: jQuery(hogege_map_content).prop('outerHTML')
  });

  //ブラウザがIEかどうかチェック
  var is_IE = false;
  var userAgent = window.navigator.userAgent.toLowerCase();
  if(userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
    var is_IE = true;
  }

  //IEの場合は後から要素を追加
  if (is_IE  == true){
    google.maps.event.addListener(info_window, 'domready', function(){
      jQuery(hogege_map_content).append(ie_kuso1);
      jQuery(hogege_map_content).append(ie_kuso2);
      jQuery(hogege_map_content).append(ie_kuso3);
   });
  }

クソコードとなりますが、異常です・・。

2018-10-19

【HTML】ボタンを押すと勝手にsubmitになって遷移しちゃう！

buttonをクリックすると勝手に画面が遷移してしまう…。
これは、buttonのタイプが「submit」の動作になっていたからでした…。
「submit」したくなかったら、下記のようにちゃんと「type="button"」という属性を付けましょう…。

  <button class="button" type="button">サブミットするなyo！</button>

以上です…。

2018-10-04

【HTML】iframeをクリックすると別ページに飛ぶ動作！

iframeをクリックすると、別ページに飛ぶ動作を作ろうと思ったのですが、かなり手こずってしまいました・・。

結論から言うと、以下のようなコードで出来るようになります。

<div style="position:relative;">
  <div style="pointer-events: none;">
    <iframe>・・・</iframe>
  </div>
  <a href="xxxx" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:9999;"></a>
</div>

「pointer-events: none;」でiframeのクリック動作を無効化し、表面に「z-index:9999」のaリンクの幕を貼りつけています。
普通にiframeをaリンクで囲むと、なぜか「iPhone Safari」でまともに表示してくれなってしまうので、こういう苦しい方法を取ることになりました・・。

↓下記のページに他にもいろいろ詳しい方法が載っています。
html - Use iframe as a link? - Stack Overflow