2017-01-12 1 views
1

Djangoにコメントフォームがあります。コメントを投稿した後、このモーダルポップアップにテキストが表示されますが、ページがリダイレクトされるまでわずか数秒間表示されます。しかし、私は手動で "十字"ボタン(またはモーダルボックスの外のどこか)をクリックするまで、モーダルをそこに置いておき、指定した場所にページをリダイレクトする必要があります。Django - 手動でjavascriptモーダルを閉じた後にリダイレクトする

views.py:

def add_comment_to_project(request,pk): 
post = get_object_or_404(Project, pk=pk) 
if request.method == "POST": 
    form = CommentForm(request.POST) 
    if form.is_valid(): 
     comment = form.save(commit=False) 
     comment.post = post 
     comment.save() 
     return redirect('project_detail', pk=pk) //here it redirects. 
else: 
    form=CommentForm() 
return render(request, 'portfolio/add_comment_to_project.html', {'form':form}) 

add_comment_to_project.html:

{% extends 'portfolio/base.html' %} 

{% block content %} 
    <h1>New Comment</h1> 
    <form method="POST" class="project-form"> 
     {% csrf_token %} 
     {{ form.as_p }} 
     <button id="myBtn" type="submit" class="save btn btn-default">Send</button> 
    </form> 

<!-- the Modal (prompt after clicking the send button) --> 
    <div id="mymodal" class="modal"> 
     <!-- Modal Content --> 
     <div class="modal-content"> 
      <span class="close">&times;</span> 
      <p>Thank you for your response ! :).<br>It has been recorded. It will be displayed once it has been approved by the author.</p> 
     </div> 
    </div> 
{% endblock %} 

のjavascript:私は同じのために多くのことを探索したが、関連する答えを見つけることができませんでした

// Get the modal 
var modal = document.getElementById('mymodal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; //as initially, the display is none. 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
    event.preventdefault(); 
    /*window.location.reload();*/ 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

Djangoでこれを達成する方法については、

「Project_detail.html」にリダイレクトされるのは、コメントを送信した直後ではなく、手動でモーダルを閉じた後でなければなりません。助けてください。ありがとうございます。

答えて

1

代わりのボタンを提出:

<button id="myBtn" type="submit" class="save btn btn-default">Send</button> 

あなただけのモーダルウィンドウトリガするボタンまたはリンクを実装する必要があります:あなたはモーダルをポップアップして送信する必要がありますJSでその後

<a class="send_comment">Send comment</a> 

をモーダルで閉じるボタンをクリックすると投稿する:

function send_comment_modal() { 
     $(".send_comment").click(function() { 
      $('.modal') 
       .modal('show') 
      ; 
     }); 

     $('.modal .submit').click(function() {  
      $.post(window.location.href, temp, function(result){ 
       if(result.success == 'ok') { 
        return; 
       } 
      }) 
     }); 
    } 

私はコードをテストしなかったあなたは私のスニペットの背後にあるアイデアを得ることができます!

+0

私はあなたのコードの背後にあるロジックを理解しましたが、そのスニペットのjQueryとして、私はあまりよく知らないので、スニペットにコメントして何が起こっているのか正確に説明できますか?主に '$ .post(window ...)'から始まる2番目の部分です。ありがとう –

+0

私が書いたように、リンクをクリックするとモーダルウィンドウがポップアップします。モーダルウィンドウのボタンをクリックすると、ポストリクエストが送信されます。しかし、私のコードにはポストリクエストで渡すべきコンテキスト(一時変数)は含まれていません。 –

関連する問題