Отправка данных POST с использованием JQUERY UI в Django

Question

Я следую примеру, приведенному в JQUERY UI Документация , чтобы создать диалоговую форму. У меня есть method=POST и action= "{% url 'example:new_article' %}" в форме, поэтому я считаю, что форма должна быть отправлена, когда я нажму на кнопку «Добавить статью». Я что-то упустил? Я знаю, что с AJAX я бы сделал что-то вроде из $.ajax({url: new_article} Как я могу сделать это с JQuery и без AJAX? Насколько я понимаю, мне не нужен AJAX, потому что это всплывающая форма. Я не хочу, чтобы окно формы продолжало работать, когда пользователь создает статью. Я хочу сохранить и закрыть окно.

Я искал вокруг, но не могу найти пример, который показывает правильный способ отправки POST-данных в представления Django.

1010 * JS *

<script>
  $( function() {
    var dialog, form,
    exampleName = $( "#exampleName" ),
    articleTitle = $( "#articleTitle" ),
    articleLink = $( "#articleLink" ),
    allFields = $( [] ).add( exampleName ).add( articleTitle ).add( articleLink ),
    tips = $( ".validateTips" );


    function updateTips( t ) {
        tips
            .text( t )
            .addClass( "ui-state-highlight" );
        setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
        }, 500 );
    }

    function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Fields cannot be empty or be longer than 255 characters");
        return false;
        } else {
        return true;
        }
    }


    function addArticle() {
    var valid = true;
    allFields.removeClass( "ui-state-error" );

    valid = valid && checkLength( exampleName, "exampleName", 1, 100 );
    valid = valid && checkLength( articleTitle, "articleTitle", 1, 250 );
    valid = valid && checkLength( articleLink, "articleLink", 1, 250 );

    if ( valid ) {
        console.log("made it through validation"
        dialog.dialog( "close" );
    }
    return valid;
    }

    dialog = $( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 400,
    width: 350,
    modal: true,
    buttons: {
        "Add Article": addArticle,
        Cancel: function() {
        dialog.dialog( "close" );
        }
    },
    close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
    }
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    addArticle();
    });

    $( "#create-article" ).button().on( "click", function() {
    dialog.dialog( "open" );
    });
    } );
</script>

index.html

<div id="dialog-form" title="Add Article">
    <p class="validateTips">All form fields are required.</p>
     <form action= "{% url 'example:new_article' %}" method="post">
        {% csrf_token %}
        <fieldset>
        <label for="exampleName">Example</label>
        <input type="text" name="exampleName" id="exampleName" value="" class="text ui-widget-content ui-corner-all">
        <label for="articleTitle">Article Title</label>
        <input type="text" name="articleTitle" id="articleTitle" value="" class="text ui-widget-content ui-corner-all">
        <label for="articleLink">Article Link</label>
        <input type="articleLink" name="articleLink" id="articleLink" value="" class="text ui-widget-content ui-corner-all">
        <!-- Allow form submission with keyboard without duplicating the dialog button -->
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
    </form>
</div>

urls.py

urlpatterns = [
  path('', views.main, name= "main"),
  path('new_article',views.new_article, name="new_article"),
  ]

views.py

def new_article(request):
    print("made it to views")
    print(request.POST)
    return render (request, 'example/index.html')

Я подозреваю, что проблема вокруг:

    if ( valid ) {
    console.log("made it through validation"
    dialog.dialog( "close" );
}
return valid;
}

Answer 1

Мне нужен AJAX.Я изменил следующее:

html

С:

<form action= "{% url 'example:new_article' %}" method="post">

Кому:

<form id="new_form">

скрипт

От:

if ( valid ) {
    dialog.dialog( "close" );
}
return valid;
}

До:

if ( valid ) { $.ajax({ url: 'new_article', type: 'POST', data: $('#new_form').serialize() }) dialog.dialog( "close" ); } return valid; }