how to fix Dynamic Multiple Drop Down Menu problem in codeigniter? - codeigniter

i have a menu generated dynamically by taking title from database. i have set same table for sub pages by adding a column p_id. and my code looks like this.
private $Section = array();
function _menu($root){
$this->db->select('id,title,p_id');
$this->db->Where('p_id',$root);
$this->db->Where('status','active');
$this->db->Where('type','page');
$this->db->order_by('sort');
$query = $this->db->get('pages');
foreach ($query->result() as $row)
{
$this->Section[] = '<ul>';
$this->Section[] = '<li>';
$this->Section[] = anchor('site/page/'.$row->id.'#cont_main',$row->title);
$this->_menu($row->id);
$this->Section[] = '</li>';
$this->Section[] = '</ul>';
}
$query->free_result();
return $this->Section;
}
//get menu tree
function MenuTree(){
return $this->_menu(0);
}
in above _menu() if a nav have two or more child then it doesn't displays because the source populated by it gives extra </ul> and <ul>. the source looks like this
<ul>
<li>menu 1
<ul>
<li><a>menu 1 sub1</a></li>
</ul>
<ul>
<li><a>menu 1 sub2</a></li>
</ul>
</li>
while i am assuming to get:
<ul>
<li>menu 1
<ul>
<li><a>menu 1 sub1</a></li>
<li><a>menu 1 sub2</a></li>
</ul>
</li>
edited
i have to add menu according to child element. image comes in all menus which doesn't have child too due to extra <ul></ul> if i use ul before loop. the source looks like this.
<ul>
<li>menu 1
<ul>
<li><a>menu 1 sub1</a>
<ul></ul>
</li>
<li><a>menu 1 sub2</a></li>
</ul>
</li>
any idea would be appreciable.

You need to add your ul outside the foreach loop AND make sure that you already have results!
if ($query->num_rows() > 0) { // we actually have results, open a UL and loop to add the LIs
$this->Section[] = '<ul>';
foreach ($query->result() as $row) {

You are using
foreach ($query->result() as $row) {
$this->Section[] = '<ul>';
which of course always displays an ul since it does it FOR EACH element. You need to place
$this->Section[] = '<ul>';
and it's closing block outside the loop. If you want it only triggered if there are more than one parent, an IF statement that check's this and reacts accordingly should by everything you need.
The problem that remains seems to be the placing of the ul. You could do
function MenuTree() {
return "<ul>" . $this->_menu(0) . "</ul>";
}
and remove the mentioned ul from above completely to just get the inner loops.

Related

modulus with remainder laravel

I am trying to setup columns of 4 from a laravel array which works correctly. The problem is how do you handle remainders? With my loop I end up with 2 extra divs that are empty at the end of my output. I have 10 items that i'm looping over which would give me a remainder of 2.5 Here is my code.
<div class="serviceListingColumn">
<ul>
#foreach($serviceListings as $serviceListing)
#if ($serviceListing->service_category == $services->title)
<li class="serviceListingItem">{{$serviceListing->service_name}}</li>
#endif
#if($loop->iteration % 4 === 0)
</ul>
</div>
<div class="serviceListingColumn">
<ul>
#endif
#endforeach
</ul>
I would suggest chunking the original array into groups, then just looping those. Easier for the template logic.
// Use the Collection's group() functionality in your controller.
// Use collect() if it isn't a Collection already.
$array = collect($array)->chunk(4);
// Your template then doesn't need to worry about modulus,
// and can focus on displaying the chunked groups.
#foreach ($array as $group)
<div class="serviceListingColumn">
<ul>
#foreach ($group as $serviceListing)
<li class="serviceListingItem">{{ $serviceListing->service_name }}</li>
#endforeach
</ul>
</div>
#endforeach

Laravel Blade Changing Active Class Bootstrap

How will I change the active class in twitter bootstrap when i visit another page with Laravel Blade Templating ?
here is an example this might can help
You could define a variable in your blade template
<?php $nav_profile = 'active'; ?>
#extends ('layouts.app')
#section ('content')
..
..
#endsection
And then in the layouts file;
<ul class="nav nav-tabs">
<li role="presentation" class="{{ $nav_home or '' }}">Home</li>
<li role="presentation" class="{{ $nav_profile or '' }}">Profile</li>
<li role="presentation" class="{{ $nav_messages or '' }}">Messages</li>
</ul>
So, if the page includes a variable called nav_profile then insert 'active' into the class. The 'or 'part inserts an empty string if the variable is not present.
I have found a simple solution for this problem. This solution has very simple trick.
And it will work for all links throughout the page.
<script>
function addActiveClass(){
var objs = document.getElementsByTagName('a'); // take all 'a' tags
for(var i = 0; i < objs.length; i++){
if(objs[i].href == window.location.href){ // check if the user is on this link
objs[i].className = objs[i].className + " active"; // add additional 'active' class
}
}
}
addActiveClass();
</script>
Adding this code to the end of your page will do the magic.

Laravel 4 custom pagination: go to first/last page and show a fixed number of links

I'm using the default Bootstrap slider navigation in Laravel 4 and it works very nice: but now I'd like improve it with two customizations, and I have no clue how:
1: Add a "go to first page" at the beginning, disabled if we are in the first page; and an analogous "go to last page" at the end, disabled if we are in the last page (please see how the arrows are changed compared to default Laravel stuff! I'd like to use "double arrows" (« and ») for "go to first/last", and a single arrow (‹ and ›) for "go to prev/next:
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="disabled"><span>‹</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>›</li>
<li>»</li>
</ul>
2: Show a custom number of links at a time (i.e. 5) instead of the default long list:
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="disabled"><span>‹</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>›</li>
<li>»</li>
</ul>
or
<ul class="pagination">
<li>«</li>
<li>‹</li>
<li>2</li>
<li>3</li>
<li class="active"><span>4</span></li>
<li>5</li>
<li>6</li>
<li>›</li>
<li>»</li>
</ul>
Want to see a picture? This is how it should be for various pages (it's an old procedural PHP built on Bootstrap 2.3.2... I have the original code but don't know how to "translate" into Laravel OOP)
So far I made a custom.php view and changed line 'pagination' => 'pagination::slider-3' in laravel/app/config/view.php to 'pagination' => 'pagination::custom'
Then, in custom.php view, I am stuck on:
<?php
$presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
?>
<?php if ($paginator->getLastPage() > 1): ?>
<ul class="pagination">
</ul>
<?php endif; ?>
Please, any help?
Thanks in advance!
Here you go.
<?php
class MyPresenter extends Illuminate\Pagination\BootstrapPresenter {
public function render()
{
if ($this->currentPage == 1) {
$content = $this->getPageRange(1, $this->currentPage + 2);
}
else if ($this->currentPage >= $this->lastPage) {
$content = $this->getPageRange($this->currentPage - 2, $this->lastPage);
}
else {
$content = $this->getPageRange($this->currentPage - 1, $this->currentPage + 1);
}
return $this->getFirst().$this->getPrevious('‹').$content.$this->getNext('›').$this->getLast();
}
public function getFirst($text = '«')
{
if ($this->currentPage <= 1)
{
return $this->getDisabledTextWrapper($text);
}
else
{
$url = $this->paginator->getUrl(1);
return $this->getPageLinkWrapper($url, $text);
}
}
public function getLast($text = '»')
{
if ($this->currentPage >= $this->lastPage)
{
return $this->getDisabledTextWrapper($text);
}
else
{
$url = $this->paginator->getUrl($this->lastPage);
return $this->getPageLinkWrapper($url, $text);
}
}
}
Feel free to change MyPresenter class name, and in your custom view:
<ul class="pagination">
<?php echo with(new MyPresenter($paginator))->render(); ?>
</ul>
Of course this is not quite perfect (you'll probably run into problem if total pages is less than 3), but this will set you on the right track.

created nested list in MVC3

I want to create menu using <ul> and <li> tags. Im working in MVC3 + Razor. And I stored menu in database like this
MenuId Name ParentMenuId OrderBy
1 Item1 Null 1
2 Item2 Null 2
3 Item2.1 2 1
4 Item2.1.1 3 1
5 Item2.1.2 3 2
The HTML output should be
<ul>
<li>Item1</li>`
<li>Item2</li>`
<ul>
<li>Item2.1</li>
<ul>
<li>Item2.1.1</li>
<li>Item2.1.2</li>
</ul>
</ul>
</ul>
Can anyone please help me how can I generated menu from this. I tried searching on internet, but not able to find something which I can use.
I see this article (Recursion in an ASP.NET MVC view) where one reply is to create HTMLHelperExtension.
But not able to find out in my case how to use.
you can try something like this :
#helper CreateCategory(int? nid)
{
var childs = context.Categories.Where(c=>c.parentid == nid).OrderBy(C => C.order);
int childsCount = childs.Count();
if (childsCount == 0)
return;
<ul>
#foreach (Category child in childs)
{
<li>
#child.Title
CreateCategory(child.Id);
</li>
}
</ul>
}
you most call this helper so :
CreateCategory(null);
hope this could help.
You should use DisplayTemplate
Here is an example:
<!-- Your view -->
#if (Model.Items != null)
{
<ul>
foreach (var item in Model.Items)
{
#Html.DisplayFor(m => item)
}
</ul>
}
<!-- Your DisplayTemplate control -->
<li>
#Model.Name
</li>
#if (Model.Items != null) {
<ul>
foreach (var item in Model.Items)
{
#Html.DisplayFor(m => item)
}
</ul>
}
So you will recurcively call DisplayTemplate from DisplayTemplate to render nested Items

How do I make a AJAX nested list, in AngularJS?

I've made a list who's content is loaded via AJAX, and it works as intended.
I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.
Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)
<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>
I've made the outer code work with:
function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}
but I can't really see where to start with the inner lists.
How about this? You don't need another controller.
<ul>
<li ng-repeat="item in group.items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>

Resources