CODEWITHSUNDEEP
javascriptjquerynode.jsajaxexpress
Weichen Christopher Xu
Weichen Christopher Xu

Reputation: 51

Ajax DELETE request seems to remove first item on the list only

I have been reusing these codes for different projects but for this one it just doesn't seem to work. I am using Express with Mongoose and in which I use to store a list of university course details. This is the Schema.

exports = module.exports = function(app, mongoose) {
  var moduleSchema = new mongoose.Schema({
    pivot: { type: String, default: '' },
    module_name: { type: String, required:true},
    module_code: {type: String, required: true},
    description: {type: String}
  });
  moduleSchema.plugin(require('./plugins/pagedFind'));
  moduleSchema.index({ pivot: 1 });
  moduleSchema.index({ module_name: 1 });
  moduleSchema.index({ module_code: 1 });
  moduleSchema.index({ description: 1 });
  moduleSchema.index({ search: 1 });
  moduleSchema.set('autoIndex', (app.get('env') === 'development'));
  app.db.model('Module', moduleSchema);
};

The delete request is made through the router in this way:

app.delete('/modules/delete/:id', require('./views/modules/index').delete);

Then in ./views/modules/index I have the 'delete' function written:

exports.delete = function(req, res){
  var workflow = req.app.utility.workflow(req, res);

  workflow.on('validate', function() {
    workflow.emit('deleteModule');
  });

  workflow.on('deleteModule', function(){
    req.app.db.models.Module.findOneAndRemove({_id: req.params.id}, function(err){
      if(err){
        return workflow.emit('exception', err);
      }
        req.flash('success', 'Module Deleted!');
        res.redirect('/modules/');
    });
  });
  workflow.emit('validate');

};

So for the function to run I have to make the ajax call as such:

$(document).ready(function(){
	$("#deleteModule").on('click', function(e){
		e.preventDefault();
		var deleteId = $('#deleteModule').data('delete');
		$.ajax({
			url: '/modules/delete/'+ deleteId,
			type:'delete',
			success: function(result){
				console.log(result);
			},
      error: function(error){
        console.log(error);
      }
		});
		window.location = '/modules/';
	});
});

And here is the jade code for displaying the list of items:

  ul.list-group
    each module, i in data
      li.list-group-item
        strong #{module.module_code} - #{module.module_name}
        hr
        p #{module.description}
        a(href='/modules/edit/#{module._id}', class='btn btn-primary') Edit
        a(id='deleteModule', data-delete='#{module._id}', class='btn btn-danger pull-right', href="#") Delete

Everything seem to work except that now I can only delete the top item on the page through the UI, clicking any other delete button redirects me to the top and nothing happens.

Upvotes: 1

Views: 304

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

As id must be unique in an HTML Page so use class instead of id and bind delete functionality with it like,

// use .deleteModule instead of #deleteModule
$(".deleteModule").on('click', function(e){
    e.preventDefault();
    var deleteId = $(this).data('delete'); // here use this instead of  using id #deleteModule
    $.ajax({
        url: '/modules/delete/'+ deleteId,
        type:'delete',
        success: function(result){
            console.log(result);
        },
        error: function(error){
          console.log(error);
        }
    });
    window.location = '/modules/';
});

And in HTML Template add class deleteModule like,

ul.list-group
    each module, i in data
      li.list-group-item
        strong #{module.module_code} - #{module.module_name}
        hr
        p #{module.description}
        a(href='/modules/edit/#{module._id}', class='btn btn-primary') Edit
        a(id='deleteModule', data-delete='#{module._id}', class='btn btn-danger pull-right deleteModule', href="#") Delete

Upvotes: 1

Related Questions