제출 양식 전환 - jQuery (Ajax)

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

블레이드 템플리트가 서버 측으로 렌더링되므로 클라이언트 측에서 수행하려고합니다.

블레이드 템플릿에 해당 조건이있는 경우 렌더링되고 브라우저로 전송되는 마크 업에는 다른 양식이 포함되지 않습니다.

아약스 응답에서 표시하려는 마크 업 (IE는 새 양식)을 반환해야합니다. 두 번째 아약스를 들어

Answer 2

은 당신이 쓴 :

는

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

아니, ajax-form-show와 ID가 존재합니다. 그것은이어야한다 :

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