javascript - 单击时包含基于 HTML 的 Blade View

Question

我这里有部分 Blade View

{{-- 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 将其附加到 DOM 结构。