1

I'm having a bit of trouble trying to create multiple different objects on the page that will all send a get request to the same url but with different parameters in the request. The server should return a page but with different data based on which object was clicked to make the request. It's kind of like a profile picker in a way. Like if I click on person 1's picture it brings me to their profile page but if I click on person 2's picture it brings me to person 2's profile page.

Each person has a unique Id associated with their profile in my database which I have access to on within my client side javascript. I want to include that Id as part of my request to the server when person x's profile picture is clicked.

Below is the client side code I have so far. 

//Create row element to be appended to the body
        var newRow = document.createElement("div");
        newRow.className = "row";

        //Iterate through the returned array of JSON objects
        for (i = 0; i < response.length; i++)
        {
        //Create new columns to be appended to the row
          var newCol = document.createElement("div");
          newCol.className = "col-lg-4 col-sm-6 text-center mb-4";

          //Create new image object from data in response
          var image = new Image();
          image.src = '/uploads/' + response[i].pic;
          image.className = "rounded-circle d-block mx-auto patient-img";

          var patId = response[i].Id

          //Create new anchor object
          var link = document.createElement("a");
          link.href = 'javascript:loadProfile()'; //When clicked will call function that sends get request to /profile

          link.appendChild(image);

          newCol.appendChild(link);    

          //Get patient name from response
          var patName = document.createElement("h3");

          patName.innerHTML = response[i].name;

          newCol.appendChild(patName);

          //Append the full column to the row
          newRow.appendChild(newCol);
        }

I want to include the person's Id as part of my call to loadProfile() but I'm not sure how to. Should I maybe try just appending the persons Id to the href of the anchor object and make a get request like that? I'm using express.js for the web server, jquery to make the client side requests, and mongoDB as my database. Any help or advice would be greatly appreciated!!

Artyom Neustroev
  • 8,627
  • 5
  • 33
  • 57
Ryan O'Shea
  • 67
  • 1
  • 4

2 Answers2

2

If I understood your question correctly, you are trying to bind event handlers to the links. Here's the DOM API you should use for that EventTarget.addEventListener - instead of assigning link.href = 'javascript:...'.

You should also be mindful of creating such functions within a loop

Overall you should have something like this:

function loadProfile(id) {
  return function() {
    /// do logic for fetching webserver here
  }
}

for (var i = 0; i < response.length; i++) {
  /// other code
  var link = document.createElement("a");
  link.addEventListener('click', loadProfile(response[i].Id));
}

Note that loadProfile function is now a higher-order function.

Artyom Neustroev
  • 8,627
  • 5
  • 33
  • 57
  • Worked perfectly thank you so much!! Why was it necessary to return the request to the webserver as a function instead of just calling normally within loadProfile()? – Ryan O'Shea Jan 09 '19 at 06:05
  • @RyanO'Shea Take a look at the signature of `addEventListener` - it accepts a _function_ as it's second argument. So if you'll call the webserver normally inside `loadProfile` here, the code will be executed immediately (because `loadProfile()` is called in the link creation loop) as opposed to being a callback upon a link click. Hope it makes sense! – Artyom Neustroev Jan 12 '19 at 21:44
1

One of the possible solutions in your case (as you mentioned) would be to pass the id to the loadProfile method. Something like:

link.href = 'javascript:loadProfile(' + var_with_id ')'; // where var_with_id is the id that you want to pass

and then change the loadProfile function to get the param and use it (we'd need to see that function too to help more):

function loadProfile() { // or similar

to

function loadProfile(id) { // or similar, and then use id in the code

However, this doesn't seem like a good way to do it, a better way would be to bind a click event handler (since you mentioned using jQuery already).

Also, you can use jQuery to create the elements instead of the old-fashioned vanilla way.

DarkyAngel
  • 21
  • 1