php - How to avoid double render when using jPList -
i'm using jplist jquery plugin add pagination , filtering hotel-listing page written in php. can see example here.
at moment, use loop in php create list div, , list-item divs within it.
it works ok, except that, initially, php page loads , displays hotels (not first page) before jplist kicks in , replaces paginated list of (in case) 50 hotels.
i've looked @ various data-source options, i'm not sure which, if choose and, if do, if solve problem.
what best way avoid double render?
here's code:
javascript:
<script> $('document').ready(function(){ /** * user defined functions */ jquery.fn.jplist.settings = { /** * stars: jquery ui range slider */ starsslider: function ($slider, $prev, $next){ $slider.slider({ min: 0 , max: 5 , range: true , values: [0, 5] , slide: function (event, ui) { $prev.text('stars: ' + ui.values[0]); $next.text(ui.values[1]); } }); } /** * stars: jquery ui set values */ ,starsvalues: function ($slider, $prev, $next){ $prev.text('stars: ' + $slider.slider('values', 0)); $next.text($slider.slider('values', 1)); } /** * rating: jquery ui range slider */ ,ratingslider: function ($slider, $prev, $next){ $slider.slider({ min: 0 , max: 10 , range: true , values: [0, 10] , slide: function (event, ui) { $prev.text('rating: ' + ui.values[0]); $next.text(ui.values[1]); } }); } /** * rating: jquery ui set values */ ,ratingvalues: function ($slider, $prev, $next){ $prev.text('rating: ' + $slider.slider('values', 0)); $next.text($slider.slider('values', 1)); } }; //check jplist javascript options $('#demo').jplist({ itemsbox: '.list' ,itempath: '.list-item' ,panelpath: '.jplist-panel' }); }); </script> html/php:
<!-- demo --> <div id="demo"> <!-- panel --> <div class="jplist-panel" style="display:inline-block;width:100%;"> <!-- ios button: show/hide panel --> <div class="jplist-ios-button"> <i class="fa fa-sort"></i> jplist actions </div> <!-- reset button --> <button type="button" class="jplist-reset-btn" data-control-type="reset" data-control-name="reset" data-control-action="reset"> reset <i class="fa fa-share"></i> </button> <!-- stars range slider --> <div class="jplist-range-slider" data-control-type="range-slider" data-control-name="range-slider-stars" data-control-action="filter" data-path=".data_stars" data-slider-func="starsslider" data-setvalues-func="starsvalues"> <div class="value" data-type="prev-value"></div> <div class="ui-slider" data-type="ui-slider"></div> <div class="value" data-type="next-value"></div> </div> <!-- rating range slider --> <div class="jplist-range-slider" data-control-type="range-slider" data-control-name="range-slider-rating" data-control-action="filter" data-path=".data_rating" data-slider-func="ratingslider" data-setvalues-func="ratingvalues"> <div class="value" data-type="prev-value"></div> <div class="ui-slider" data-type="ui-slider"></div> <div class="value" data-type="next-value"></div> </div> <!-- neighbourhood filter dropdown control --> <div class="jplist-drop-down" data-control-type="filter-drop-down" data-control-name="area-filter" data-control-action="filter"> <ul style="width:20rem;list-style:none;"> <li><span data-path="default">neighbourhood</span></li> <?php // list of neighbourhoods (for filter) while($row_neighbourhoods = $stmt_neighbourhoods->fetch()) { $area_id = $row_neighbourhoods['area']; if (! $area_id==0){ $area_name = $row_neighbourhoods['area_name']; echo '<li><span data-path=".data-area_'.$area_id.'">'.$area_name.'</span></li>'; } } ?> </ul> </div> <!-- chain filter dropdown control --> <div class="jplist-drop-down" data-control-type="filter-drop-down" data-control-name="chain-filter" data-control-action="filter"> <ul style="width:20rem;list-style:none;"> <li><span data-path="default">chain</span></li> <?php // list of chains (for filter) while($row_chains = $stmt_chains->fetch()) { $chain_id = $row_chains['chain']; $chain_name = $row_chains['chain_name']; echo '<li><span data-path=".data-chain_'.$chain_id.'">'.$chain_name.'</span></li>'; } ?> </ul> </div> <!-- sort select control --> <select class="jplist-select" data-control-type="sort-select" data-control-name="sort" data-control-action="sort"> <option data-path="default">sort by</option> <option data-path=".price" data-order="asc" data-type="number">price asc</option> <option data-path=".price" data-order="desc" data-type="number">price desc</option> </select> <br /><br /> <!-- items per page dropdown --> <div class="jplist-drop-down" data-control-type="items-per-page-drop-down" data-control-name="paging" data-control-action="paging"> <ul style="list-style:none;"> <li><span data-number="10"> 10 per page </span></li> <li><span data-number="20"> 20 per page </span></li> <li><span data-number="50" data-default="true"> 50 per page </span></li> <li><span data-number="100"> 100 per page </span></li> <li><span data-number="200"> 200 per page </span></li> <li><span data-number="500"> 500 per page </span></li> <li><span data-number="all"> view </span></li> </ul> </div> <!-- pagination results control --> <div class="jplist-label" data-type="page {current} of {pages}" data-control-type="pagination-info" data-control-name="paging" data-control-action="paging"> </div> <!-- pagination control --> <div class="jplist-pagination" data-control-type="pagination" data-control-name="paging" data-control-action="paging"> </div> </div><!-- panel --> <br /><br /> <div class="list"> <?php // retrieve geo_area session $geo_area=$_session['geo_area']; while($row = $stmt->fetch()) { // hotel's area, if specified if (! is_null($row['area'])){ $area_name = ' : <strong>'.utf8_encode($row['area_name']).'</strong>'; } // include chain, when applicable if (! is_null($row['chain_name'])){ $chain_name = ' ('.utf8_encode($row['chain_name']).')'; } $name = utf8_encode($row['name']); // display list item various data-* attributes filtering echo '<div class="list-item" style="display:block;overflow:auto;margin-bottom:10px;background:#f7f7f7;padding:10px;border:1px solid #e2e2e2;" >'; // metadata filtering echo '<span class="data-area_'.$row['area'].'"></span>'; echo '<span class="data-chain_'.$row['chain'].'"></span>'; if ($row['low_rate']>0){ echo '<span style="display:none;" class="price">'.$row['low_rate'].'</span>'; } echo '<span style="display:none;" class="data_stars">'.$row['star_rating'].'</span>'; echo '<span style="display:none;" class="data_rating">'.$row['review_rating'].'</span>'; echo "<div class='flex-item'><a href='http://secure.every-hotel.com/hotels/hotel/?refid=6446&refclickid=ehlist&hotel_id=" . $row['id']." 'title='check availability of ".utf8_encode($row['name'])."'><img style='margin-right: 10px;' width='90px' height='90px' align='left' src='" . $row['thumbnail'] . "'></a></div><!--flex-item-->"; echo "<div class='flex-item'>" . utf8_encode($row['name']).$chain_name.$area_name."</div><!--flex-item-->"; echo "<div class='flex-item'>" . ltrim((utf8_encode($row['address']) . ", "),", ") . $geo_area."</div><!--flex-item-->"; $stats = "<div class='flex-item'>"; // stars if($row['star_rating']>0) { if($row['star_rating']>1) { $stats.= rtrim($row['star_rating'],".0") . " stars | "; } else { $stats.= rtrim($row['star_rating'],".0") . " star | "; } } // rooms if($row['rooms']>0) { if($row['rooms']>1) { $stats.= $row['rooms'] . " rooms | "; } else { $stats.= $row['rooms'] . " room | "; } } // rating if($row['review_rating']>0) { if($row['review_count']>1) { $stats.= "review rating: " . $row['review_rating'] . " (" . $row['review_count'] . " reviews) | "; } else { $stats.= "review rating: " . $row['review_rating'] . " (" . $row['review_count'] . " review) | "; } } // rate if($row['low_rate']>0) { // currency symbol if($row['currency_symbol']==''){ $curr=$row['currency_code']; } else { $curr=$row['currency_symbol']; } $stats.= "from ".$curr.$row['low_rate']; } $stats = rtrim($stats," | ")."</div><!--flex-item-->"; echo $stats; // if available, use /country/state/city link format if(isset($_session['href'])){ $href = $_session['href']; echo '<div class="flex-item">' .$href . '/' .$city_url. '/' .$row['url']. '" title="view details of ' .utf8_encode($row['name']). '">view details</a> | <a href="http://secure.every-hotel.com/hotels/hotel/?refid=6446&refclickid=ehlist&hotel_id=' .$row['id']. ' "title="check availability of ' .utf8_encode($row['name']). '"> check availability</a></div><!--flex-item-->'; } // otherwise use /in/city link format else { echo "<div class='flex-item'><a href='/in/$city_url/" . $row['url'] ."' title='view details of ".utf8_encode($row['name'])."'>view details</a> | <a href='http://secure.every-hotel.com/hotels/hotel/?refid=6446&refclickid=ehlist&hotel_id=" . $row['id']." 'title='check availability of ".utf8_encode($row['name'])."'> check availability</a></div><!--flex-item-->"; } echo "</div><!--list-item-->"; } // end while ?> </div><!--list--> <!-- no results found --> <div class="jplist-no-results"> <p>no results found</p> </div> </div><!--demo-->
Comments
Post a Comment