Using java script in templates

Phoenix Forum Questions / Help
1

Here is the fetch code

var hideDelete = function(){
     let studentid    = localStorage.getItem("studentID").toString();
     let classid      = localStorage.getItem("classID").toString();
     let semesterid   = localStorage.getItem("semester").toString();
   //  let urlPath     = "/students/"+studentid+"/registrations";
     let urlPath = window.location.pathname;
     alert(urlPath);  // yields "/students/30/registrations"
     const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
     fetch(urlPath, {
        method: "DELETE",
        headers: {'Content-Type': 'application/json','X-CSRF-Token': token},
        body: {student_id: studentid, class_id: classid, semester: semesterid}
      });
     document.getElementById("deletebtn").style.visibility = 'hidden';
};
</script>

Then I get on the console this error

DELETE http://localhost:4000/students/30/registrations 400 (Bad Request)

I can’t figure out why the fetch is prefixing urlPath with “http://localhost:4000.”
Thanks,
Don

2

Hi @donwhit I’ve edited your post to use code formatting blocks ``` which help readability.

Can you show the logs that you get from this request in the phoenix server?

3

The console is showing the complete request URL which includes the host. fetch will automatically inject the current proto-host-port if it’s missing from its argument.

What are you expecting urlPath to be prefixed with?

What are your routes?

4

I was under the impression that you cannot prefix the path when using the local server.
/xxx/xxx/xx
versus
htpp://localhost:4000/xxx/xxx/xx

here are my routes
profile_path GET /profiles AuctionWeb.ProfileController :show
page_path GET / AuctionWeb.PageController :index
user_path GET /users/new AuctionWeb.UserController :new
user_path GET /users/:id AuctionWeb.UserController :show
user_path POST /users AuctionWeb.UserController :create
profile_path GET /profiles/edit AuctionWeb.ProfileController :edit
profile_path GET /profiles/new AuctionWeb.ProfileController :new
profile_path GET /profiles AuctionWeb.ProfileController :show
profile_path POST /profiles AuctionWeb.ProfileController :create
profile_path PATCH /profiles AuctionWeb.ProfileController :update
PUT /profiles AuctionWeb.ProfileController :update
profile_path DELETE /profiles AuctionWeb.ProfileController :delete
class_path GET /classes AuctionWeb.ClassController :index
class_path GET /classes/new AuctionWeb.ClassController :new
class_path GET /classes/:id AuctionWeb.ClassController :show
class_path POST /classes AuctionWeb.ClassController :create
student_path GET /students AuctionWeb.StudentController :index
student_path GET /students/:id/edit AuctionWeb.StudentController :edit
student_path GET /students/new AuctionWeb.StudentController :new
student_path GET /students/:id AuctionWeb.StudentController :show
student_path POST /students AuctionWeb.StudentController :create
student_path PATCH /students/:id AuctionWeb.StudentController :update
PUT /students/:id AuctionWeb.StudentController :update
student_path DELETE /students/:id AuctionWeb.StudentController :delete
student_registration_path GET /students/:student_id/registrations AuctionWeb.RegistrationController :index
student_registration_path GET /students/:student_id/registrations/new AuctionWeb.RegistrationController :new
student_registration_path GET /students/:student_id/registrations/:id AuctionWeb.RegistrationController :show
student_registration_path POST /students/:student_id/registrations AuctionWeb.RegistrationController :create
session_path DELETE /logout AuctionWeb.SessionController :delete
session_path GET /login AuctionWeb.SessionController :new
session_path POST /login AuctionWeb.SessionController :create
student_path GET /api/students/new AuctionWeb.StudentController :new
student_registration_path DELETE /api/students/:student_id/registrations/:id AuctionWeb.RegistrationController :delete

5

DELETE http://localhost:4000/regPath 404 (Not Found)

Response {type: ‘basic’, url: ‘http://localhost:4000/regPath’, redirected: false, status: 404, ok: false, …}

6

More info
This is the code

this is the response

Failed to load resource: the server responded with a status of 404 (Not Found)
registrations:345
Response
body: (…)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 404
statusText: “Not Found”
type: “basic”
url: “http://localhost:4000/regPath”
[[Prototype]]: Response

7

Correction to first reply:
I was under the impression that the url should be formatted this way - “localhost:4000/regPath”
and not this way “http://localhost:4000/regPath”