Canvas Support

Read more button with ajax content

9 replies · opened Dec 13, 2022

SswwammpDec 13, 2022

Hi there,
I'm looking for a solution for the Read more button - in my case, the inner content of its div is dynamically loaded by ajax after page load, and also several times when user clicks on a special button on the page (I send a post request then I load the result to the read more div).

As per your previous response to someone else (1 year ago) you mentioned that "Currently, the Read More functionality is available on Page Load, but we are working on this to make it properly scalable when changing the Screen Orientations. We will send you a notification shortly once an Update on this available."

My problem is, the bottom of Read more area (with the color masked trigger, etc) shows up at the position of initial size of div (approx 100px height), and does not get updated when the inner content is loaded (that is much longer, that's why I'd need the Read more functionality). Also, if I click on Read more, it does not open the content as it somehow cannot see that there are much more to show..

Do you have any solution for this please?
Also to check if there's any option for opening/closing Read more div by jquery?

Many Thanks
A.

SSemicolon WebSTAFFDec 14, 2022

Hello,

Thanks for your Patience!

Any chance you could provide us with a sample of the AJAX Code you are using so that we can test this on our end and provide you with a more accurate solution for this?

Additionally, currently, opening the Read More block using an external JS method is not supported but this is a very good tip and we will try integrating this in an update we are planning to release soon. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SswwammpDec 14, 2022

Hi
Thanks for reply, please find attached in the text file.
any questions pls let me know.
Thanks,
A.

SSemicolon WebSTAFFDec 16, 2022

Hello,

Thanks for your Kind Patience!

We are still looking into this and will provide you with a solution within the next 24 hours.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SswwammpDec 16, 2022

Hello there,

Thank you very much, really appreciate it!
Regards,
A.

SSemicolon WebSTAFFDec 20, 2022

Hello,

Thanks for your Super Kind Patience!

Based on your codes, updating the Read More wrapper was tricky to implement. But we have managed to fix this. Consider replacing the code inside the updateBookingSlotTable Function Block with the following:
[ch_pre type="js"]jQuery('#booking-slot-table-wrapper').load('/checkout/booking-slot-table', function(){
jQuery('#booking-slot-table-wrapper').parents('[data-readmore="true"]').css({ height: '' });
SEMICOLON.widget.readmore();
});[/ch_pre]

You will need to run the following code each time you update the booking slot wrapper:
[ch_pre type="js"]jQuery('#booking-slot-table-wrapper').parents('[data-readmore="true"]').css({ height: '' });
SEMICOLON.widget.readmore();[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SswwammpDec 20, 2022

Dear Semicolonweb,

Thank you every much for the solution and taking time for providing this excellent support (as always you do)!
It works perfectly, however there are 3 small points I'd need some help with:

  1. When Read more is closed, the visible area is too small - Could I enlarge its height somehow even with data attribs or via jquery?

  2. The booking table is quite long, that's why I needed the Read more functionality for it. When users scroll through the long table and wish to close the Read more area, it closes perfectly but it also scrolls DOWN to the bottom of the page. I'd need it to scroll up to the place where the closed Read more section is.

  3. When ajax content is reloaded via some user interactions (such as clicking on next/previous week buttons, filtering to staff, removing existing booking), upon loading, sometimes I need the Read more area to be kept opened but not closed up.
    At the moment for any action and ajax reload, Read more div always closes up. (Also to note, in other cases (when user clicks on a table td to reserve a booking slot), the current operation (closing up) is good, but with the scrolling up mentioned in no.2).

Thank you again for your professional support, I hope you could find a easy solution for these above as well.

Regards,
A.

SSemicolon WebSTAFFDec 26, 2022

Hello,

Thank You so much for your Kind Patience!

We have been working on this and based on all the results, we have noticed that this will take too many Customizations to implement with the Current Codes. We are already working on this to release it with the next version of Canvas and all your feature suggestions will be included.

Meanwhile, you can change the size of the Read More visible area by simply adding the data-readmore-size="15rem" Attribute to the Read More DIV. You can increase or decrease the size (in CSS Units) according to your requirements.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SswwammpDec 30, 2022

Hello,

Thanks for your reply, and suggestions.
I'll wait for the version 7 then for the full solution.
Thanks again,
A.

SSemicolon WebSTAFFDec 31, 2022

Hello,

Thanks for your Patience!

We have already incorporated these features in the Latest Version of Canvas which should be available by late next week or the early week after. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard