I'm new in Laravel and need to pass data to navbar in header.
This are my pages
Main:
<div class="container">
<header>
#include('user.includes.header')
</header>
<main>
#yield('content')
</main>
<footer>
#include('user.includes.footer')
</footer>
</div>
Header:
<div id="navigation">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
#foreach($categorias as $cat)
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="{{$cat->nome}}">
{{$cat->nome}}
<span class="caret"></span>
</a>
#endforeach
</li>
</ul>
</nav>
</div>
IncludesController:
class IncludesController extends Controller
{
public function Header(){
$categorias = Categoria::all();
return compact('categorias');
}
}
}
I want to pass data form Controller to header.
I tried this route:
Route::get('header', 'IncludesController#Header');
but doesn't work and with this route:
Route::get('/', 'IncludesController#Header');
only shows the data and o want to all HTML page.
In IncludesController u need to return :
class IncludesController extends Controller
{
public function Header(){
$categorias = Categoria::all();
return view('main',compact('categorias');
}
}
}
I hope your main.blade.php file is directly under resources/views folder.
This is untested but it might probably help...
You should be returning your content view from your controller, the data to pass to that view is the second parameter.
return view('yourContentView', compact('categorias'));
As long as your content view #extends('main'), any data passed to your content view would also be made available to both your header and footer views.
Another solution would be to setup a view composer for both your header and footer views. This will fire each time those views are loaded and automatically inject data into that view...
You can read documentation on the view composers at https://laravel.com/docs/5.2/views#view-composers
Related
I'm creating my first web app using asp.net core mvc, so I'm stuck with implementing global search using textbox inside layout, I can't find where to implement the search after user press Enter, Is it implemented in controller or something else, and how to implement it...
I'm stuck with implementing global search using textbox inside layout, I can't find where to implement the search after user press Enter
To implement the above requirement, you can refer to the following code snippet.
Adding form with input for searching functionality in _Layout.cshtml
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<form id="f_search" method="get" asp-action="Search">
<div class="form-group">
<div class="input-group">
<input id="ipt_search" type="search" class="form-control" name="SearchTerm" />
<span class="input-group-btn">
<button class="btn btn-default">
Search
</button>
</span>
</div>
</div>
</form>
</li>
</ul>
</div>
JS code of checking keydown event and user input
<script>
$(function () {
$('#f_search input').keydown(function (e) {
var searchTerm = $("#ipt_search").val();
if (searchTerm == "" && event.keyCode === 13) {
e.preventDefault();
return false;
}
});
})
</script>
Action method of Search
public IActionResult Search(string SearchTerm)
{
//...
//do query based on SearchTerm
//code logic here
//...
return View();
}
Test Result
I am trying to create a registration page that is using a tabbed view.
It was working perfectly fine when I tried to include all the tab contents inside respective tabs in single page.
Later I wrote the contents of each tab to different jsp pages specifically for each tab and tried to include the jsp pages using
But now all the jsp pages' contents are being listed under a single tab. I mean each tab is displaying contents of other tabs too.
<div class="panel-body">
<div class="reg-panel">
<ul id="breadcrumbs-one" class="nav nav-tabs" role="tablist">
<li class="active"><a data-toggle="tab" href="#main">Basic
Details</a></li>
<li><a data-toggle="tab" href="#tab1">Grade Details</a></li>
<li><a data-toggle="tab" href="#tab2">Facilities</a></li>
<li><a data-toggle="tab" href="#tab3">Awards</a></li>
<li><a data-toggle="tab" href="#">Documents</a></li>
<li><a data-toggle="tab" href="#preview">Preview</a></li>
<li><a data-toggle="tab" href="#submit">Submit</a></li>
</ul>
<div class="tab-content">
<div id="main" class="tab-pane fade in active">
<jsp:include page="/WEB-INF/views/basic_details.jsp" />
</div>
<div id="tab1" class="tab-pane fade">
<jsp:include page="/WEB-INF/views/grade_details.jsp" />
</div>
<div id="tab2" class="tab-pane fade">
<jsp:include page="/WEB-INF/views/grade_details.jsp" />
</div>
....... and so and so ......
The problem here is that the contents of all the tabs basic details, grade details, awards and all such is being displayed under one tab itself.
Please help me resolve this. Which method should I actually have used? Is it better to use jstl or spring url instead?
First get the list in spring controller.
#RequestMapping(value = { "/registration" }, method = RequestMethod.GET)
public ModelAndView registration(ModelAndView model)
{
List<Registration> regList = regService.regList();
model.addObject("regList ", regList);
model.setViewName("registration");
setBreadCrumb(model);
return model;
}
Now the list is added using model.addObject("regList ", regList);
Use the regList in jsp using JSTL you can do
<c:if test="${regList.grade=="something"}">
show this
</c:if>
<c:if test="${regList.facilities=="something-else"}">
show that
</c:if>
I am adding Partial view in to my main view , the partial view code snippet is:
<li class="item-#j deeper parent active">
<a class="" href="">
<span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-#j" class="sign"><i class="icon-plus icon-white"></i></span>
<span class="lbl">Brands</span>
</a>
<ul class="children nav-child unstyled small collapse" id="sub-item-#j">
#foreach (var brand in Model.BrandList)
{
<li class="item-#j deeper parent active">
<div class="checkbox">
<label>
<input type="checkbox" value="#brand._id">
#*<a class="" href="#Url.Action("FilterData", "ShopWindow", new {shopKey=house._id,houseKey=house._id,houseName = house.House})">*#
<span class="lbl">#brand.Brand</span>
#*</a>*#
</label>
</div>
</li>
j++;
}
</ul>
</li>
in my main view I have a script to get all the check boxes that user have selected, the script snippet :
<script type="text/javascript">
var selectedBrand=[];
$("input[type='checkbox']").change(function () {
$('#brand input:checked').each(function () {
selectedBrand.push($(this).attr('value'));
alert("Test");
})
sendAjaxRequest();
});
When I select any check box from the partial view the script's change function is not getting triggered. This change function triggers if I check any checkbox in the main page but not for checkboxes belongs to partial view .
Any idea?
Thanks
I found the solution :
changed
$("input[type='checkbox']").change(function () {
to
$(document).on('change', '.checkbox', function() {
Here i create a partial view when i try to implement in _Layout page its throughing an Error as cant convert void to object
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.RenderPartial("_AutoCompltetext")</li>
</ul>
</div>
<li>
#{
Html.REnderPartial("_Autocomplte")
}
</li>
I've this piece of markup. This piece has been loaded through ajax and appended inside a div.
Content of file user-bar.php:
<div id="u-bar">
<ul id="u-nav" class="nav">
<li id="notifications-list" class="dropdown" data-time="" >
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-comment"></i>
Notifications
<b class="caret"></b>
</a>
<ul class="dropdown-menu" >
<li>Notification One</li>
<li>Notification two</li>
<li class="divider"></li>
<li>Show All Notifications</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-user"></i>
Profile
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>Settings</li>
</ul>
</li>
<li>Logout</li>
<div class="clear"></div>
</ul>
</div>
I've scripts.js file as below which is included in the index.php file as <script type="text/javascript" src="js/scripts.js"></script>
$(function(){
loadUserBar();
$('#notifications-list').live('click', function(){
console.log('Test');
$('#notifications-list .icon-comment').removeClass('new');
});
});
function loadUserBar(){
$('#user-area').load('php/user-bar.php', function(){
initBootstrapElems(); //Initializing All popover elements
});
}
index.php file has the div#user-area where the ajax returned markup is inserted.
After the whole page has been loaded, when I click on the list-item #notifications-list, nothing happens. But when I typed in $('#notifications-list').click() directly in the console, the log does appears and the removeClass does occur.
What could be wrong here?
You're right, there's a conflict with dropdown bootstrap (simulated at http://jsbin.com/ijiqec/2/edit).
For some reason (don't ask me why) changing the use of live by on fixed the issue.
Use this piece of code:
$('#notifications-list').on('click',...
Try to put the handler for click on the a tag event.
$('#notifications-list a').live('click', function(){ ... })
Update:
You can't use the same id for all li tags.
You need to change the li.#notifications-list to a class if you have that on each tag and then update the js:
$('.notifications-list a').live('click', function(){ ... })