Skip Navigation

[Resolved] How to display dynamic results in a lightbox rather than a separate page

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 3 replies, has 2 voices.

Last updated by Christopher Amirian 1 year, 9 months ago.

Assisted by: Christopher Amirian.

Author
Posts
#2597119

Tell us what you are trying to do? The items on this page: hidden link. can each be clicked. This opens up a page containing item details. I would like to display these results in a lightbox on the same page, rather than opening each one in a separate page.

While I can understand how to do this with separate pages, how do I go about updating the contents of the light box for the clicked product without reloading the page? I realize that I could create all of the product divs as individual light boxes and then alter visibility on click, but I am worried about the size of this page. What I don't know how to do is make an AJAX request for the light box contents so that I update a single light box without reloading the page.

#2597219

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

Toolset does not have any tools to be able to do such a thing. The Ajax calls are for the filters in the custom search but not for handling the actual content of the items as it is the default nature of WordPress to have an archive > single page workflow.

I checked the single pages and I see that the amount data is not much bigger than the excerpt that you show in the list page.

That is why I do not think that it will be a huge burden to load the content itself to the card and hide them.

After that you can manually code a Javascript code or use a third-party plugin to show the content upon clicking the card.

I think it will be too complicated to involve another Ajax call to bring data on each click on a card as you will need to handle the request by your custom code and consider the Ajax changes that Toolset does when you change the filter.

Please consider that Toolset REPLACES the whole listing content when a filter is changed with the new content in an Ajax call, so all your previously add content via your Ajaxcode will be gone and it will be a huge headache to handle such scenarios.

But if you add the content inside the card by default, even if Toolset replaces the content it will still contain the portion of content you need.

Thanks.

#2597435

I can just create a hidden div for each card, formatted as a popup or light box, and toggle visibility for each clicked card image. Do you know if I will run into any problems with this arrangement due to pagination?

I am guessing it will operate just like the visible content, so I don't expect any problems. I just need to make sure each light box div has appropriate CSS to appear centered on the screen and above other content.

#2598477

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

I also do not think it will have any issues, the only point that you need to take into consideration is the selector which you use to reveal the content in Javascript.

If you use jQuery please follow this method for translation:

https://stackoverflow.com/questions/21664212/jquery-selector-not-finding-elements-when-it-loaded-by-ajax

hidden link

hidden link

Thanks.