Ajax/JavaScript Help Needed (Or at least pointers)

[kitkat9933]

So I have a PHP script that generates a bunch of <div> tags with random ID attributes e.g.

<div id="#UserMoreInfo-123456-Modal">
<!-- some stuff-->
</div>
<div id="#UserMoreInfo-234567-Modal">
<!-- some stuff-->
</div>
<div id="#UserMoreInfo-345678-Modal">
<!-- some stuff-->
</div>

with these ID's based upon an ID reference within a Database. I want when a button is clicked (dynamically generated again) to refresh a specific <div> tag using an Ajax call.

Now my JS skills are pretty crap (I'm mainly backend) but I can do standard Ajax Calls. However, since the ID's are dynamically generated both on the button with the onclick() event and the <div> tags to refresh, I'm unsure on how to do this.

Is there a way to either do an Ajax call for the onclick() element and the <div> tag using variables in the name?

Or do I need to do something like dynamically generated the JS file?

Or if anybody could give me advice on how best to describe this to google it?

 

[kitkat9933]

$(document).ready(function() {
   $('.ActivateButtonClassName').click(function(){
      $('.ClassName').load('https://example.com/<element_id> .ClassName');
   });
});

I've managed to get the following but struggling to work out how to use the ID of the <div> tag selected by class into the <element_id> value.

 

[Dup]

Is there one button, or multiple buttons? Do the buttons have a class/ID that related to the DIV somehow?

If I'm following correcly, you can do as below:

https://jsfiddle.net/nk36dfzy/

This will intercept the click for any button with the class that contains "-Button" inside it. It then takes this class, splits it into an array of parts based on the dashes and then spits out the unique ID number.

I'm not sure what you're doing with the classes or IDs from this point, seems over complicated, but the fiddle shows building the URL from what I have gleended from the botton click and my assumptions on what the other IDs and classes may be. Hopefully that helps somewhat.

 

[kitkat9933]

Multiple buttons that all have a class relating to the class of the modal. What you sent seems to be what I need. Essentially, I have a list of users dyamically pulled from a database depending on some criteria. I then have a modal that pulls a dataset for that user that then can be edited.

As the API calls are dreadfully slow, I want to pull the modal content using Ajax depending on which user is clicked.

 

[touch]

Do you need a modal window for each user? (if you can open more than one window at a time, yes. otherwise, no)

You might get away with just 1 modal window. Use the id from the button to populate the right data into the window (you'll need to do this anyway) then overwrite it with new data when you click the button on another user.

 

[kitkat9933]

Do you need a modal window for each user? (if you can open more than one window at a time, yes. otherwise, no)

You might get away with just 1 modal window. Use the id from the button to populate the right data into the window (you'll need to do this anyway) then overwrite it with new data when you click the button on another user.

I might be able to, but the main dataset is populated via PHP, so being able populate dynamic PHP data into a single modal based on a click is a bit beyond my capabilities.

 

[Dup]

All you would do is get the ID from the button like I have shown, pass that ID to the AJAX call URL (IE: query.php?id=****) that will then fire off the PHP/database query for that ID then load the result into the one modal.

I'll try mock up a demo later this evening.

 

[kitkat9933]

All you would do is get the ID from the button like I have shown, pass that ID to the AJAX call URL (IE: query.php?id=****) that will then fire off the PHP/database query for that ID then load the result into the one modal.

I'll try mock up a demo later this evening.

That would be amazing if you could. I've been forced to do some JS work on a project that isn't my forte.