CODEWITHSUNDEEP
javascriptjqueryconfirmation
Michaelo
Michaelo

Reputation: 155

How to use "nifty modals" to delete confirmation

I use this: http://tympanus.net/Development/ModalWindowEffects/

But the problem is, how to change standard modal to something like javascript confirm().

This is the HTML:

<!-- Modal -->
    <div class="modal fade" id="mod-delete" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
              <div class="text-center">
                  <div class="i-circle warning"><i class="fa fa-warning"></i></div>
                  <h4>Big warning!</h4>
                  <p>You are going to delete this item!</p>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" id="delete-yes" class="btn btn-warning" data-dismiss="modal">Continue</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

And this is the link that fires this event:

<a class="label label-danger delete-confirmation" data-toggle="modal" data-target="#mod-delete" href="{$base_url}user/delete/{$user.UserID}"><i class="fa fa-times"></i></a>

Then I do this:

// universal delete confirmation dialog
$('#delete-yes').on('click',function(){
    window.location = $(".delete-confirmation").attr('href');
});

But! The selector $('.delete-confirmation') gets every item on the page (I'm deleting users from DB). I want confirm deletion of only one item that is clicked.

Simply: I click to delete user (this link has "href" atribute - contains delete-link). I see modal window, if I click to "Continue", I'll go to delete-link of this item.

Is there anyone who has this problem done?

Upvotes: 0

Views: 544

Answers (1)

germc
germc

Reputation: 1

I would suggest:

  1. Pass the href value of the clicked link to the modal div, you can do it with something like this:

    $('.delete-confirmation').on('click',function(){ $('#mod-delete').attr("nhref", $(this).attr("href)); });

  2. Once you have passed the href value to the modal div, you can use:

    $('#delete-yes').on('click',function(){ window.location = $("#mod-delete").attr('nhref'); });

Probably not the best solution, but it should work (probably some little changes to the code are needed, but the general idea works).

Hope this helps.

Upvotes: 0

Related Questions