Sample code containing expression like {{ $title }} cause blank page in Laravel

put three backticks ``` on their own line before and after the code in your question

Regarding your problem. Review the generated html in your browser

hi @Snapey, thanks for your reply. if I go to view source in the browser, my code looks like this;

<pre class="language-markup"><code>&lt;form action="download/{{$file_name}}" method="GET"&gt;
    &lt;button class="btn btn-sm btn-default" type="submit"&gt;Download&lt;/button&gt;
&lt;/form&gt; </code></pre>

Try

<form action="{{ 'download/' . $file_name  }}" method="GET">

hi @jlrdw,

I tried, now it shows nothing in action

<form action="" method="GET">
    <button class="btn btn-sm btn-default" type="submit">Download</button>
</form> 

again, this is not the only case I'm facing I'm creating posts for angular, there you know we have lots of text interpulation, for example

<div *ngFor="let item of items">
	<p>{{item.name}}</p>

</div>

in above case, item.name inside {{ }} cause blank page,

How are u passing $flie_name to your route?? ( return view()->with('file_name', $file_name) ??? )

If so, are you sure $file_name is a string?

do a dd($file_name) to confirm

If $file_name has formatting (which shouldn't if is just a string ) , you can try { !! $file_name !!}

dear @pauljp

I'm creating posts in a blog, look at http://coffeequery.com/posts/upload-and-download-file-in-laravel link you will understand what I'm talking about. I am just stacked in showing a variable inside {{ }}. in Angular when I have something like below

<li *ngFor="let item of items">
{{item.name}}
</li>

or in vuejs if we have something like below

  <li v-for="item in items" :key="item.id">
    {{ item.name}}
  </li>

item.name inside {{ }} cause page blank

@ziaakbari Are you working in a blade file? If you want blade to ignore the template string so Vue or Angular will interpret it, you need to use an @ symbol before the {{. Not sure if this helps.

  <li v-for="item in items" :key="item.id">
   @{{ item.name}}
  </li>

do you have Vue loaded?

If so, try putting v-pre in the parent tag

" aste the following code in your welcome.blade.php, I suppose you have a list files uploaded, that’s why I’m passing variable $file_name to the route, put the variable $file_name in {{}}. "

So the tutorial assumes you have list of files uploaded. Thats why im askin you to check what $file_name has

before your form you can do a simple:

	{{print_r($file_name)}}

or a

	{{var_dump($file_name)}}

or before you return your route, do a

return dd($file_name)

Sorry, I see its angular. There is an equivalent for that ngNonBindable

Dear @jbloomstrom

@ symbol not skipping, still showing blank page

I tried this

<div *ngFor="let item of items">
	<p ngNonBindable>{{item.name}}</p>
</div>

still blank page

to view post http://coffeequery.com/posts/angular-test

that shouldn't be matter what $file_name containing, I just need that to be skipped or browser should ignore that and show how it is.

prefixing with @ is where you want to pass double braces to be passed for front-end framework and ignored by blade (the opposite of what you want) @jbloomstrom

I suspect your blank page is because you crash javascript. Are you checking the browser console for errors?

I don't know Angular, so I'm confused by the API. The page ngNonBindable uses a different signature

https://docs.angularjs.org/api/ng/directive/ngNonBindable

eg <div ng-non-bindable>Ignored: {{1 + 2}}</div>

I don't see any error in the console, also in dev tools in the element tap body tag is empty, you can see at this link http://coffeequery.com/posts/angular-test

Mr. @snapey I think the problem is with browser feature, because this problem is not showing only in Angular or Laravel or Vue or React. I am looking for a solution in browser to ignore what it is.

for example in this website laracasts.com, how this below expression gets ignoring by browser

{{ $file_name }}

if I try to show such thing on my website that causes to the blank page

use the angular example I linked to earlier

Probably it will more helpful if you show code how the $file_name is being pass to blade and the dd($file_name) result first…

when I have something like {{ 2 + 3 }} there is no problem, and show the result 5 on browser, but when there is something like {{ item.title }} in angular or {{ $title }} in Laravel the problem raises. it means when the variable inside {{ }} is undefined blank page occurs, what I want is; browser should ignore this expression from evaluating.

System won't lie, If you able to output {{ 2 + 3 }} then you should able to output {{ $title }} unless there is no value or something wrong with the variable...

I guess, you are messing up variables between JavaScript and php…

see @siangboon there is no route or controller for this to return or dd() $file_name, I know the variable $file_name is undefined, I just want the browser to ignore this expression from evaluating and show that what it is.

A clear example:

in this discussion you simply typed {{ $title }} where this variable is defined and where it's value is stored? offcourse the variable $title has no value defined somewhere and browser ignore it to check it's value, and beautifully shows. In other word; how laracasts.com allows us to type {{$title}} whereas there is no declaration or definition for it`

what you typed {{ $title }} here is not called variable but to the html form it just treated as plain text, it's depend on the interpreter, in blade, it treat all {{ }} as expression, this is the behavior of blade...

when the variable is undefined, Laravel will throw error, or redirect to 500 page if APP_DEBUG set to false.

Sorry for my mistake,

In my case the expression {{$title}} cause blank page. I want that to be ignored by browser.

when I have something like {{ 2 + 3 }} there is no problem, and show the result 5 on browser

You are clearly not understanding what you are trying to do

The above works because 2+3 is valid javascript

I thought you wanted to see "2+3" in the browser, not have it evaluated

"$title" is NOT valid javascript so should not be evaluated I thought the idea was to present a code sample, not try to execute it?

Mr. @snapey I'm sorry to make you confused. no no I'm not executing, as you said; I just want to show sample code on the browser. I said 2+3 is ok, because browser does a calculation and there are no undefined things, in case of {{ $title }} browser also trying to show what $title containing,

what I want is; the expression {{ $title }} cause to a blank page, how I should tell the browser to ignore it from evaluating and show how it is?. If I still couldn't make you understand please see this link; https://coffeequery.com/posts/angular-test in the above link; If you go to console there is no error, if you look at the element tab body tag is empty, if you view page source you can see that everything is loaded.

you do this by adding ng-non-bindable in your output

Show your code for the page

not solved by adding ng-non-bindable

<div ng-non-bindable> {{ project.name }} </div>

this problem is not only with Angular, in Laravel I have

<div>{{$project->name}}</div>