getResources Problem pulling same resource in model popup

Support
1

Summary

Im calling a few resources on home page. They display fine, and in order. but I want to be able to use a model popup box for each “more info” and for the image above each. The problem is that the popup keeps grabbing the information off of the first resource on every resource called. Even for other areas of website that has a getresource call for something entirely different. Popup shows that first resource info from the first getresources.

My pea brain is telling me im not doing something correctly in the model code since getresources seems to work fine.

Step to reproduce

Here is my call

[[!getResources? &parents=`197` &limit=`3` &sortdir=`ASC` &sortby=`menuindex` &includeTVs=`1` &processTVs=`1` &tvPrefix=`` &tpl=`cat_promos`]]

Here is my chunk cat_promos

						<div class="col-md-4">
							<div class="img-hover-wrap">
								<div class="img-hover-card">
									<a href="[[~[[+id]]]]"><img src="[[+image_2]]" alt="[[+pagetitle]]"></a>
									<div class="img-hover-detail center">
										<h3 class="mb-3"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h3>
										<p class="mb-3 text-black-50">[[+longtitle]]</p>
                                                                                <button class="button button-large button-border button-rounded" data-bs-toggle="modal" data-bs-target="#myModal">MORE DETAILS</button>
									</div>
								</div>
							</div>
						</div>


							<!-- Modal -->
							<div class="modal fade text-start" id="myModal" tabindex="-1" role="dialog" aria-labelledby="[[+pagetitle]]" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel">[[+pagetitle]]</h4>
											<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
										</div>
										<div class="modal-body">
                                                                                          <p> <img src="[[+image_2]]" alt="[[+pagetitle]]"></p>
											<p>[[+introtext]]</p>

										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
											<button type="button" class="btn btn-primary">Blah Blah</button>
										</div>
									</div>
								</div>
							</div>

Observed behavior

getresources pulls fine, but the model popup only grabs info from the first on the &parent. So lets say there are 3 resources shown by image TV and pagetitle, they all show fine, but the model popup only shows the pulled information from the FIRST getresource item, which should be different.

Expected behavior

I was hoping that each model would popup with the correct information from its respective resource.
Resource 1 info
Resource 2 info
Resource 3 info

Looks fine until you click and the model popup shows Resource 1 info on all of them. And in other getresource calls trying to use model.

Environment

ModX 2.6.5

I appreciate your time and patience.

2

Try making the id unique, so that it is different for every resource. Maybe by adding [[+id]].

3

I also notice while inspecting the code, it shows the resource correctly in the html. It just doesnt popup correctly. Im starting to think its a model issue?

4

thank you so much for such a quick response. I tried that early on but it wouldnt popup at all. Ill give it a go again just in case. Thanks so much!

5

By golly you are right! I only put [[+id]] in one area. Forgot to place it in BOTH areas! Works great! Thanks so much! Now I just have to try to figure out how to model the image.

Bless you and have a great day!