使用模态窗口编辑数据库记录

问题描述：

我想根据一个ID保存到一个按钮值中来编辑某些数据库记录。使用模态窗口编辑数据库记录

 @foreach ($employment as $empl) 
     <button data-toggle="modal" data-target="#edit-empl" href="#edit-empl" class="btn btn-default editbtn-modal" value="{{ $empl->id }}" type="button" name="editbtn">Edit</button> 
     <h3 class="profile-subtitle">{{ $empl->company }}</h3> 
     <p class="profile-text subtitle-desc">{{ $empl->parseDate($empl->from) }} - {{ $empl->parseDate($empl->to) }}</p> 
     @endforeach

正如你在这里看到的，我有一个编辑按钮，附有一个id。当我点击编辑时，我打开一个模式窗口来编辑字段，然后提交表单。的事情是，我不知道怎么去从按钮标识加入模态窗口，这样我就可以比较值并显示正确的领域..

<form class="app-form" action="/profile/employment/edit/{id}" method="POST"> 

    {{ csrf_field() }} 

    <input class="editID" type="hidden" name="editID" value=""> 

    @foreach ($employment as $empl) 
    @if ($empl->id == buttonidhere) 
     <div class="form-group"> 
     <label for="company">Company:</label> 
     <input type="text" name="company" value="{{ $empl->company }}"> 
     </div> 

     <div class="form-group"> 
     <label for="month">From:</label> 
     <input type="date" name="from" value="{{ $empl->from }}"> 
     </div> 

     <div class="form-group"> 
     <label for="to">To:</label> 
     <input type="date" name="to" value="{{ $empl->to }}"> 
     </div> 
    @endif 
    @endforeach 

    <div class="row"> 
    <div class="col-sm-6"> 
     <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes"> 
    </div> 
    </div> 
</form>

我能够通过按钮值进入模态使用javascript ..我把它放到一个隐藏的输入，但是根本没有帮助我，因为我无法得到输入值，以便比较值..

你的意思是你没有得到的'价值editId'在控制器中？ – jaysingkar

不，不在控制器中。我在视图中需要该editID值，所以我可以将它与$ empl-> id进行比较，以便从数据库中显示正确的记录。就像现在一样，没有那个，我抓住所有记录..我只想要具有特定ID的那个。 –

你正在使用远程模式？我的意思是，你的模式和按钮的HTML同时加载？ – jaysingkar

答

解决方法1：使用Ajax
第1步：创建laravel的路线，这将返回一个包含请求使用数据的JSON对象雇员。对于e.g，

/profile/employment/data/{empl_id}

会得到你的id empl_id的到工作数据。

第2步：改变你的形式如下

<form class="app-form" action="/profile/employment/edit/{id}" method="POST"> 
    <input class="editID" type="hidden" name="editID" value=""> 
    <div class="form-group"> 
    <label for="company">Company:</label> 
    <input type="text" name="company" value=""> 
    </div> 

    <div class="form-group"> 
    <label for="month">From:</label> 
    <input type="date" name="from" value=""> 
    </div> 

    <div class="form-group"> 
    <label for="to">To:</label> 
    <input type="date" name="to" value=""> 
    </div> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes"> 
    </div> 
    </div> 
</form>

第3步：使用JavaScript（jQuery的），使用AJAX来获取数据，并将其加载到模态形式。

jQuery代码：

$(document).on("click", ".editbtn-modal", function() { 
    var id = $(this).val(); 
    url = "/profile/employment/data/"+id; 
    $.ajax({ 
    url: url, 
    method: "get"  
    }).done(function(response) { 
    //Setting input values 
    $("input[name='editID']").val(id); 
    $("input[name='company']").val(response.company); 
    $("input[name='to']").val(response.to); 
    $("input[name='from']").val(response.from); 

    //Setting submit url 
    $("modal-form").attr("action","/profile/employment/edit/"+id) 
    }); 
});

解决方案2：使用远程模态
第1步：创建例如另一叶片文件。 editEmployee.blade.php并在其中添加上面的表单。

<form class="app-form" id="modal-form" action="/profile/employment/edit/{{ $empl->id }}" method="POST"> 

    {{ csrf_field() }} 

    <input class="editID" type="hidden" name="editID" value="{{ $empl->id }}"> 
    <div class="form-group"> 
    <label for="company">Company:</label> 
    <input type="text" name="company" value="{{ $empl->company }}"> 
    </div> 

    <div class="form-group"> 
    <label for="month">From:</label> 
    <input type="date" name="from" value="{{ $empl->from }}"> 
    </div> 

    <div class="form-group"> 
    <label for="to">To:</label> 
    <input type="date" name="to" value="{{ $empl->to }}"> 
    </div> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes"> 
    </div> 
    </div> 
</form>

第2步：创建一个控制器，将返回上述形式为HTML。
提示：使用render（）函数。 example

第3步：使用JavaScript（jQuery的）考虑您的ID形式显示之前加载的形式进入模态窗口是“EMP-模式”

$(document).on("click", ".editbtn-modal", function() { 
    var id = $(this).val(); 
    url = "/profile/employment/data/"+id; 
    $('#emp-modal').modal('show').find('.modal-body').load(url); 
});

答

一个解决方案是发送您希望以与将模式发送给ID的方式相同的细节。

，并发送变量模态的正确方法是包括这个在打开模式按钮：

data-variablename="{{$your-variable}}"

使用这个jQuery让你的变量的值模态。其中edit-empl是你的按钮你的模式和数据目标的ID

$('#edit-empl').on('show.bs.modal',function (e) { 
      var variablename= $(e.relatedTarget).data('variablename'); 

      $(e.currentTarget).find('input[id="yourinputID"]').val(variablename);

使用模态窗口编辑数据库记录

相关推荐