0

I am trying to add a confirmation box when deleting a <div> using a <form onsubmission=return confirm("Please confirm");"> like in this thread, but the action attached to my form gets executed before I can see the confirmation dialog box. The <div> are generated dynamically, and the form basically deletes a csv row using Python/Flask to be read back with JQuery/Javascript after modifications. My code looks more or less like this.

First I have a base html:

<div class="container">
    <div id="projects"></div>
</div>

And then I use javascript to append multiple <div> dynamically using information read from a csv through a Python/Flask server:

var ProjName = {{ ProjName|safe }};    
$(document).ready(function(){
    for(i = 0; i < {{ row_count|safe }}; i++) {
        $('#projects').append('<div class="projectDivs" id="'+ i +'"><form onsubmit="return confirm("Do you really want to submit the form?");" action="/dashboard" method="post"><input type="hidden" name="hidden-value" value="'+i+'"><button value="delete" name="submit" class="close">×</button></form><center><h2>'+ ProjName[i] + '</h2></center></div>');
    }
});

In the background, I am using Python/Flask to read, manipulate and serve the info, but I assume my problem is on the client side so no point showing that. The problem I have is when I press the 'x' to delete, the div gets deleted before the dialog box is shown... any help would be greatly welcomed.

Community
  • 1
  • 1
vabm
  • 285
  • 7
  • 16

1 Answers1

1

You need to use event.preventDefault() function. Try to change your code to the below and see if it works:

var ProjName = {{ ProjName|safe }}; 
$(document).ready(function(e) {

e.preventDefault();

for(i = 0; i < {{ row_count|safe }}; i++) {
    $('#projects').append('<div class="projectDivs" id="'+ i +'"><form onsubmit="return confirm("Do you really want to submit the form?");" action="/dashboard" method="post"><input type="hidden" name="hidden-value" value="'+i+'"><button value="delete" name="submit" class="close">×</button></form><center><h2>'+ ProjName[i] + '</h2></center></div>');

  }
});

FYI, this is the Syntax that you could use if the above does not work:

For JavaScript:

window.addEventListener('keydown', function(e) {
    e.preventDefault();
   /* all your code goes here */
}, true);

For jQuery

$(document).on('submit', 'form', function(e) {
    e.preventDefault();
   /* all your code goes here */
});

==============================================

UPDATE:

==============================================

Okay. I see your code again and may be you can ignore my suggestion of e.preventDefault() above. Instead try this:

Suggestion 1:

Add type="button" attribute to your tag. Then onClick() event of your button and hopefully that would do the magic.

Suggestion 2:

Add type="button" attribute to your tag. Then onClick() event of your button, use ajax to delete csv file.

Your code should look something like below. Sorry did not get chance to test the below code. Feel free to hit me up if you get errors and need help.

`
$(function() {
    $('button').click(function() {
        var hiddenFieldValue = $("input[value='hidden-value']");
        $.ajax({
            url: '/dashboard',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});


var ProjName = {{ ProjName|safe }};    
$(document).ready(function(){
    for(i = 0; i < {{ row_count|safe }}; i++) {
        $('#projects').append('
            <div class="projectDivs" id="'+ i +'">
                <form method="post">
                    <input type="hidden" name="hidden-value" value="'+i+'">
                    <button type="button" value="delete" name="submit" class="close">×</button>
                </form>
                <center><h2>+ProjName[i]+</h2></center>
            </div>
        ');
    }
});
`

Here is a good article about using jQuery Ajax with Python and Flask: http://codehandbook.org/python-flask-jquery-ajax-post/

Nikhil Dèvrè
  • 383
  • 1
  • 6