CODEWITHSUNDEEP
jqueryhtmldjangoforms
Casper
Casper

Reputation: 167

HTML Form Submission with JQuery in a Django Application

I use the following pieces of HTML and JQuery code to navigate pages in a website (I am also using Django; hence, the double curly braces). My code works fine only in Safari, but not in Firefox, Chrome, and Opera, even though it seems logically and syntactically correct. Any ideas why it doesn't work? Thank you for your help in advance.

Some more information: I am using the Django development server for now. My OS is macOS High Sierra (10.13.6).

<form id="myform" action="..." method="get">
    <a class="pg-nav" data-nav-value="-1" href="">Previous</a>
    <span id="pg-cur">{{ pageNumber }} / {{ totalNumPages }}</span>
    <a class="pg-nav" data-nav-value="1" href="">Next</a>

    <input id="pg" type="hidden" name="pg" value="0">
</form>


$('.pg-nav').click(function() {
    var curPage = parseInt($('#pg-cur').text());
    var navVal = parseInt($(this).data('nav-value'));
    var newVal = curPage + navVal;
    $('#pg').val(newVal);
    $('#myform').submit();
});

Upvotes: 0

Views: 38

Answers (1)

Selcuk
Selcuk

Reputation: 59219

Your links still try to reload the page because you allow the default behaviour of the a tag to be processed. You can prevent it using the .preventDefault() method:

$('.pg-nav').click(function(e) {
    ...
    $('#myform').submit();
    e.preventDefault();
});

Upvotes: 1

Related Questions