XMLhttpRequestでsendするとエラーが発生する

Question

#解決したい課題について
現在、投稿にタグをつける際のインクリメンタルサーチ機能を実装しています。
新規投稿ページではうまく行きますが、同じJSファイルを編集ページにも適用すると、XML.send();の部分でエラーが発生してしまいます。
エラーの原因と解消をしたいです。よろしくお願いします

エラー内容

ptag.js:16 GET http://localhost:3000/practices/3/ptaglist/?keyword=%E3%81%A0 404 (Not Found)

#試したこと
・新規投稿ページのとの差異を確認しました。→JSファイルに影響しそうなところはありませんでした。
・debuggerで逐一の挙動を確認しましたが、新規投稿ページの場合と変わりはありませんでした。

#コード
new.html.erb

<div class="form-group">
   <label>タグ</label>
   <%= f.text_field :name, placeholder:",で区切ってください",class: "form-control" %>
</div>

<div id="search-result"></div>

edit.html.erb

<div class="form-group">
   <label>タグ</label>
   <%= f.text_field :name, placeholder:",で区切ってください",class: "form-control" %>
</div>

<div id="search-result"></div>

tweets_controllers.rb

def new
  @tweet=TweetsPtag.new
end

def edit   
  @tweets_ptag=TweetsPtag.new(title:@tweet.title,content:@tweet.content)
end


def ptaglist
  return nil if params[:keyword] == ""
  ptag = Ptag.where(['name LIKE ?', "%#{params[:keyword]}%"] )
  render json:{ keyword: ptag }
end

ptag.js

if (location.pathname.match("/new")||location.pathname.match("/edit")/*||location.pathname.match("practices")*/){
  document.addEventListener("DOMContentLoaded", () => {
    const inputElement = document.getElementById("practices_ptag_name");
    inputElement.addEventListener("keyup", () => {
      let keyword = document.getElementById("practices_ptag_name").value;
      console.log(keyword);

      if(keyword.includes(',')){
        keyword=keyword.substring(keyword.lastIndexOf(',')+1,keyword.length-1);
        console.log(keyword);
      }

      const XHR = new XMLHttpRequest();
      XHR.open("GET", `ptaglist/?keyword=${keyword}`, true);
      XHR.responseType = "json";
      XHR.send();  ################################ここでエラー発生！！！！！！！！！！！！！！！！！！！！！！！
      console.log(XHR.readyState);
      XHR.onload=()=>{
        const searchResult = document.getElementById("search-result");
        searchResult.innerHTML = "";
        if (XHR.response) {
          const tagName = XHR.response.keyword;
          tagName.forEach((ptag) => {
            const childElement = document.createElement("div");
            childElement.setAttribute("class", "child");
            childElement.setAttribute("id", ptag.id);
            childElement.innerHTML = ptag.name;
            searchResult.appendChild(childElement);
            const clickElement = document.getElementById(ptag.id);
  
            clickElement.addEventListener("click", () => {
              let tagForm= document.getElementById("practices_ptag_name") ;
              tagForm.value=tagForm.value.substring(tagForm.value.lastIndexOf(",")+1,tagForm.value.lastIndexOf(",")-tagForm.length);
              tagForm.value=tagForm.value.concat(clickElement.innerText);
              console.log(clickElement.innerText);
              console.log(`tagForm=${tagForm.value+clickElement.innerText}`);
              clickElement.remove();
            });
          });
        };
      };
    });
  });
};

Answer 1

XHR.open("GET", `ptaglist/?keyword=${keyword}`, true);

送信先が相対パスとなっていますが、それで間違いないのでしょうか。エラーメッセージの通りのパスに送信されています。

Comments

[Tochikawa7]

原因はおっしゃる通りでした！！！
ありがとうございます！！