包括刀片视图的基础上的HTML点击

Include Blade View base on HTML On Click

本文关键字:HTML 点击 基础上 包括刀 视图      更新时间:2023-09-26

我这里有一个局部的叶片视图

{{-- 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的点击?

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

另当别论——服务器代码在浏览器得到这个html之前就已经在工作了。要在点击后添加html,必须通过ajax调用,服务器发送这部分html和javascript将其附加到DOM结构。

您可以使用Handlebars

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

<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中传递动态值