Cakephp Pagination with left right div combination - pagination

I am working in a cakephp 2+ project. I am implementing pagination for sorting product listing in two left and right div combination. I am able to make left div but could not make right one since offset can not be set in pagination. I need half items in left div and half items in right div, so I can set limit but not able to offset. How can i do this?
Controller code
public function index()
{
$rows=$this->Product->find('count', array('conditions'=>array('Product.allow'=>1)));
if($rows%2==0)
{
$this->paginate = array('conditions' => array('Product.allow'=>1,'limit'=>($rows/2));
$list_l = $this->paginate('Product');
$this->set('left_list',$list_l);
$this->paginate = array('conditions' => array('Product.allow'=>1,'limit'=>($rows/2), 'offset'=>$rows/2));
$list_r = $this->paginate('Product');
$this->set('right_list',$list_r);
}
else
{
$right_list=$this->Paginate('Product', array('Product.allow'=>1),array('limit'=>($rows-round($rows/2)), 'offset'=>round($rows/2)));
}
}
View Code
Foreach loop with array returned from controller

Why not call $this->paginate() once and loop over all the items and perform the split in the View itself? Performing both calls is rather wasteful of database resources.
In that case you would have have a call to $this->paginate in the Controller. Say you want five items in the left column and five in the right:
$products = $this->paginate = array('conditions' => array('Product.allow'=>1, 'limit' => 10));
$this->set('products', $products);
In the view:
<div class="left-column">
<?php
foreach ($products as $product) {
debug($product);
if ($count === 5) {
echo "</div>\n<div class=\"right-column\">";
$count = 1;
}
$count++;
}
?>
</div>
Another way would be to use array_chunk in the Controller. Using this core PHP function you'll end up with multidimensional numerically indexed array which you can loop over and wrap the child arrays in their relevant divs.
<?php
$limit = round(count($products)/2);
$products = array_chunk($products, $limit);
foreach ($products as $index=>$groupedProducts) {
echo ($index === 0) ? '<div class="left-column">': '<div class="right-column">';
foreach ($groupedProducts as $product) {
debug($product);
}
echo '</div>';
}
?>

Related

Datatable show hidden elements upon search successful

I have some HTML elements which are hidden by default until user try to search for it. I am thinking to change the class of the element to show when the DataTable search completed (if found).
Refer to the jQuery code below where I implement the search, what is the next step to show the parent or the container of it?
E.g. if the search key is c or cc or ccc, how to show its parent (in this case is <li class="show">)?
jQuery
$("#txtSearch").on('keyup keypress blur change', function(e) {
var val = $(this).val();
$('#mytable').DataTable().search(val).draw();
});
HTML
<li class="hide">aaa</li>
<li class="hide">bbb</li>
<li class="hide">ccc</li>
Take a look at this code Snipp,Iterate over the Hide classes and extract the inner text then compare your search results.
$("#txtSearch").on('keyup keypress blur change', function(e) {
var val = $(this).val();
var numItems = $('.hide').length ;
for(var count = 1; count<=numItems;count++){
var index = count-1;
var searchResult = $(".hide:eq("+index+")").text();
if(val.indexOf(searchResult) > -1){
$(".hide:eq("+index+")").removeClass("hide").addClass("show");
}
else{
$(".hide:eq(" + index + ")").removeClass("show").addClass("hide");
}
}
$('#mytable').DataTable().search(val).draw();
});

Prevent CakePHP from stripping chars from url passed as param?

I am developing an application using CakePHP 2.6 and having issues with passing a string containing url characters as a parameter through to a controller method.
In my view I have a chunk of code which echoes out a series of table rows containing data and passes through the page id, unit id and the id of the link which can sometimes contain a url.
<?php foreach($linklist as $l) { ?>
<tr id="Link_<?php echo $l['ID']; ?>">
<td><?php echo $l['Title']; ?></td>
<td class="buttontd"><?php echo $this->Form->postlink('Delete', array('action' => 'deletelink', $this->request->params['pass'][0], $results[0]['PageUnitTypeID'], $l['ID']), array('class' => 'button delete')); ?></td>
</tr>
<?php } ?>
When the postlink button passes the information over to the 'deletelink' action in the controller the url looks like this:
http://mydomainname.com/webpages/deletelink/239/7/urlhttp%3A%2F%2Fwww.google.co.uk%2F
Which shows that the url has been passed as the string but then in the action when I try to just var_dump() the third parameter it returns a string of www.google.co.uk and nothing more which is preventing me from doing a substr() call on the parameter to check if the first 3 characters are equal to url or not.
I have tried to wrap the parameter in the postlink call inside serialize() and urlencode() but neither has had the desired effect of returning the full string as
urlhttp%3A%2F%2Fwww.google.co.uk%2F
Does anyone know of a successful way to pass through a parameter like this without losing important characters?
Update 1: Deletelink action
public function deletelink($pid = null, $uid = null, $lid = null) {
$this->autoRender = false;
if (!is_null($pid) && is_numeric($pid) && !is_null($uid) && is_numeric($uid)) {
if (!is_null($lid)) {
if (substr($lid, 0, 3) == 'url') {
echo substr($lid, 0, 3);
} else {
echo substr($lid, 0, 3);
}
} else {
$this->Session->setFlash('It is unknown which link you wish to delete from the webpage', 'flash_message_bar', array('class' => 'error'));
return $this->redirect(array('action' => 'edit', $pid));
}
} else {
$this->Session->setFlash('It is unknown which on which webpage you wish to delete a link', 'flash_message_bar', array('class' => 'error'));
return $this->redirect(array('action' => 'index'));
}
}
CakePHP (or mod_rewrite I would say) is getting confused with the way your URL is formed.
Your safest option is to base64_encode the url parameter in the view, which will result in call similar to:
http://mydomainname.com/webpages/deletelink/239/7/dXJsaHR0cDovL3d3dy5nb29nbGUuY28udWsv
and base64_decode it later in the action, which will transform
dXJsaHR0cDovL3d3dy5nb29nbGUuY28udWsv
into
urlhttp://www.google.co.uk/

What is the proper way to do conditional formatting in a ZF2 MVC project?

In a ZF2 project I am developing, I would like to create a shell around the echo $this->content; statement in layout.phtml that would allow conditional formatting of the main content area. Specifically, I want to put the content into a column that is 75% wide and include some “ornamental” elements in a column that is 25% wide for most of the pages. However, I want to change to a single column for pages that need more space. My project is a CMS in which each page has an attribute that can tell either the view or the controller whether the page should be normal or wide. I have considered a number of methods for achieving what I’m after.
My “conditional formatting in the layout view” might look like this:
// module/Application/view/layout/layout.phtml:
//...
if ($templateNormal) {
echo "<div class='col-md-9'>";
} else {
echo "<div class='col-md-12'>";
}
echo $this->content;
if ($templateNormal) {
echo "</div>";
echo "<div class='col-md-3'>";
//... ornamentation
echo "</div>";
} else {
echo "</div>";
}
//...
While the above-method could work, for pure MVC I don’t think there is supposed to be any decision-making going on in the layout view.
My “conditional formatting in partial views” could look like this:
// module/Application/view/layout/layout.phtml:
//...
echo $this->partial('partial/open-shell.phtml');
echo $this->content;
echo $this->partial('partial/close-shell.phtml');
//...
// module/Application/view/partial/open-shell.phtml:
if ($templateNormal) {
echo "<div class='col-md-9'>";
} else {
echo "<div class='col-md-12'>";
}
// module/Application/view/partial/close-shell.phtml:
if ($templateNormal) {
echo "</div>";
echo "<div class='col-md-3'>";
//... ornamentation
echo "</div>";
} else {
echo "</div>";
}
Here the decision-making is taken out of the layout view, but it is simply put into other views so it's still in the view package and still not pure MVC.
In my “conditional formatting in the controller” solution, a pair of html script strings are developed in a controller function, and then passed on to the view. It might look like this:
// module/Application/view/layout/layout.phtml:
//...
echo $this->open-shell-script';
echo $this->content;
echo $this->close-shell-script';
//...
// some controller function:
//...
if ($templateNormal) {
$open-shell-script = "<div class='col-md-9'>";
$close-shell-script = "</div>";
$close-shell-script = "<div class='col-md-3'>";
$close-shell-script .= //... ornamentation
$close-shell-script .= "</div>";
} else {
$open-shell-script = "<div class='col-md-12'>";
$close-shell-script = "</div>";
}
//...
In this method, the decision-making is done in the controller where I assume it should be, but it seems odd to be writing html there.
Any comments or suggestions?
create two layout and in init() method of Module.php decide which layout should use .
public function init(ModuleManager $moduleManager) {
$sharedEvents = $moduleManager->getEventManager()->getSharedManager();
$sharedEvents->attach(__NAMESPACE__, 'dispatch', function($e) {
// This event will only be fired when an ActionController under the MyModule namespace is dispatched.
$controller = $e->getTarget();
$controller->layout(" your chose layout ");
}
}
There are many ways to accomplish this. This is one method and the logic lives in the controller:
controller
public function yourSampleAction()
{
// assign variables as usual to this view model
$viewModel = new ViewModel(array(
//vars
);
// this will be the "wrapper" and can be single, double column or anything else.
$wrapperViewModel = new ViewModel();
$wrapperViewModel->addChild($viewModel, 'innerContent');
// use this line when you want one column
$wrapperViewModel->setTemplate('path/to/your/single-column-wrapper.phtml');
// when this line you want two columns
$wrapperViewModel->setTemplate('path/to/your/two-column-wrapper.phtml');
return $wrapperViewModel;
}
two-column-wrapper.phtml
<div class='col-md-9'>
<?php echo $innerConntent; ?>
</div>
<div class='col-md-3'>
<!--- something else in here? -->
</div>
single-column-wrapper.phtml
<div class='col-md-12'>
<?php echo $innerConntent; ?>
</div>
Instead of setting different templates, you can adjust the Bootstrap Twitter classes by making the necessary classes dependent on a layout variable. You can use the logic in your controllers action to pass variables directly to the layout (not the view) like so:
$this->layout()->setVariables
(
array
(
'layoutVar1' => 75,
'someColClass' => ($someSwitch ? 'col-md-9':'col-md-12' ),
'layoutVar1' => 75,
)
);
and then just access these variables in the Layout as you would variables sent to the View. You don't have to even prepend them with "layout", they won't clash.

Template binding with nested for loops WinJS

I've got an issue where I'm using template.render to render an array of items based on a html template. Each item in the array also contains another array, that I want to bind to another template, within the parent element for the area. I know I can use a grid layout for groups, but I'm trying to accomplish this another way, so please, no suggestions to use a different control, I'm just curious as to why the following doesn't work correctly.
//html templates
<div id="area-template" data-win-control="WinJS.Binding.Template">
<h1 class="area-title" data-win-bind="innerHTML:title"></h1>
<div class="items">
</div>
</div>
<div id="item-template" data-win-control="WinJS.Binding.Template">
<h2 class="item-title" data-win-bind="innerHTML:title"></h2>
</div>
// JS in ready event
var renderer = document.getElementsByTagName('section')[0];
var area_template = document.getElementById('area-template').winControl;
var item_template = document.getElementById('item-template').winControl;
for (var i = 0; i < areas.length; i++) {
var area = areas.getAt(i);
area_template.render(area, renderer).done(function (el) {
var item_renderer = el.querySelector('.items');
for (var j = 0; j < area.items.length; j++) {
var item = area.items[j];
item_template.render(item, item_renderer).done(function (item_el) {
});
}
});
}
So what should happen, is that after it renders the area, in the "done" function the newly created element (el) gets returned, I'm then finding it's ".items" div to append the items to. However, this appends all the items to the first div created. If it was the last div, it might make more sense due to closures, but the fact it happens on the first one is really throwing me off!
What's interesting, is that if I replace my template render function using document.createElement and el.appendChild, it does display correctly e.g: (in the done of area render)
area_template.render(area, renderer).done(function (el) {
var item = area.items[j];
var h2 = document.createElement('h2');
h2.innerText = item.title;
el.appendChild(h2);
}
although I've realised this is el it is appending it to, not the actual .items div of the el
I'm not quite sure what could be going on here. It appears the value of el is getting updated correctly, but el.querySelector is either always returning the wrong ".items" div or it's getting retained somewhere, however debugging does show that el is changing during the loop. Any insight would be greatly appreciated.
thanks
I've worked out what is going on here. The "el" returned in the render promise is not the newly created element as I thought. It's the renderer and the newly created html together. Therefore el.querySelector('.items') is always bringing back the first '.items' it finds. I must have misread the docs, but hopefully someone else will find this information useful in case they have the same error.
I guess one way around this would be to do item_rendered = el.querySelectorAll('.items')[i] and return the numbered '.items' based on the position in the loop
e.g
for (var i = 0; i < areas.length; i++) {
var area = areas.getAt(i);
area_template.render(area, renderer).done(function (el) {
var item_renderer = el.querySelectorAll('.items')[i];
for (var j = 0; j < area.items.length; j++) {
var item = area.items[j];
var h2 = document.createElement('h2');
h2.innerText = item.title;
item_renderer.appendChild(h2);
}
});
}

Orchard CMS 1.4.2: how to add a pager to a projection

It's thick o'clock on Monday afternoon...
How do I add a pager to a projection list?
I have a list of 135 Recorded Species content items that comply with a Query. So how do I page them? :(
Checking Show Pager box in the Edit Projection page just adds:
<< Older Newer >>
links at the bottom of the page. The html rendered is, for example:
<ul class="group pager" shape-id="3">
<li class="page-next" shape-id="3">« Older
</li>
<li class="page-previous" shape-id="3">Newer »
</li>
</ul>
Ie:
<< Older increases the page number. Newer >> decreases the page number. This looks like a bug to me, as I would expect Previous and Next links, as well as page number links. Not older and newer...
Is there some module that needs disabling?
This is a feature: the default frontend pager is just like that (page 1 is always the newest page).
For a richer pager just take a look at the one in the TheAdmin theme (Views/Pager). This below is a stripped down version of it, displaying also the page numbers:
#{
Model.PreviousText = T("<");
Model.NextText = T(">");
var routeData = new RouteValueDictionary(ViewContext.RouteData.Values);
var queryString = ViewContext.HttpContext.Request.QueryString;
if (queryString != null)
{
foreach (string key in queryString.Keys)
{
if (key != null && !routeData.ContainsKey(key))
{
var value = queryString[key];
routeData[key] = queryString[key];
}
}
}
if (routeData.ContainsKey("id") && !HasText(routeData["id"]))
{
routeData.Remove("id");
}
Model.Metadata.Type = "Pager_Links";
IHtmlString pagerLinks = Display(Model);
Model.Classes.Add("selector");
var pageSizeTag = Tag(Model, "ul");
if (Model.RouteData != null)
{
foreach (var rd in Model.RouteData.Values)
{
routeData[rd.Key] = rd.Value;
}
}
}
#if (Model.TotalItemCount > 1)
{
<div class="pager-footer">
#pagerLinks
</div>
}

Resources