Laravel syntax within the element generated by jquery

Question

I am trying to add some HTML elements with jquery. My effort might useless. My purpose is to generate select options within the page dynamically as in below. I know that I can list down options with laravel, but if I generate the select options with jquery can I insert laravel syntaxes within the code generated by jquery as in below.

'<div class="form-group col text-center">' +
   '<select name="method_body" id="method_body" class="form-control form-control-sm" required>' +
       '<option disabled selected>Select Method Body</option>' +
       '<option value="">ASTM</option>' +
       '<option value="">Jacobi</option>' +
       '<option value="">JIS</option>' +
    '</select>' +
'</div>'

If I develop that select option with laravel within the html will be like below.

<div class="form-group col text-center">
  <select name="method_body" id="method_body" class="form-control form-control-sm" required>
      <option disabled selected>Select Method Body...</option>
      @foreach ($methodBodys as $methodBody)
         <option value="{{ $methodBody->id }}">{{ $methodBody->method_body }}</option>
      @endforeach
   </select>
</div>

My problem is, can I insert the above foreach loop element generated by jquery? As in below,

'<div class="form-group col text-center">' +
   '<select name="method_body" id="method_body" class="form-control form-control-sm" required>' +
      '<option disabled selected>Select Method Body...</option>'+
      '@foreach ($methodBodys as $methodBody)'+
          '<option value="{{ $methodBody->id }}">{{ $methodBody->method_body }}</option>'+
      '@endforeach'+
    '</select>' +
'</div>' +

But if I add laravel inside the element generated, it will only display

{{ $methodBody->method_body }}

as an options in select. If there is another way of doing this, how? please help me with the problem.

JQuery is client-side JavaScript but Laravel runs on the serverside. You can't use Laravel syntax in JavaScript dynamically. — apokryfos
– apokryfos, Commented Jan 7, 2022 at 14:21
I was looking to clarify what I am thinking. Thanks in advance. — MD40
– MD40, Commented Jan 8, 2022 at 2:55

miken32 · Accepted Answer · 2022-01-07 19:26:43Z

1

PHP operates on the server side, before any data is passed to the client. Added to that, Blade is a proprietary templating language that is processed by Laravel before being rendered as PHP. JavaScript happens entirely in the user's browser.

However, you can pass values from Laravel to your JavaScript as a variable, for the client-side code to manipulate as needed. Use the @json Blade directive to make PHP variables safely available for use in your script:

const methodBodies = @json($methodBodys);
var html = `<div class="form-group col text-center">
<select name="method_body" id="method_body" class="form-control form-control-sm" required>
<option disabled selected>Select Method Body...</option>`;
for (const methodBody of methodBodies) {
    html += `<option value="${methodBody.id}">${methodBody.method_body}</option>`;
}
html += '</select></div>';

answered Jan 7, 2022 at 19:26

miken32

42.5k16 gold badges127 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MD40 Over a year ago

"@json" decorators is experimental. Isn't it? can we use it. I am getting error on this. But concept is appreciated. I can use this code on my devs.

miken32 Over a year ago

It’s not at all “experimental.” It’s a standard blade directive.

Collectives™ on Stack Overflow

Laravel syntax within the element generated by jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related