Canvas Support

How to work masonry grid when call AJAX.

6 replies · opened Dec 15, 2020

LLee Byoung ChulDec 15, 2020

Hello, Team.
My company is developing a PHP solution with your portfolio widget containing a class 'grid-container' in environment calling AJAX based on PHP or Livewire of Laravel, I hope you know Livewire.

My issue in below link, when load a web page first time, the page including portfolio widget containing 'grid-container' class.
Masonry grid in the page works correctly.

but, when I call ajax or livewire in the page, I have to call the function again to work grid-container class.
But I don't know which function makes to work grid-container class.

Please let me know which function or java-script code in your function.js should I call to work grid-container( to make masonry work ).
thanks.

How to check that does not work masonry.

  1. Load below link
    : does works masonry grid correctly and animation effect when mouse hover card !
  2. click category 2
    : no results in the page.
  3. click All link
    : does not work masonry grid and hover animation effect

Please let me know if there is not enough explanation.

SSemicolon WebSTAFFDec 15, 2020

Hello,

We have tried checking out your Website but it returns a System Error. Please provide us with a Valid Live URL and we will definitely try looking into this.

Additionally, regarding the JS, since Canvas is not readily compatible with Livewire, you will need to reinitialize the JS Functions.

In regards to the .grid-container Element, you can call this Function: SEMICOLON.widget.gridInit(); after adding the Items. Also, you can call this Function on the Specific Grid Container (if there are many on the Page) by calling this Function: SEMICOLON.widget.gridInit({ el: $('#portfolio') });.

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.

SSemicolon WebSTAFFDec 17, 2020

Hello,

We have checked out your Website and there are some issues:

  1. On Clicking Category 2, there are no items in the Masonry Grid. So this appears to be a Backend Error.

  2. On Clicking the All Link, the Items appear but the Grid is not initialized. You will need to run the following codes:
    [ch_pre]SEMICOLON.widget.gridInit();
    SEMICOLON.widget.hoverAnimation();[/ch_pre]

on successful AJAX Callback. We tried running this through the Browser's Developer Console and it works fine.

  1. We Clicked Page 2 just for checking and the Masonry Grid is not properly aligned. To dig deeper, we checked the Grid Codes and they are incorrect. You are using the .grid-* Class for the Items but you should be using .col-* Class. Check the attached screenshot.

Hope this Helps!

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

LLee Byoung ChulDec 19, 2020

Thanks for your proactive support.

As your guide number 1,2 . I solved my issue.

but now I know that an error occurs when you click on page 2 after your number 3 guide.

do you mean should I change grid-sm-3 grid-md-4 to col-sm-3 col-md-4 ?

I tried this but does not work.

Please

SSemicolon WebSTAFFDec 20, 2020

Hello,

Very Happy to Help!

We have tried adding the .col-* Codes using the Browser's Inspect Element and this solves the issue for us. Please replace all the .grid- Class with .col- as shown in the attached image and then update the Codes online, so that we can look into it realtime and provide you with further assistance. 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