Question

我有一个表单可以将项目添加到收藏夹，也可以删除它。

假设这是添加和删除的形式：

@if($checkIfFavIsAdded == 0)
    {!! Form::open(['id' => 'ajax-form-add', 'style' => 'float:right']) !!}
      ...
    <button class="fa fa-star-o fa-2x" tool-tip-toggle="tooltip-demo" id="addFavbutton" title="Add item to favorites" style="color:#fd8809"></button>
    {!! Form::close() !!}
@else
    {!! Form::open(['id' => 'ajax-form-delete', 'style' => 'float:right']) !!}
      ...
    <button class="fa fa-star-o fa-2x" tool-tip-toggle="tooltip-demo" id="addFavbutton" title="Delete item from favorites" style="color:grey"></button>
    {!! Form::close() !!}
@endif

在这里，我正在检查项目是否已添加到收藏夹中，如果是，则应显示相应的表单。它适用于页面重新加载，但我如何在Ajax中执行此操作？我试图隐藏和展示但没有成功。它只是隐藏表单而不显示另一个表单。

<script type="text/javascript">
$("#ajax-form-add").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
        type: "post",
        url: "{{ url('addFavorites') }}",
        dataType: "json",
        data: form.serialize(),
        success: function(data){
            $("#ajax-form-add").hide();
            $("#ajax-form-delete").show();
        },
        error: function(data){
            swal("Error!", "error")
        },
        complete: function (data) {
     }
    });
});
</script>

<script type="text/javascript">
   $("#ajax-form-delete").submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
          type: "post",
          url: "{{ url('deleteFavorites') }}",
          dataType: "json",
          data: form.serialize(),
          success: function(data){

              $("#ajax-form-delete").hide();
              $("#ajax-form-show").show();
          },
          error: function(data){
              swal("Error!", "Item is not available!", "error")
          }
      });
   });
</script>

Answer 1

刀片模板在服务器端呈现，您尝试做的是客户端。

如果您的刀片模板中有该条件，则呈现并发送到浏览器的标记将不包含其他形式。

您需要在ajax响应中返回要显示的标记（IE新表单）。

Answer 2

对于你写的第二个ajax：

$("#ajax-form-show").show();

不，存在ajax-form-show的ID。它应该是：

$("#ajax-form-add").show();

在提交时切换表单 - jQuery（Ajax）

2 个答案: