CODEWITHSUNDEEP
twitter-bootstrapmodal-dialoglaravellaravel-4
Gareth Daine
Gareth Daine

Reputation: 4196

Bootstrap Modal Dialog in Laravel 4

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();
    });
});

Upvotes: 1

Views: 8854

Answers (2)

Antonio Carlos Ribeiro
Antonio Carlos Ribeiro

Reputation: 87789

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/

Upvotes: 5

darronz
darronz

Reputation: 903

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

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

Upvotes: 1

Related Questions