Jquery3に移行したらajaxが稼働しなくなった

Question

ajax-loadを使用して特定の箇所を以下の読み込みを行なっています。

<div id="hogehoge" data-type="html" class="js-ajaxload" data-url="/hoge.html"></div>

jquery1では問題なく動いていたのですが、3に移行した読み込みが行えなくなってしまいました。

jsには以下の記述がされています。

 e.run.ajaxLoad = {
    init: function () {
      var t = this;
      n(".js-ajaxload").each(function () {
        var e = n(this),
          a = e.attr("data-url"),
          i = e.attr("data-type"),
          o = e.attr("data-callback");
        a && "html" == i && t.typeHtml(e, a, o)
      })
    },
    typeHtml: function (t, a, i) {
      var o = this;
      n.ajax({
        url: a,
        dataType: "html"
      }).success(function (a) {
        i ? o[i](t, a) : t.append(a), e.run.macthHeight.update(), n(document).trigger("ajaxLoaded--dev", t)
      }).error(function (t) {})
    },
    sideSearch: function (t, n) {
      t.append(n), e.run.sideSearch.init()
    }
  }, 

こちらをどのように変更すればjQuery3環境でも動くようになりますでしょうか。

Comments

[kyoya0819]

まさか、slim-jQueryを利用しているという落ちはありませんよね...？

[Mshady]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

上記読み込んでいます・・・

[FKM]

Chromeの開発コンソールで、javascriptのエラー（赤く表示されているもの）がなにか表示されてませんか？load、success、errorがどうたらとか？

[Mshady]

エラーとしては以下のものがでています。

jquery.min.js:2
Uncaught TypeError: n.ajax(...).success is not a function
at Object.typeHtml (sd.globalparts_1.js:1)
at HTMLDivElement.<anonymous> (sd.globalparts_1.js:1)
at Function.each (jquery.min.js:2)
at k.fn.init.each (jquery.min.js:2)
at Object.init (sd.globalparts_1.js:1)
at Object.<anonymous> (sd.init.js:1)
at Function.each (jquery.min.js:2)
at HTMLDocument.<anonymous> (sd.init.js:1)
at e (jquery.min.js:2)
at t (jquery.min.js:2)

[FKM]

回答しましたので、ご参照ください。予想通り、successメソッドはfunctionじゃないですよって怒ってますので、廃止されたメソッドを使おうとしています。

Answer 1

解決済みかもしれませんが今日日fetchの方が楽かもしれません
（古いブラウザは非対応ですが・・・）

Comments

[FKM]

そうですね、FetchAPIがあればJavaScriptだけでAjaxできるみたいですし。jQueryにしてもthen()とかありますし、知らない間にdoneとfailも過去の産物となっていて驚いた記憶があります。

まあ、”今日”という表現はちょっと悪かったとは思いますが、一番手早く修正する手段としては適切だったのかな、と思っています。

Answer 2

パッと見だけでも廃止メソッドがかなりありそうです。
success()、error()は廃止されてますね。

jQuery 3.0時代のコーディングお作法 / 廃止メソッド編

Ajax制御においても、今日ではdone()とfail()を使うのが普通なので、
success() → done()
error() → fail()
このように書き換えてもダメですか？

Comments

[Mshady]

無事こちらのやり方で動くようになりました。
ご協力こころより感謝いたします。

Answer 3

そうですね、FetchAPIがあればJavaScriptだけでAjaxできるみたいですし。jQueryにしてもthen()とかありますし、知らない間にdoneとfailも過去の産物となっていて驚いた記憶があります。

まあ、”今日”という表現はちょっと悪かったとは思いますが、一番手早く修正する手段としては適切だったのかな、と思っています。