laravel blade template conflict jquery delimiter

Question

I using laravel 4 and typeahead.js, but get error message becouse the {{}} delimiters are the same of the JQuery.

 <script type="text/javascript"> 
  jQuery(document).ready(function($) {
  $('#pessoa_id').typeahead([
   {
     name: 'planets',
     remote: '/sistema/lancamento/pessoa/%QUERY',
     template: '<p><strong> {{pessoa_id}} </strong> – {{nome}} </p>',
  ]);

Any sugestion ?

Thanks. Helder

While I answered below, this is something of a duplicate of http://stackoverflow.com/questions/20432935/laravel-4-blade-and-hogan-js-syntax — Nathan Loding, Dec 09 '13 at 01:17

score 9 · Accepted Answer · answered Dec 09 '13 at 01:16

You can change the delimiters as montogeek suggests, but it's probably easiest to just prepend it with an @ symbol.

<script type="text/javascript"> 
  jQuery(document).ready(function($) {
  $('#pessoa_id').typeahead([
   {
     name: 'planets',
     remote: '/sistema/lancamento/pessoa/%QUERY',
     template: '<p><strong> @{{pessoa_id}} </strong> – @{{nome}} </p>',
  ]);

Laravel will not try to parse it.

http://laravel.com/docs/templates#other-blade-control-structures

score 1 · Answer 2 · answered Dec 08 '13 at 21:51

You can change the delimiters of Blade in the controller or in a route

Route::get('/', function()
{
    Blade::setEscapedContentTags('[[', ']]');
    Blade::setContentTags('[[[', ']]]');

    return View::make('home');
});

That will change the delimiters that use Blade for that view.

Hope that helps!

Wader · Answer 3 · 2013-12-08T22:05:32.003

You can use Json syntax within a blade file, only {{ }} and {{{ }}} are used to evaluate PHP..

But you do have some badly formatted Json which is probably causing your bracket miss match problem.

[{
    name: "planets",
    remote: "/sistema/lancamento/pessoa/%QUERY",
    template: "<p><strong> {{pessoa_id}} </strong> – {{nome}} </p>"
}]

EDIT:

After looking at typeahead.js I see that you will need to change delimiters as per @montogeek answer too.

laravel blade template conflict jquery delimiter

3 Answers3