I have a view that creates 9 blocks in an HTML page. Each block can either have one large note (like a sticky note) or up to 6 small notes.
On each of the notes there is an option to show a comment.
The code to make those comment options thus appears 18 times in the view - there must be a better way to do it rather than have the code block appear so many times. A function that writes it out perhaps?
This is the code block:
<!-- start comments popover -->
<div class="popover-medium">
<a href="javascript:void(0)" class="icon-entypo icon-text-document btn-note trigger" data-toggle="popover" data-placement=right></a>
<div class="popover-avatar content hide">
<ul class="row popover-content border-bottom list-inline">
<li class="col-xs-9">
<span class="small clearfix"></span>
<span class="small">
#if (!empty($name->comments))
{{$name->comments}}
#else
No comments
#endif
</span>
</li>
</ul>
</div>
</div>
<!-- end comments popover -->
Any ideas/direction would be greatly appreciated!
Add your code block to a new blade file e.g. myblock.blade.php
Then in your main view you can call #include('myblock')
When the page renders it will replace the #include line with your block of code.
Also, its not totally clear what your question is. But it may also be worth noting that you can do this:
#foreach($array as $item)
#include('myblock', ['item'=>$item])
#endforeach
Then just reference $item in your block of code. You may actually not need to pass the $item as an argument to #include as I think when the page renders, the script can use all variables in the page.
Note: Some people struggle with the naming convention of blade views. See my answer to a previous post if you are struggling
Related
I am looking for a very general way to include bootstrap components in my blade view. For example let's say I need a drop down in my view, should I make a partial called dropdown.blade.php with code as follows:
<div class="dropdown">
<a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></a>
<ul class="dropdown-menu">
#foreach ($options as $option)
<li>{{$option["name"]}}</li>
#endforeach
</ul>
</div>
and use it in my view in the following way:
#include('partials.dropdown',
array("options"=>array(
["href"=>"#", "name"=>"Profile"],
["href"=>"#", "name"=>"Report"],
)))
Even we can make it more generic by adding options for button name etc. Is it a good or preferable way to do it or should we use copy-paste method from bootstrap website to our views every time? Is there any package that is doing this sort of work? Can we make it in more elegant way?
This seems like a good idea if you are going to re-use the component a lot. I think the more elegant way to do it would be to create custom blade directives:
https://laravel.com/docs/master/blade#extending-blade
Then you could do, for instance:
#dropdown($options, 'btn-primary')
I would also provide an argument for a custom element ID or name, so you can reference it elsewhere on the page as needed.
This gets a little more complex with things like modals. I think you'd want to register multiple blade directives so you could do something like
#startmodal
#modaltitle('Title')
#startmodalbody
Some body content
#endmodalbody
#endmodal
I'm trying to add Google Analytics click tracking events to li list items (active thumbnails) used in a responsive grid application, and can't get it working. I've researched here and in the Google developer forums without success. I'm sure there is something simple I'm doing wrong. I have the latest GA script code installed (page view analytics are working fine). Here is a code sample:
<ul>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_self" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Hope you can help. Feel free to suggest a better way of doing it.
Update: I'm still digging, and the GA code has been updated for Universal Analytics and looks like this:
<ul>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_self" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Update 2: I tried opening the outbound link target in a new page to see if a lack of callBack might be the problem. No success. Following are two views of the code, one with the contained inside the li with the outbound link, the other in a separate li with the same parent ul. Neither works. Does anyone know which syntax is correct? Thx.
Example 1: With href in it's own li:
<ul>
<li></li>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_blank" ></li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Example 2: With href inside outbound link li:
<ul>
<li data-type="link" data-url="http://www.starz.com/outlandercommunity/home.html" data-target="_blank" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/community1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Starz: Outlander Community</p></li>
</ul>
The syntax you are using for the event tracking uses the classic GA syntax (_gaq.push), but if you are using Universal Analytics (assuming that is what you mean by using the "latest GA script code"), the syntax needs to be updated:
onClick="ga('send', 'event', 'GridLinks', 'Click', 'Outlander Clicks 1');"
I'm not familiar with Responsive Grid, but the likely explanation is that the call to ga only adds the event to a queue for asynchronous processing, and that the event is lost because the current document is immediately replaced afterwards (stopping the JavaScript execution for the current page). You would need to use a hit callback as described in the Google Analytics help, but I'm not sure how this would be integrated with Responsive Grid. Also note that there are a couple of other pitfalls you need to be aware of.
I am using Blade to include multiple sub-views into a single set of tabs in a blade app. All of the sub-views have the same overall structure (a sidebar and a main section). Because of this, I have created a template and each sub-view extends the template. Here is the structure:
Main.blade.php
<div id="tabs">
<ul>
#foreach($views as $view)
<li>{{$view}}</li>
#endforeach
</ul>
#foreach($views as $view)
<div id="{{$view}}">
#include($view)
</div>
#endforeach
</div>
template.blade.php
{{-- formatting stuff --}}
#yield('content 1')
{{-- more formatting stuff --}}
#yield('content-2')
{{-- more formatting stuff --}}
tab-*.blade.php
#extends('template')
#section('content-1')
This is tab [whatever number]
#stop
#section('content-2')
Lorem Ipsum
#stop
The obvious problem here is that, as each sub-view extends the same template, the #yield('content') exists 3 times, and all 3 included sub-views have their own #section('content'). What appears to be happening is that the first sub-view's implementation of the content section is getting placed in all 3 yields.
My intent here is obvious. I want each included sub-view to implement it's own instance of the template, place it's content in the content section, THEN get pulled into the main page. Can this be done?
If I flatten the tab-*.blade.php files and stop using the template, it works fine. The problem here is that I end up with a lot of code repetition that would be better placed in a template. This is an emergency option, but I'd like to do it the "proper" way.
NOTE
I have tried to redesign this to avoid the problem, but I really can't come up with another solution. While #include is typically used to pull in small, static pieces (a header, a footer, etc.), I have not read anything that states this as a restriction. It seems to me that the best approach is to store each view once and pull them into the main page when needed, so that's how I've designed it.
Try using the #overwrite command instead of #stop
Example:
#extends('template')
#section('content-1')
Stuff goes here...
#overwrite
#section('content-2')
More stuff goes here...
#overwrite
Source: https://github.com/laravel/framework/issues/1058#issuecomment-17194530
I came up with a hack that seems to work. In template.blade.php, I use the following:
{{-- formatting stuff --}}
#yield(isset($tab) ? "content-1-$tab" : 'content-1')
{{-- more formatting stuff --}}
#yield(isset($tab) ? "content-2-$tab" : 'content-2')
{{-- more formatting stuff --}}
Then, in main.blade.php, I execute #include('view', ['tab'=>$view]). This seems to cause each instance of content-1 and content-2 do be named distinctly, allowing the 2 subviews to implement the sections separately. This also should allow any other views that implement this template to continue to function without having to change anything.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
I am a little new to this so apologies if I am a little vaugue but I will do my best.
I am attempting to create an iphone friendly version of a site using JQtouch. I understand that normally this would be done all in one HTML file with pages seperated by DIV's. However, I am wanting to load the content from exisitng pages of a website.
The next part to the problem is that my iphone.html page does not sit in the same directory as my current website, so the normal behaviour of JQtouch doesnt seem to work.
So far I have set up a page as follows:
<div id="home">
<div class="toolbar">
<h1>Title</h1></div>
<ul class="rounded">
<li class="arrow"> HOME</li>
<li class="arrow"> ABOUT US</li>
<li class="arrow"> GNWR</li>
<li class="arrow"> GNER</li>
<li class="arrow"> NEWS</li>
<li class="arrow"> FAQS</li>
<li class="arrow"> CONTACT</li>
</ul>
</div>
<div id="content"></div>
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>
</body>
</html>
I then have :
<script>
$(document).ready(function(){
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content');
}
</script>
This loads the content I am after and the page animations work fine. The only problem is that a couple of links exist in the content I am loading and when clicked they obviously dont work.
Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?
Hope this makes sense if you need more info let me know.
Regards
Chris.
You are asking quite a few questions inside a single question... You should really break them up into several questions. It's easier for people to answer. Anyways, I'll give it a shot.
First of all, you don't have to have all contents in one html; you can load contents via AJAX. See the AJAX > "GET Example" in this demo, as well as the page content loaded via AJAX.
As far as I know, the pages you want to load do not have to be in the same directory structure. The pages you want to load via AJAX need to contain a valid jQTouch page, i.e. the whole page is enclosed in a <div>.
Is there a way I can check the href of
a link when clicked and if it points
to www.mysite.co.uk/about change it to
point to #about and force it to
navigate there?
If I understand you correctly, you essentially want to replace all the links to www.mysite.co.uk/about with #about. This has to be done with jQuery:
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
You may want to do that when each page loads:
$(document).ready(function(e){
$('body>div').bind('pageAnimationEnd', function(event, info){
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
})
});