How to use a single modal to display separate slideshows on same page?

[gerard]

I have four separate slideshows from different sections on the same page, which i wish to display in a single modal.

have done something similar in another project two years ago, but cannot get it to work in Wappler… although the previous project was not loading slideshows, – just separate product shots with accompanying description text.

in a nutshell, these are the steps that i follow:

1. place the code for the bootstrap modal with an ID at the beginning of the body tag.

2. in the modal code, set up either the ‘modal-content’ or the ‘modal-body’ DIVs with placeholder text that needs to be replaced when the new event is fired.

3. set up separate html files for each slideshow in a div targeting the ‘replace content’ div. in the same modal… triggered by the button code:

Photos

4. and this is the javascript code i have placed just before the end of the body tag:

   …

also tried some other javascript code:

… without any success what am i overlooking?

any assistance will be sincerely appreciated.

[gerard]

noticed the code i posted got swallowed in the message.

fair enough… could pose a security risk, i gather.

so, let me try this again (without the actual code).

instead of having the code for all the four modals on the same page, can i have each slideshow in separate remote.htm files that will replace the content div in the single modal on the current page, depending on which button has triggered the modal?

wait in hope for a solution from this knowledgeable community.

[George]

@gerard

noticed the code i posted got swallowed in the message.

You can just use 3 backtics for start and end to indicate code block

[TomD]

I expect there are various ways to do this. Using Wappler (ie without any extra Javascript), you could create a variable and then create multiple modal bodies, each with a display condition, depending on this variable,eg:
dmx-show="var1.value == 1"
You could set the variable as one of the dynamic events attached to the buttons displaying the different modal content.

I think this would be quite straightforward, but I would be interested to hear of alternative approaches.

What I’m not sure about (and would be very interested to know) is if the data in non-displayed divs is processed. Eg supposing the content of the each modal contains the results of different action files, are all the queries processed, even though the data from only one is displayed? If so (and I imagine this might be the case), this method is probably not very efficient.

[psweb]

Like your solution @TomD, just do not like the idea of having a single modal called in dynamically to be honest.
I stand to be corrected but my modals have all their content indexed in the SERPS because there is no dynamic data that the spider needs to parse.
I also do not really see the reason for a single modal.
The webpage to the user will see no UX advantage. 4 modals fire from 4 buttons. Having a single modal still needs to be fired by 4 different buttons. @gerard is there a reason you need to do it in this way.

I have a rather large site that relies very heavily on modals. I have placed every modal with the element to fire the modal in different include files so it is easier to maintain the code. Would that not work for your needs.

[TomD]

I can imagine a situation where you might want to use a single modal for multiple purposes. Supposing it was quite an intricate modal - perhaps with a series of buttons in the footer, linked to a series of dynamic events, where only the content was dynamic; it would be more efficient (and DRYer) to have single modal.

[Teodor]

Hi Tom,

@TomD

What I’m not sure about (and would be very interested to know) is if the data in non-displayed divs is processed. Eg supposing the content of the each modal contains the results of different action files, are all the queries processed, even though the data from only one is displayed? If so (and I imagine this might be the case), this method is probably not very efficient.

You can actually build your server action in a way that it only loads the query you need. So with one modal, with one slideshow inside, you can load different queries depending on the variable value.

In server action use the condition step like:

• database connection
• condition (get.var value == 1)
  • load query 1
• condition (get.var value == 2)
  • load query 2
• condition (get.var value == 99)
  • load query 99

On the page, bind the page variable value as get variable value.
Change the variable value using the dynamic events and when the server action runs, it will only load the query you need

[psweb]

I suppose you are right @TomD, I think because my core business is SEO, that is just something I would avoid doing.
In the same site i mentioned above, some of the modals are quite complex, ie: in the head section I have a slideshow. In the body I have tabs that take you to different sections of text and images and one even houses a form and a map on the last tab, another tab has an accordion within it, and the footer of the tab has video quite often, with a custom video player.
The only real thing I have avoided is opening another modal from a modal without first closing the initial one.

Anyway his question is not really should he do it but rather how does it get done. Sorry I did possibly stray a little off topic with my answer.

[psweb]

@George

You can just use 3 backtics for start and end to indicate code block

Thats going to save me hours upon hours

THANKS

[gerard]

thanks, George. will keep this in mind.

[gerard]

@psweb

@gerard is there a reason you need to do it in this way.

thanks for replying @psweb.

no other reason than what i mentioned in my first submission...

@gerard

have done something similar in another project two years ago, but cannot get it to work in Wappler… although the previous project was not loading slideshows, – just separate product shots with accompanying description text.

... and i did not use any server action... just some javascript code that cleared the content in the modal on exit.

@Teodor

You can actually build your server action in a way that it only loads the query you need. So with one modal, with one slideshow inside, you can load different queries depending on the variable value.

In server action use the condition step like:

• database connection
• condition (get.var value == 1)
  • load query 1
• condition (get.var value == 2)
  • load query 2
• condition (get.var value == 99)
  • load query 99

On the page, bind the page variable value as get variable value.
Change the variable value using the dynamic events and when the server action runs, it will only load the query you need

thanks for replying, @Teodor.

am still wet behind the ears when it comes to server actions... being more a front-end designer, but will give your suggestion a shot.

cheers!

[gerard]

cannot access Database connections and server actions using my Basic Educational license, i just realized.

so… getting back to the code that actually worked on my previous project done in Dreamweaver.

this is the code i wrap around my button element that triggers the particular slideshow:

<a data-toggle="modal" class="btn btn-primary btn-sm" data-target="#myModal" href="luna.htm">Photos</a>

where luna.htm is one such remote file with the slideshow that i want loaded in this instance of the modal.

… and the javascript that enables this switch:

<script type="text/javascript"> 
$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});
</script> 

… with no success.

what am i doing wrong?