<div class="image-550">
<img loading="lazy" src="https://cdn.kahimyang.com/resources/jqm.png"  
 alt="Using Masonry in jQueryMobile with JSF 2 and Ajax" />
</div>

<p>
As a demo please check out our <a href="https://kahimyang.com/kauswagan/Gallery.xhtml" class="news_link" data-role="none" target="_blank" 

title="Demo">Gallery page</a>, it employs the same code as described here.  
</p>
<h3>
The JSF/JQM Page
</h3>
<p>
To begin, here is our JSF page with JQM  and Masonry layout fetching content from a server.  You should already be familiar with &lt;ui:repeat />, if 

not please refer to your JSF documentation on how they work and how to use them.  The <i>"masonry-box"</i> is our Masonry item selector and 

<i>"masonry-block"</i> is our container.  See JS snippet farther down.
</p>

<p>
<pre class="brush:xml" title="Listing 1">
&lt;div id="masonry-block">
    &lt;ui:repeat value="#{galleryBean.gallery}" var="gal">
        &lt;div class="masonry-box">
             &lt;div class="masonry-item ui-body ui-body-a ui-content ui-shadow">
                &lt;div>                                                     					
                    &lt;!-- Contents -->                                
                &lt;/div>
            &lt;/div>
         &lt;/div>                        
    &lt;/ui:repeat>
&lt;/div>
</pre>
</p>


<h3>
The CSS
</h3>

<p>
This page layout targets 3 broad screen sizes.  Narrow down ranges/sizes and/or more media queries if targetting specific screen sizes.
</p>

<p>
<pre class="brush:css" title="Listing 2">
@media all and (max-width:35.49em) {
   #masonry-block .masonry-box {width: 100.0%;}
   .masonry-item {margin:0 15px 20px 2px;}
   // rest of the styles corresponding to this screen size.
}

@media all and (min-width: 35.5em ) and (max-width:63.95em) {
   #masonry-block .masonry-box {width: 50%;}
    .masonry-item {margin:0 15px 20px 2px;}
   // rest of the styles
}

@media all and (min-width: 64.0em )  {
   #masonry-block .masonry-box {width: 33.3%;}
   .masonry-item {margin:0 20px 20px 2px;} 
   // rest of the styles
}
</pre>
</p>

<h3>
The JavaScript
</h3>
<p>
The <i>"pagecreate"</i> event of JQM below, is similar to the ready event of jQuery.  It is here where we create our Masonry object.   Here we choose 

not to layout Masonry items after initialization <i>(isInitLayout: false)</i> to enable us to do extra task before we actually layout our grid.  Note 

that in some cases,  plugins like, sliders, carousels, etc, may not work with <i>"pagecreate"</i>.  If you have those in your page,  you may have to 

bind to other events like <i>"pagecontainershow"</i> for example.  Please check the docs for more JQM events availble for use in a given situation.
</p>

<p>
<pre class="brush:xml" title="Listing 3">
&lt;script>
    $(document).on( "pagecreate", "#main", function(event ) {  

       var $container = $("#masonry-block");  
                                                      
       $container.imagesLoaded(function () {                                                           
           $container.masonry({
               isInitLayout: false,                     
               itemSelector: ".masonry-box",                     
               transitionDuration:"0.8s"
           });

           // Do something before actual layout.
                    
           $container.data("masonry").layout();                                                
                                                                   
   });                                                          
&lt;/script>
</pre>
</p>

<h3>
Appending new Masonry items with JSF &lt;f:ajax /> requests
</h3>
<p>
The code snippet that follows uses a button to prompt users to fetch new data.  It is through this button that Ajax request is accomplished and new data 

is appended to our Masonry block.   Our page from Listing 1 becomes like below:
</p>


<p>
<pre class="brush:xml;highlight:[13,23,24,25,26,27]" title="Listing 4">
&lt;div id="masonry-block">
    &lt;ui:repeat value="#{galleryBean.gallery}" var="gal">
        &lt;div class="masonry-box">
             &lt;div class="masonry-item ui-body ui-body-a ui-content ui-shadow">
                &lt;div>                                                     					
                     &lt;!-- Contents -->                                
                &lt;/div>
            &lt;/div>
         &lt;/div>                        
    &lt;/ui:repeat>
&lt;/div>

&lt;h:inputHidden id="nextPages" value="#{galleryBean.newData}" /> 

&lt;div  id="nextpagebwrapper">
     &lt;h:form prependId="false" >
           &lt;button id="nextpageb"                   
               data-icon="carat-r"
               data-iconpos="right"
               class="ui-nodisc-icon"
               data-theme="b" type="button">
            &lt;span>Show more records&lt;/span>
            &lt;f:ajax render="nextPages" 
               event="click"
               listener="#{monthHistory.handleEvent}"
               onerror="function(data) { myajaxerror(data)}"
               onevent="function(data) { layoutAgain(data)}"/>                                
           &lt;/button>
    &lt;/h:form>
&lt;/div>
</pre>    
</p>

<p>
&lt;h:inputHidden /> above  holds the data returned from the server as &lt;f:ajax /> succeeds.  This is the source of data of our new items for our 

Masonry.  This data is formatted from the server to correspond to our Masonry item selector,  identical in format to the &lt;div /> blocks contained in the &lt;ui:repeat /> in Listing 1.     

 This is emptied by our JavaScript code before a new &lt;f:ajax /> request is made.
</p>
<p>
We used &lt;button /> but &lt;h:commandButton /> may be used if preferred just style them as desired.  Use JSF passthrough and/or JQM ui classes for 

visual consistency with other JQM components in the page. 
</p>


<h3>
The Javascript
</h3>
<p>
In addition to creating our Masonry, we now have functions that are called by &lt;f:ajax /> in Listing 4.  Our timoeut of 1 second is just to make sure 

data is updated completely before accessing them.
</p>

<p>
<pre class="brush:xml;highlight:[36,41,42,43,44,49]" title="Listing 5">
&lt;script>
    $(document).on( "pagecreate", "#main", function(event ) {  

       var $container = $("#masonry-block");    
                                                    
       $container.imagesLoaded(function () {                                                           
           $container.masonry({
               isInitLayout: false,                     
               itemSelector: ".masonry-box",                     
               transitionDuration:"0.8s"
           });

           // Do something before actual layout.
                    
           $container.data("masonry").layout();                                                
                                                                   
   });                                                          


   function layoutAgain (data) {
     if (data.status === "begin") {                        
         ajaxRequestStart();
     }
     else if (data.status === "success") {                   
         ajaxRequestSuccess();
     }   
   }

   function ajaxRequestStart () {
       $.mobile.loading("show"); 
       $("#nextPages").val("");                
   }
            
   function ajaxRequestSuccess() {
       setTimeout(function () {
       var html = $("#nextPages").val(); 
       if (html.length === 0) {
          $("#nextpageb").hide();         
        }
        else {
           html = $(html);                     
           $container.append(html).imagesLoaded(function(){                                                   
               $container.masonry( "appended", html, true );                           
           }); 
       }

       $.mobile.loading("hide"); 
                                                         
      }, 1000);                       
    }

   // open and close a basic JQM popup to inform user of the error                                               
   function myajaxerror(data) {
      $( "#ajaxerrorpopup" ).popup( "open" );  
      setTimeout(function () {
         $("#ajaxerrorpopup").popup ("close");
      },3500);                 
   }

&lt;/script>
</pre>
</p>
<p>
It is in line 36 above where we access data of &lt;h:inputHidden id="nextPages" /> for the consumption by Masonry <i>"appended"</i> method.  See 

highlighted block above.
</p>


<h3>
The JSF Backing bean
</h3>

<p>
Our backing bean assumes we are fecthing data from MySQL data source.  Please refer to inline comments for description.
</p>
<p>
<pre class="brush:java;highlight:[60,61,62]" title="Listing 6">
@ManagedBean
@ViewScoped
public class GalleryBean {
    public GalleryBean() {
    }

    int dataStart, dataCount;
    StringBuilder htmlData, oldHtmlData;
    List&lt;Gallery> gallery;
    String newData;

    @PostConstruct
    public void init() {
       dataStart=dataCount=10;
       fetchInitialData ();
    }

    private void fetchInitialData () {

        // When quering sql data use limit clause using 0 start and dataCount and the count
        // example select * from datasource where .... limit 0, dataCount 
        // and then update startData;
        
        // Also populate gallery object with Gallery objects      
  
        startData += dataCount;
    }

    private void loadMore () {
        // When quering sql data use limit clause using startData and dataCount
        // example select * from datasource where .... limit dataStart, dataCount
        // 
        // Build htmlData using html structure that would end up
        // like the initial data in &lt;ui:repeat />

        // increment dataStart,  update flag that would tell us there is
        // no more data to fetch

        startData += dataCount;

        if (!htmlData.equals (oldHtmlData) {
            oldHtmlData = htmlData;
            newData = htmlData.toString ();
        }
        else {
            // No more data to fetch based on a given SQL query
            // condition.   
            newData ="";
        }
    }

    List&lt;Gallery>getGellery () {
         // this populates &lt;ui:repeat /> using ArrayList of Gallery object 
         // in Listing 1 which become Listing 4

         return gallery;
    }

    // This is called by our &lt;f:ajax />
    public void handleEvent(AjaxBehaviorEvent event) {
        loadMore ();
    }

    // This populates our &lt;h:inputHidden id="nextPages" /> which is
    // updated when ajax requests succeeds.  This is the data we append to our
    // Masonry instance.
    public String getNewData () {
        return newData;
    }

   
    public static class Gallery {
          // Members correspond to items in our initial &lt;ui:repeat /> layout. 
          // Getters and setters too.
    }
}
</pre>
</p>


<p>
That's it, good luck.
</p>


How to use and append data to Masonry in responsive jQueryMobile with JSF 2 and ajax