東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

ajax メモ

今回のケースは、ワードプレスのトップページで、wp-content/themes/自分で作ったテーマフォルダ/example.htmlのこの外部htmlをajaxで読み込んだ。


注意することは、Ajaxで取得したHTMLにfindを使って絞り込めないと思ったらbody直下のものはfindでは取得できないということだ。

http://cly7796.net/wp/javascript/refine-using-the-find-to-html-acquired-in-ajax/





script.js

$(function() {

  // ライトボックス開く挙動
  $('.map_left_ul li a').on('click', function(e){
  e.preventDefault();
  $('#spot_detail_overlay').velocity('fadeIn');
  $('#spot_detail_flex').velocity('fadeIn');
  $('#ico_close').velocity('fadeIn');
  var clickUrl = $(this).attr('href');
  $.ajax({
    type: "GET",
     // url: my_script_vars.url,
     url: clickUrl,
     dataType: "html",
    cache: false, //キャッシュを保存するかの指定
    success: function(html){
      //データ取得後に実行する処理
      console.log("ファイルの取得に成功しました");
      $(html).find('#spot_detail_box_outer').each(function(){ //読み込みたい部分の指定 ※今回は#spot_detail_box_outerの中身から読み込まれる
        $('#spot_detail_flex').html($(this).html()); //読み込んだ外部HTMLを表示する領域を指定
        return false;
        
      });
      // $('.test').html(html);
    },
    error:function() {
        //取得失敗時に実行する処理
        console.log("何らかの理由で失敗しました");
    }
  }); // ajax終わり

  return false;
  }); // $('.map_left_ul li a')のクリックイベント終わり


  // ライトボックス閉じる挙動
  $("#spot_detail_overlay,  #ico_close").on("click", function(event2){
    // $('html').css('overflow','visible');
    // mfp.cancel();
    // $('html, body').css('overflow', 'visible');
    $("#spot_detail_overlay").velocity('fadeOut');
    $('#spot_detail_flex').velocity('fadeOut');
    $('#ico_close').velocity('fadeOut');
    $("#spot_detail_box").remove();
    return false;
    
  });

});

【基本ajaxコードは下記サイト参考】
https://www.weblab.co.jp/staff/html/4649.html


【読み込み時のときのローダーの挿入】
https://www.webopixel.net/javascript/308.html