Django/HTML: Informationen per Knopfdruck senden?

Auf meiner Seite habe ich ein Modal, das nach einer Kaufbestätigung fragt. Dieses Modal kann durch 10 verschiedene Tastendrücke ausgelöst werden, die jedem Artikel in meinem "Shop" entsprechen. Wenn möglich, möchte ich es so machen, dass der Preis des Artikels, {{ item.price }}, innerhalb des modalen Fensters sichtbar ist. Wie würde ich diese Informationen neben dem Knopfdruck senden? Müsste ich 10 verschiedene Modalitäten definieren?Django/HTML: Informationen per Knopfdruck senden?

<!DOCTYPE html> 

{% extends 'base.html' %} 

{% load staticfiles %} 

{% block content %} 
<div class="row centre-v"> 
    <div class="card shop-card"> 
    <div class="card-block shop-clock"> 
     <h3><span class="shop-tag">Shop</span></h3> 
     {% if items %} 
     {% for item in items %} 
     <div class="alert alert-shop" role="alert"> 
     <span class="shop-title">{{ item.perk }}</span> 
     <span class="shop-cost"><button type="button" class="btn btn-primary btn-shop" data-toggle="modal" data-target="#shopModal">Buy:&nbsp;{{ item.price }}<img class="coin-img shop-coin" src="{% static 'assets/coin.png' %}" height="20px" width="auto"></button></span> 
     <div style="clear: right;"></div> 
     </div> 
     {% endfor %} 
     {% endif %} 
     </div> 
    </div> 
</div> 

<div class="modal fade" id="shopModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Purchase confirmation:</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     This will cost you {{ item.price }} 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
{% endblock %}

Quelle

2017-05-30 iFengo

Wie ich sehe, haben Sie bereits alle Informationen, die Sie in der Vorlage benötigen, und es ist nicht notwendig, die Seite neu zu laden oder AJAX zu verwenden. Ich würde das Onclick-Ereignis in der Schaltfläche überschreiben. Die neue Funktion würde alle Informationen erhalten, die Sie im Modal anzeigen möchten.

Lassen Sie uns sagen Sie Ihren Knopf haben:

<button onclick="showMyModal({{ item.price }})">Buy</button>

Dann müssen Sie die js Funktion erstellen:

function showMyModal(itemPrice){ 
    /* populate the element with the price */ 
    document.getElementById("modal-price-element").innerHTML = itemPrice; 
    /* Show the modal */ 

}

Sie möchten mehr Informationen über die Funktion zum Senden und mehr Daten addieren, modal. Sie können JQuery auch verwenden, wenn Sie damit vertraut sind.

Quelle

2017-05-30 19:26:18

Funktioniert wie ein Charme, danke. – iFengo

Gut zu wissen !!! –

Es ist möglich, 10 verschiedene Modals in einer while-Schleife zu machen, aber das ist eine schlechte Übung. Die richtige Lösung besteht darin, AJAX-Aufrufe an den Server mithilfe von JavaScript vorzunehmen.

Sie müssen ein JavaScript-Skript erstellen, das einen AJAX-Aufruf an den Server mit der ID des Elements ausführt. In Django müssen Sie eine Ansicht schreiben, die den Preis (und andere Informationen) zurückgibt, indem Sie JSON verwenden.

Wenn Sie viele dieser Dinge tun müssen, würde ich empfehlen, im Django REST-Framework zu suchen.

Quelle

2017-05-30 19:03:34

Für mich ist die richtige Lösung, ein modales Markup zu erstellen. Und zeigen Sie auf klicken Sie auf die Schaltfläche laden von Informationen über AJAX-Aufruf an den Server.

Quelle

2017-05-30 19:34:51

Django/HTML: Informationen per Knopfdruck senden?

Antwort

Verwandte Themen