Question

目标我正在尝试以模态进行编辑。单击“保存”后，我希望将更改保存到数据库，模态关闭并在同一页面上显示结果。

结果当前代码打开模式，将数据保存在db中，关闭模式，刷新页面，简而言之，它可以满足我的需要。

**挑战结果刷新后，URL会在末尾添加一个＃，与我的侧面板混淆，从而打开所有链接。看起来就是http://127.0.0.1:8000/todolists# **

这是我的代码的样子

控制器

public function editTodo(request $request){
   $todo = Todo::find ($request->id);
   $todo->item = $request->item;
   $todo->description = $request->description;
   $todo->save();
   return response()->json($todo);
 }

视图是索引页面，而javacript位于页面底部，为简单起见，我将代码分为3部分（HTML表，HTML Modal和JavaScript）。

视图-HTML表格

<div class="row">
  <div class="table table-responsive">
    <table class="table table-bordered" id="table">
      <tr>
        <th width="150px">No</th>
        <th>item</th>
        <th>description</th>
        <th>Create At</th>
        <th class="text-center" width="150px">
          <a href="#" class="create-modal btn btn-success btn-sm">
            <i class="glyphicon glyphicon-plus"></i>
          </a>
        </th>
      </tr>
      {{ csrf_field() }}
      <?php  $no=1; ?>
      @foreach ($todo as $value)
        <tr class="post{{$value->id}}">
          <td>{{ $no++ }}</td>
          <td>{{ $value->item}}</td>
          <td>{{ $value->description }}</td>
          <td>{{ $value->created_at }}</td>
          <td>
            <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-item="{{$value->item}}" data-description="{{$value->description}}">
              <i class="fa fa-eye"></i>
            </a>
            <a href="#" class="edit-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-item="{{$value->item}}" data-description="{{$value->description}}">
              <i class="glyphicon glyphicon-pencil"></i>
            </a>
            <a href="#" class="delete-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-item="{{$value->item}}" data-description="{{$value->description}}">
              <i class="glyphicon glyphicon-trash"></i>
            </a>
          </td>
        </tr>
      @endforeach
    </table>
  </div>

查看-HTML刀片

<div id="myModal"class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="modal">
          <div class="form-group">
            <label class="control-label col-sm-2"for="id">ID</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="fid" disabled>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2"for="item">item</label>
            <div class="col-sm-10">
            <input type="name" class="form-control" id="t">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2"for="description">description</label>
            <div class="col-sm-10">
            <textarea type="name" class="form-control" id="b"></textarea>
            </div>
          </div>
        </form>

查看-JavaScript

$(document).on('click', '.edit-modal', function() {
$('#footer_action_button').text(" Update Post");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
$('.actionBtn').removeClass('btn-danger');
$('.actionBtn').addClass('edit');
$('.modal-title').text('Post Edit');
$('.deleteContent').hide();
$('.form-horizontal').show();
$('#fid').val($(this).data('id'));
$('#t').val($(this).data('item'));
$('#b').val($(this).data('description'));
$('#myModal').modal('show');
});

$('.modal-footer').on('click', '.edit', function() {
  $.ajax({
    type: 'POST',
    url: '/editTodo',
    data: {
'_token': $('input[name=_token]').val(),
'id': $("#fid").val(),
'item': $('#t').val(),
'description': $('#b').val()
    },
success: function(data) {
      $('.item' + data.id).replaceWith(" "+
      "<tr class='post" + data.id + "'>"+
      "<td>" + data.id + "</td>"+
      "<td>" + data.item + "</td>"+
      "<td>" + data.description + "</td>"+
      "<td>" + data.created_at + "</td>"+
      "<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-item='" + data.item + "' data-description='" + data.description + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-item='" + data.item + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-item='" + data.item + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
      "</tr>");
      location.reload();
    }
  });

});

Answer 1

如果您不想导航到URL #，则不要链接到它：

<a href="#"

要么：

编写Unobtrusive JavaScript 并且：

链接到一个URL，在该URL中完全由服务器端代码完成等效的Ajax处理
如果JS成功，请使用event.preventDefault阻止导航

或者：

使用<button type="button">而不是链接

Answer 2

我在页面中使用自动刷新元素时遇到了类似的问题。像这样解决：

更改自：

<a href="#"

到

<a href="javascript:void(0)"

What does “javascript:void(0)” mean?

加载ajax后如何从URL中清除＃？

2 个答案: