Random modal repeater items without refresh?

[Roych]

Hello,

Im creating some quotes that will open in modal box when clicked and I need them to open randomly without refreshing the whole site. Is this possible somehow?

Right now Im using this code to fetch reeater items in my modal box.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <?php
            $quotes = $pages->get(1741)->quote_repeater->find("limit=1, sort=random");          
        ?>
            <?php foreach($quotes as $quote): ?>
                <h2><?= $quote->title; ?></h2>
                <p><?= $quote->body; ?></p>    
            <?php endforeach; ?>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default inverted" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>

But now it needs a refresh to cycle through.

So what would be the best way to approach this?

Thank you

R

 

[kongondo]

If your site is not highly dynamic, then fetch all your quotes (I am assuming they are less than one hundred) once (or every now and then) and cache the results server-side. If your quotes appear on every page on your site, or most of them, you can get away with caching client-side (e.g. quotes in hidden elements) rather than making regular ajax calls. Otherwise, you'll need to fetch quotes from your cached server-side results (i.e., the quotes cached server-side) using ajax. 

Have a look at WireCache ($cache) and the links below.

https://processwire.com/blog/posts/processwire-core-updates-2.5.28/#wirecache-upgrades

 

[Roych]

thank you for answer ?  Im trying to create a button like "get a quote" so you could click on it expl: 5 times and get different quote everytime. My php is not so good so Im not realy sure where to start here.

Thank you

R

[kongondo]

42 minutes ago, Roych said:

Im not realy sure where to start here.

I'd start by reading about $cache. Try the examples at this link that I posted above especially under Cache PageArray objects. You would want the cache refreshed every time a quote page is created/edited.

Secondly, do you really need repeaters for your quotes? You could store each quote as a page under one parent.

Finally, without knowing a bit more about your template and page structure, it is hard to give more specific advice.

Edited December 30, 2018 by kongondo

[bernhard]

12 hours ago, Roych said:

Im creating some quotes

Some what? 5-10? 100s? 1000s?

12 hours ago, Roych said:

Is this possible somehow?

Yes ? But I don't get what you are trying to do exactly. Where does the user click? What should then be showed? Some quotes randomly sorted? Or one random quote of many? Please be more precise in your question - there are always many ways in ProcessWire and the best depends a lot on the scenario.

[Roych]

I have a button in header called "get a quote" , which is always seen. So when user clicks on it, one random quote opens up in modal window. I have expl. 30 quotes made in repeater. Im calling 1 random quote with the code in first post. It's working but only shows the same quote unless you refresh or go to another page in menu and then click the button again. 

I tried to look and read the links above but I have never realy worked with cache before so I don't realy understand it quite right. 

Thank you

R

[bernhard]

I'd load all quotes on page load and display one random quote via javascript. Similar to this example https://embed.plnkr.co/plunk/RHIPp8

[tpr]

Js is the way to go if you use cache as @bernhard suggested. However that will not ensure that the next random quote will be different than the previous, and with 30 items that would happen frequently. What I have done on my portfolio site is to

- load all quotes to a js array

- randomize this array

- show quotes sequentially, and restart at the end

[Roych]

Hey, All the best in 2019! ?

Thank you for answers, I will try to work something out and see what's going to come out ?

Thank you ? R

[JeevanisM]

On 12/30/2018 at 3:57 PM, Roych said:

Hello,

Im creating some quotes that will open in modal box when clicked and I need them to open randomly without refreshing the whole site. Is this possible somehow?

Right now Im using this code to fetch reeater items in my modal box.

But now it needs a refresh to cycle through.

So what would be the best way to approach this?

Thank you

R

 

Hello Roych,

I think sharing my recent experience with a website would be helpful for you, since I faced a similar scenario as yours here. For me, I have a news section in a single page website where there will be bootstrap cards holding an image of the newsitem with a readmore button, When user click on this, a bootstrap Modal Popup with show up and display the the whole news section. Now, these newsitem cards are dyanmically loading, so each Modal Popup should show dynamic content.  I will explain the steps I followed :

1. Use the Boostrap Modal Dynamic content feature  ( refer https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content )
2. see the data-*attribute of the modal window button. Refer the bootstrap documentation above, that attribute should be unique to each  Read more link. This helps us to differentiate the Modal Popup content window

3. Then, I created the Modal Popups with in the foreach loops, so that I will have N number of Modals for N number of News Items. All these Modals will have corresponding content to that each news items

4. Now, each ReadMore button will have a unique data-attribute which differentiate the modal window to a particular news card, if you click, only that content will show, and content will change you click on other cards. No page reload is required

I am sorry if I am confusing you much, the general idea is that you have to utilize the data-*attribute of the bootstrap modal. You have to provide a unique attribute to each quotes with respect to its content. You will have generate N number of Models Popups for your N Number of quotes but you will show only one Popup at a time.

 

Please check the website I have done for this feature in action : http://pkrosifoundation.org/#news