在单击时包括基于HTML的Blade View

Question

我在这里有部分刀片视图

{{-- Modal --}}
@foreach( $accounts as $account )

<?php

    $id = $account->account_id;
    $follow_me = VSE::follow_me($id)['follow_me'];
    ($follow_me == true) ? $follow_me = 1 : $follow_me = 0;

    $user = DB::table('users')->where('account_id','=',$id)->first();
    if($user!= null){
        $auto_provisioning = $user->auto_provisioning;
    }

    $old_customer_type = $account->customer_type;
    $service_plans = DB::table('service_plans')->get();

?>

<div class="modal fade account-edit-{{$id}} in" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

        <div class="modal-body">

        {!! Form::model($account,array('route' => array('account.update', $id ),'method' => 'PUT','data-id'=>$id )) !!}

                <h3 class="nomargin">Edit account  </h3>

                {{-- Type --}}
                <div class="row mb10">

                    <div class="col-sm-2 mb10">
                        <label class="control-label" id="account_type">Account Type</label>
                         {!! Form::select('account_type',
                            array( 'customer' => 'Customer','admin-super' => 'Admin-super','admin' => 'Admin','admin-readonly' => 'Admin-readonly'),
                            $account->account_type,
                            array('class' => 'form-control input-sm') )
                        !!}
                    </div>

                    <div class="col-sm-2 mb10">
                        <label class="control-label" id="customer_type">Customer Type</label>
                        {!! Form::select('customer_type',
                            array( '1' => 'Business',
                            '2' => 'Residential',
                            '3' => 'Small Business'
                            ),
                            $account->customer_type,
                            array('class' => 'form-control input-sm') )
                        !!}
                    </div>


                    <div class="col-sm-2 mb5">
                        <label class="control-label">Follow-Me</label>
                        <input type="checkbox" id="follow_me_switch-{{$id}}" value="{{ $follow_me }}">
                        <input type="text" name="follow_me_switch" id="follow_me_input-{{$id}}" value="{{ $follow_me }}" hidden >
                    </div>


                    <div class="col-sm-2">
                        <label class="control-label">Auto Provisioning</label>
                        <input type="checkbox" name="auto_provisioning_switch" id="auto_provisioning_switch-{{$id}}" value="{{ $auto_provisioning or '' }}">
                        <input type="text" id="auto_provisioning_input-{{$id}}" name="auto_provisioning_switch_input" hidden >
                    </div>

                    <div class="col-sm-2" style="display: none;" id="service_plan_div-{{$id}}">
                        <label class="control-label">Service Plan</label><br>
                        <select type="text" class="form-control input-sm" name="service_plan" id="service_plan-{{$id}}">
                            @foreach($service_plans as $service_plan )
                                <option value="{{ $service_plan->name or '' }}">
                               {{ ucfirst($service_plan->name) }}
                                </option>
                            @endforeach
                        </select>

                    </div>

                </div>


                {{-- Name --}}
                <label class="control-label req">Name</label>
                <div class="row mb10">
                    <div class="col-sm-6 mb5">
                        <input type="text" class="form-control" name="first_name" placeholder="Firstname" value="{{$account->first_name or ''}}" required>
                    </div>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="last_name" placeholder="Lastname" value="{{$account->last_name or ''}}" required>
                    </div>
                </div>

                <div class="mb10">
                    <label class="control-label">Email Address</label>
                    <input type="text" disabled class="form-control" name="email_address" placeholder="Email" value="{{$account->email_address or ''}}">
                </div>

                <label class="control-label req">Password</label>
                <div class="row mb10">
                    <div class="col-sm-12">
                       <input type="text" class="form-control" name="password" placeholder="Password" value="{{$account->password or ''}}" required>
                    </div>
                </div>

                <label class="control-label req">Address</label>
                <div class="row mb10">
                    <div class="col-sm-6 mb5">
                       <input type="text" class="form-control" name="address1" placeholder="address1" value="{{$account->address1 or ''}}" required>
                    </div>
                    <div class="col-sm-6">
                       <input type="text" class="form-control" name="address2" placeholder="address2" value="{{$account->address2 or ''}}">
                    </div>
                </div>
                <div class="row mb10">
                    <div class="col-sm-4 mb5">
                        <input type="text" class="form-control" name="city" placeholder="city" value="{{$account->city or ''}}" required>
                    </div>
                    <div class="col-sm-2 mb5">
                        <input type="text" class="form-control" name="state" placeholder="state" value="{{$account->state or ''}}" required>
                    </div>
                    <div class="col-sm-2 mb5">
                        <input type="text" class="form-control" name="postal_code" placeholder="postal_code" value="{{$account->postal_code or ''}}" required>
                    </div>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="nation_code" placeholder="nation_code" value="{{$account->nation_code or ''}}" required>
                    </div>

                </div>

                <label class="control-label req">Phone</label>
                <div class="row mb10">
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="phone1" placeholder="Phone Number" value="{{$account->phone1 or ''}}" required>
                    </div>
                </div>

                <br>

                <a data-dismiss="modal" class="btn btn-danger ">Cancel </a>

                <button type="submit" class="btn btn-success ">Done</button>

            {!! Form::hidden('old_customer_type', $old_customer_type )!!}
            {!! Form::hidden('id', $id )!!}
            {!! Form::close();!!}


        </div>
    </div>
  </div>
</div>



@endforeach

---

没什么，只是这样：@include（'account.modal.account.edit'）

---

如何在jQuery On Click上包括该内容？

这可能吗 ？ 我应该开始考虑其他事情吗？

Answer 1

换个角度来看-服务器代码在浏览器获取此html之前起作用。 要在单击后添加html，必须通过ajax调用来完成，其中服务器将这部分html发送给javascript，而javascript将其附加到DOM结构。

Answer 2

您可以通过使用把手来实现

您必须在代码中添加此脚本

<script id="account-tmpl" type="text/x-handlebars-template">@include('account.modal.account.edit')</script>
<script src="{{ URL::asset('js/handlebars-v4.0.5.js') }}"></script>

然后，编译点击功能的把手，例如

Handlebars.compile($("#account-tmpl").html());

而且您必须通过ajax get请求在Blade中传递动态值。