1

I have a form in my view for deleting records and I'd like a confirm dialog to show when the delete button is clicked. In my view I have this:

{{ Form::model($event, array('route' => array('events.destroy', $event->id), 'method' => 'Delete')) }} {{ Form::submit('Delete', array('class' => 'btn-small btn-danger delete-event', 'data-toggle' => 'modal', 'data-title' => 'Delete Event', 'data-content' => 'Are you sure you want to delete this event?')) }} {{ Form::close() }}

I'd like to be able to take the data attributes and dynamically populate a Twitter Bootstrap modal dialog using jQuery but I'm unsure how to approach this.

What would you guys do? Basically, when the delete button is clicked I'd like a modal window to appear with the title and content from the data attributes, as well as a cancel button and a delete button. If the user clicks the delete button I'd like to submit the form.

It's important to note that this view contains a table of records, and each record has a delete form/button.

Would really appreciate your help with this one folks. Cheers.

EDIT: I have this now, which almost works but it doesn't submit the form?

$('.delete-event').click(function(event) { event.preventDefault(); var title = $(this).attr('data-title'); var content = $(this).attr('data-content'); $('#event-modal').html(title); $('.modal-body p').html(content); $('.modal-footer .delete').html(title); $('#event-delete').modal('show'); $('.delete').click(function(event) { $('#event-delete').modal('toggle'); $('.delete-event').submit(); }); });
Improve this question
1

2 Answers 2

Reset to default
5

I am not using a form, just a link shaped as a button:

{{ Html::link(URL::route('event.destroy',$event->id), 'Delete', array('class' => 'btn btn-small btn-danger delete-event', 'data-title'=>'Delete Event', 'data-content' => 'Are you sure you want to delete this event?', 'onClick'=>'return false;')) }}

And this javascript:

jQuery('.delete-event').click(function(evnt) { var href = jQuery(this).attr('href'); var message = jQuery(this).attr('data-content'); var title = jQuery(this).attr('data-title'); if (!jQuery('#dataConfirmModal').length) { jQuery('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">'+title+'</h3></div><div class="modal-body">'+message+'</div><div class="modal-footer"><button class="btn btn-success" data-dismiss="modal" aria-hidden="true">No</button><a class="btn btn-danger" id="dataConfirmOK">Yes</a></div></div>'); } jQuery('#dataConfirmModal').find('.modal-body').text(message); jQuery('#dataConfirmOK').attr('href', href); jQuery('#dataConfirmModal').modal({show:true}); })

Here's a working fiddle: http://jsfiddle.net/antonioribeiro/wYbwv/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is exactly the sort of thing I was after. Thanks dude.
Only problem with it, is it doesn't have the nice slide effect it does when the modal div is created in the view.
Also, you're version doesn't actually delete the event?
Slide effect is a bootstrap css thing, you just have to add "fade" to the modal class. And it will use the route generated link to call your controller action, in the example case it will call EventController@destroy action.
1

You're trying to submit a button instead of a form.

Try changing $('.delete-event').submit(); to $('form').submit();

Improve this answer

1 Comment

Cheers dude. Yeah, realised that myself too.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.