0

Trying to understand why after my destroy route is called below, that on the client side (jQuery) my .done() method does not run, despite being a part of my ajax call?

My Desired Behavior: My /:id/destroy route should run, destroy the quote by id, and then query all the existing quotes in the db. This should be handed back in the jQuery .done() method to be appended to existing HTML data (to display the new quotes without ever having to reload the page).

What's Happening Instead: When the destroy route runs, the json data is returned, but the .done() method never runs in the jQuery ajax -- additionally the form submits (despite my usage of event.preventDefault(); -- I have also tried return false but the form still sends). The resulting page is a GET response with my desired quotes (so the query itself is working), but I don't know if I'm formatting my JSON improperly or if I'm handling the callback request from the jQuery ajax incorrectly.

Any ideas? (note, ejs, express, body-parser and mongoose are dependencies in this project)

I've got the following HTML and jQuery to run an AJAX request to a /destroy URL as follows:

My Routes:

app.get('/:id/destroy', function(req, res){
    // removes quote by id:
    Quote.remove({_id: req.params.id}, function(err){
        if (err){
            console.log('Remove was unsuccessful...', err);
            res.json(err);
        };
        console.log('DELETED');
        // queries for allQuotes:
        Quote.find({}).sort({'vote':'desc'}).exec(function(err, allQuotes){ 
            if (err){
                console.log(err);
            } else {
                res.json(allQuotes[0]);
            }
        })
    });
});

My jQuery:

$('form.destroy').submit(function(event){
    event.preventDefault();
    $.ajax({
        url: '/'+$(this).attr('mongoID')+'/destroy',
        method: 'GET',
        data: $(this).attr('mongoID').serialize(),
    })
    .done(function(allQuotes){ // this never runs (Why?)
        console.log('Showing quotes now again after delete...');
        buildAllQuotes(allQuotes); // this never runs but appends response to html data
    })
    .fail(function(err){
        console.log('Error with deletion...', err);
    })
    .always(function(){
        console.log('Done');
    })
});

My HTML:

<form action="/'+allQuotes[x]._id+'/destroy" class="destroy" method="GET" mongoID="'+allQuotes[x]._id+'">
    <input type="submit" value="Delete">
</form>
Aniket Sahrawat
  • 12,410
  • 3
  • 41
  • 67
twknab
  • 1,741
  • 1
  • 21
  • 35
  • I am not sure about custom attributes like this `mongoID="'+allQuotes[x]._id+'"`. – Mritunjay Nov 04 '16 at 04:48
  • @Mritunjay yes you can do that, it's kind of wild. You can set any custom attribute you want, but the dom won't do anything with it unless it's a valid html5 attribute...else it'll sit in there, you can store data or manipulate it accordingly and is a nice trick at times when needing unique identifiers – twknab Nov 04 '16 at 04:55
  • May be try adding **dataType: 'json'** (http://stackoverflow.com/a/32580987/2069684), – vijay Nov 04 '16 at 12:07

1 Answers1

1

Remove the action attribute from the form element. This will stop the form from being submitted.

HTML

<form class="destroy" method="GET" mongoID="'+allQuotes[x]._id+'">
    <input type="submit" value="Delete">
</form>

As the form is submitted after the ajax call, your done method might not be firing.

Fiddle with dummy action attribute,

https://jsfiddle.net/balasuar/atg5m6ym/7631/

Aruna
  • 11,959
  • 3
  • 28
  • 42
  • thx for this -- after removing the action attribute, the jquery .submit() isn't firing off, so I may not have my jQuery selector (`form.destroy`) setup properly...going to step back and come back with fresh eyes... – twknab Nov 04 '16 at 05:19
  • @natureminded, it should work without `action` attribute and not sure why it shouldn't. Can you try with a dummy action like this, `action="javascript:void(0);"` – Aruna Nov 04 '16 at 05:31
  • This fiddle is working with/without action attribute, `https://jsfiddle.net/balasuar/atg5m6ym/7631/` – Aruna Nov 04 '16 at 05:32