Как использовать представления как AJAX вызов в django? - PullRequest
0 голосов
/ 17 января 2020

У меня есть приложение Django, как показано на изображении my Django app

Я хочу использовать значок удаления, чтобы отобразить всплывающее окно подтверждения, а затем удалить выбранную запись из базы данных. В общем, я бы использовал для этого вызов AJAX и JS. Как я могу добиться этого в Django?

Код шаблона: index. html

    <!DOCTYPE html>
{% load staticfiles %}
{% load pm_extras %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'portfolio_management_statics/css/style.css' %}">
</head>
<body>
    <div class="container">
        <h1>Portfolio</h1>
        <form method="post">{% csrf_token %}
<!--            <label for="stock-name">Stock Name: </label><input id="stock-name" name="stock-name" type="text">-->
<!--            <label for="trans-price">Transaction Price </label><input id="trans-price" type="number">-->
<!--            <label for="trans-date">Transaction Date </label><input id="trans-date" type="date">-->
<!--            <label for="quantity">Quantity </label><input id="quantity" type="number">-->
            {{ stock_add_form.as_p }}
            <input type="submit" value="Add Stock">
        </form>
    </div>
    <div class="container">
        <table>
            <tr>
                <th>Stock Name</th>
                <th>Transaction Price</th>
                <th>LTP</th>
                <th>Transaction Quantity</th>
                <th>Transaction Date</th>
                <th>Invested Value</th>
                <th>Current Market Value</th>
                <th>Capital Gains</th>
                <th>Capital Gains %</th>
                <th></th>
            </tr>
            {% for stock in portfolio %}
            <tr>
                <td>{{ stock.stock_name }}</td>
                <td>{{ stock.trans_price1 }}</td>
                <td>{{ stock_ltps | dict_key:stock.stock_name }}</td>
                <td>{{ stock.trans_quantity1 }}</td>
                <td>{{ stock.trans_date }}</td>
                <td>{{ stock_invested_value | dict_key:stock.stock_name }}</td>
                <td>{{ stock_current_value | dict_key:stock.stock_name }}</td>
                <td>{{ stock_gains | dict_key:stock.stock_name }}</td>
                <td>{{ stock_gains_per | dict_key:stock.stock_name }} %</td>
                <td><i class="glyphicon glyphicon-trash"></i></td>
            </tr>
            {% endfor %}
            <tr><th colspan="5">Total</th><th>{{total.total_investment}}</th><th>{{total.total_current_market_value}}</th>
                <th>{{total.total_stock_gain}}</th><th>{{total.total_stock_gain_per}} %</th></tr>
        </table>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
      crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 18 января 2020

Код будет слишком много для ввода, но, подумав, кнопка удаления будет кнопкой с «onClick» с полем «Подтвердить» HTML, при котором запускается функция ajax. Вызов ajax будет иметь поле 'data' с идентификатором строки для удаления и после завершения в поле 'sucess' ajax записать a для l oop в записи таблицы обновления, используя внутренний атрибут HTML в js ,

0 голосов
/ 27 января 2020

Как описано @ har sh, я обнаружил, что AJAX - лучший способ внесения асинхронных изменений в базу данных. Но отразить эти изменения без перезагрузки все еще остается незаконченной задачей.

Я полагаю, что единственное решение для этого - интерфейсная библиотека, подобная реагированию.

views.py

def delete_stock_from_portfolio(request):
Portfolio.objects.filter(stock_name="Comfort Fincap").delete()
payload = {'success': True}
return HttpResponse(json.dumps(payload), content_type='application/json')

script

function post_ajax() {
            var xhr = new XMLHttpRequest()
            xhr.open('POST', 'delete', true)
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader("X-CSRFToken", csrftoken)

            xhr.onload = function() {
                if (this.status == 200) {
                    console.log(this.responseText)
                }
            }

            xhr.send()
        }

        function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...