I am using msurguy/laravel-shop-menu it resturn results as json while it return html resutls for my other models.
screenshot
As you can see two of my menus working fine but one of them return as JSON.
Codes are the same for all of them I'm just getting different class names in JavaScript code to divide them.
Code
Model
public function buildMenu($menu, $parentid = 0)
{
$result = null;
foreach($menu as $item)
if ($item->parent_id == $parentid) {
$result .= "<li class='dd-item nested-list-item' data-order='{$item->order}' data-id='{$item->id}'>
<div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
</div>
<div class='nested-list-content'>{$item->title}
<div class='float-right'>
<a href='/admin/menusnav/{$item->id}'>Edit</a> |
<a href='#' class='delete_toggle text-danger' rel='{$item->id}'>Delete</a>
</div>
</div>".$this->buildMenu($menu, $item->id) . "</li>";
}
return $result ? "
<ol class=\"dd-list\">
$result</ol>
" : null;
}
// Getter for the HTML menu builder
public function getHTML($items)
{
return $this->buildMenu($items);
}
controller
$navbars = NavbarMenu::orderby('order', 'asc')->get();
$navbar = new NavbarMenu;
$navbar = $navbar->getHTML($navbars);
Blade
<div class="dd navbarf" id="nestable">
{!! $navbar !!}
</div>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('.navbarf').nestable({
dropCallback: function(details) {
var order = new Array();
$("li[data-id='"+details.destId +"']").find('ol:first').children().each(function(index,elem) {
order[index] = $(elem).attr('data-id');
});
if (order.length === 0){
var rootOrder = new Array();
$("#nestable > ol > li").each(function(index,elem) {
rootOrder[index] = $(elem).attr('data-id');
});
}
var token = $('form').find( 'input[name=_token]' ).val();
$.post('{{url("admin/menusnav/reorder/")}}',
{
source : details.sourceId,
destination: details.destId,
order:JSON.stringify(order),
rootOrder:JSON.stringify(rootOrder),
_token: token
},
function(data) {
// console.log('data '+data);
})
.done(function() {
$( "#success-indicator1" ).fadeIn(100).delay(1000).fadeOut();
})
.fail(function() { })
.always(function() { });
}
});
//delete item
$('.delete_toggle').each(function(index,elem) {
$(elem).click(function(e){
e.preventDefault();
$('#postvalue').attr('value',$(elem).attr('rel'));
$('#deleteModal').modal('toggle');
});
});
});
});
</script>
Any idea?
UPDATE
dd($navbar); in controller
"""
<ol class="dd-list">
<li class='dd-item nested-list-item' data-order='1' data-id='8'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Theravada
\t <div class='float-right'>
\t <a href='/admin/menusnav/8'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='8'>Delete</a>
\t </div>
\t </div>
<ol class="dd-list">
<li class='dd-item nested-list-item' data-order='1' data-id='14'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Ajahn
\t <div class='float-right'>
\t <a href='/admin/menusnav/14'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='14'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='2' data-id='15'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Sayadaw
\t <div class='float-right'>
\t <a href='/admin/menusnav/15'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='15'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='3' data-id='16'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>SN Goenka
\t <div class='float-right'>
\t <a href='/admin/menusnav/16'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='16'>Delete</a>
\t </div>
\t </div></li></ol>
</li><li class='dd-item nested-list-item' data-order='2' data-id='9'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Mahayana
\t <div class='float-right'>
\t <a href='/admin/menusnav/9'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='9'>Delete</a>
\t </div>
\t </div>
<ol class="dd-list">
<li class='dd-item nested-list-item' data-order='1' data-id='17'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Ven Chen Yen (Tzu Chi)
\t <div class='float-right'>
\t <a href='/admin/menusnav/17'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='17'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='2' data-id='18'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Ven. Shen Yen (Chan/Chinese Zen)
\t <div class='float-right'>
\t <a href='/admin/menusnav/18'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='18'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='3' data-id='19'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Thich Nhat Hanh (Plum Village)
\t <div class='float-right'>
\t <a href='/admin/menusnav/19'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='19'>Delete</a>
\t </div>
\t </div></li></ol>
</li><li class='dd-item nested-list-item' data-order='3' data-id='10'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Vajrayana
\t <div class='float-right'>
\t <a href='/admin/menusnav/10'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='10'>Delete</a>
\t </div>
\t </div>
<ol class="dd-list">
<li class='dd-item nested-list-item' data-order='1' data-id='20'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Nyingma
\t <div class='float-right'>
\t <a href='/admin/menusnav/20'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='20'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='2' data-id='21'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Kadampa
\t <div class='float-right'>
\t <a href='/admin/menusnav/21'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='21'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='3' data-id='22'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Kagyu
\t <div class='float-right'>
\t <a href='/admin/menusnav/22'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='22'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='4' data-id='23'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Sakya
\t <div class='float-right'>
\t <a href='/admin/menusnav/23'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='23'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='5' data-id='24'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Chod
\t <div class='float-right'>
\t <a href='/admin/menusnav/24'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='24'>Delete</a>
\t </div>
\t </div></li></ol>
</li><li class='dd-item nested-list-item' data-order='4' data-id='11'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Resources
\t <div class='float-right'>
\t <a href='/admin/menusnav/11'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='11'>Delete</a>
\t </div>
\t </div>
<ol class="dd-list">
<li class='dd-item nested-list-item' data-order='1' data-id='25'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Buku (books)
\t <div class='float-right'>
\t <a href='/admin/menusnav/25'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='25'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='2' data-id='26'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Sutta / Sutra
\t <div class='float-right'>
\t <a href='/admin/menusnav/26'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='26'>Delete</a>
\t </div>
\t </div></li></ol>
</li><li class='dd-item nested-list-item' data-order='4' data-id='12'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>News & Events
\t <div class='float-right'>
\t <a href='/admin/menusnav/12'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='12'>Delete</a>
\t </div>
\t </div>
<ol class="dd-list">
<li class='dd-item nested-list-item' data-order='1' data-id='27'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Dhammatalk
\t <div class='float-right'>
\t <a href='/admin/menusnav/27'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='27'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='2' data-id='28'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Retreat
\t <div class='float-right'>
\t <a href='/admin/menusnav/28'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='28'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='3' data-id='29'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Workshop
\t <div class='float-right'>
\t <a href='/admin/menusnav/29'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='29'>Delete</a>
\t </div>
\t </div></li><li class='dd-item nested-list-item' data-order='4' data-id='30'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>Center
\t <div class='float-right'>
\t <a href='/admin/menusnav/30'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='30'>Delete</a>
\t </div>
\t </div></li></ol>
</li><li class='dd-item nested-list-item' data-order='6' data-id='13'>
\t <div class='dd-handle nested-list-handle'>
<i class='fas fa-arrows-alt'></i>
\t </div>
\t <div class='nested-list-content'>About Us
\t <div class='float-right'>
\t <a href='/admin/menusnav/13'>Edit</a> |
\t <a href='#' class='delete_toggle text-danger' rel='13'>Delete</a>
\t </div>
\t </div></li></ol>
"""
