Laravel 5のJavaScriptの問題

私はlaravel 5を約1ヶ月間学習していますが、現在はjavascriptに問題があります。投稿を削除するには、ブレードファイルをクリックしてフォームを追加します。しかし、今私はフォームを使用したくない、私はそれをJavaScriptで置き換えます。「削除」ボタンをタッチするとどのように検出できますか？Laravel 5のJavaScriptの問題

@extends ('layouts.master') 

@section ('head.title') 
Blog 
@stop 

@section ('body.content') 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6 col-sm-offset-3"> 
      </div> 
     </div> 

     <form class="form-show"> 
      <div class="row"> 
       <div class="col-sm-6 col-sm-offset-3"> 
        <h2> {{ $article->title}} </h2> 
        <p> {{ $article->content}} </p> 
       </div> 

       <div class="row"> 
        <div class="col-sm-6 col-sm-offset-3"> 
         <a href=" {{ route('article.edit', $article->id) }}" class="btn btn-info">Cập nhật</a> 
         <button type="submit" class="btn btn-primary">Xoa</button> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
    <script src="jshow.js"></script> 
@stop

出典

2017-08-10 Thanh Bang

それはJavascript

<button id="delete-button" type="submit" class="btn btn-primary">Xoa</button>

に簡単に配置可能であるので、次はこのJavaScript

var deleteButton = document.getElementById("delete-button"); 
deleteButton.onclick = function() { delete(); return false; }

プロセスを追加delete()方法

出典

2017-08-10 06:01:43

感謝。私はそれを試してみましょう。 –

ありがとうございます。それは働いている。 –

ごめんなさい。新しい質問にお答えしますか？投稿のIDを取得し、JS経由でコントローラで削除するにはどうすればいいですか？ –

で削除がこれを試してみてくださいボタンにIDを追加します。

<!DOCTYPE html> 
<html> 
    <body> 


<button onclick="myFun()">Click me</button> 

<p id="demo"></p> 

    <script> 
function myFun() { 
console.log('Clicked'); 
} 
</script>

出典

2017-08-10 06:03:29 ZAhmed

ありがとうございました。しかし、それは動作しません。ブレードファイルで iは AND \t しかし、コンソールでチェックしても何も記録されません。 –

あなたのために働きますか？ – ZAhmed

それは何も動作しません。 –

HTMLフォームがPUT、PATCH、またはDELETE要求を行うことができないので、あなたはまた、これらのHTTP verbs

を偽装するために隠された_methodフィールドを追加する必要があります、ドン」 POSTリクエストを検証するために必要なcsrf-tokenも追加することを忘れないでください。

最初にこのメタタグを<head>の中に追加します。

<meta name="csrf-token" content="{{ csrf_token() }}">

次に、このコードをJSファイルの先頭に配置します。

$.ajaxSetup({ 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    } 
});

さて、あなたはdata-*属性の使用は、AJAXのためにその記事のrouteを保持することができます。助けのための

<button data-route="{{ route('article.destroy', $article->id) }}" class="btn btn-danger deleteArticle">Delete</button>

あなたのJSで

document.querySelector('.deleteArticle').addEventListener('click', function() { 
    var route = this.dataset.route; 

    if (confirm("Are you sure you wish to delete this article?")) { 
     $.ajax({ 
      method: 'POST', 
      url: route, 
      data: { 
       "_method": 'DELETE', 
      }, 
      success: function() { 
       // handle success here 
      }, 
      error: function() { 
       // handle error here 
      }, 
     }); 
    } 
});

出典

2017-08-10 06:54:01

答えて

関連する問題