Hey folks. I'm struggling with the issue of how to get access to data (a UserID) passed into a Bootstrap 4 modal using a jquery script. Passing the data (ie UserID) from a link in our CF application to a bootstrap modal is easy enough (examples here: https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal). But, then I want to use the UserID passed into the modal to query the DB for a name and an expiration date based on that UserID. I've done quite a bit of searching and I can't seem to find an example (although some have mentioned an AJAX post and callback, but without details). Hopefully there is an easy way. Any brilliant ideas from the big brains here would be much appreciated!

on change of you userID, make an ajax call back to yourself to query? can't really tell what you are having trouble with by the description.

As far as a i know a bootstrap modal is really just a piece of your webpage that is already loaded just not shown that is shown at call time. So you are going to want to use Ajax modernly would be using fetch to get the data you want and then update the content of the modal or webpage with the new content you want to utilize... Here is the documentation on fetch: https://developer.mozilla.org/en-US/docs/Web/API/fetch

@Matt Jones @Michael Schmidt Thanks for the response! I'm just trying to populate the existing name and expiration date into the modal form. I was thinking that I could pass in the userid and then use that to get and display the name and exp date. Are you thinking that is not doable?

oh it is doable, everything is doable... you just need to use your fetch request to get the data most likely as a JSON object normally i would have such a method that would return

{
  "displayName": "Johnny Bravo", 
  "expirationDate":'8/27/2004", 
  "id": 100
  }

then on success of the fetch update your fields on your dialog form like you would on any element on a page....

function getUserInfo(UserID) 
{
var formData = new FormData();
formData.append("UserID", UserID);
var url = "<https://example.com/userInfo/>";
fetch(url, {"method": "post", body: formData } )
  .then(response=> response.json())
  .then(result => 
     { 
        document.querySelector("displayName").value = result.displayName; 
        document.querySelector("expirationDate").value = result.expirationDate;
     }
    );
}

@Michael Schmidt Thanks very much! That's a stretch for my limited programming skills, but it could be a good learning opportunity. Dumb question - would those scripts most likely go on the same page as the modal? Or in a separate cfc that gets called for this purpose? Or are both equally ok?

This is javascript the function is and it would go in a javascript file... it would call the CFC or whatever that would be the url path that you pass the UserId to...

ok, so put that in a separate js file and then call/include it from the page with the modal, it sounds like.