Flexible ajax using jQuery

December 22, 2012

We recently had to send a delete request to a javascript confirm.

We were using bootstrap so instead of the standard confirm(); command we wanted to display our own module.

We also wanted a universal command that would execute any of the actions that are forwarded by the buttons.

So with all things, you guys get the benefit of our work.

First define the action you want and set it in a send to a javascript function.

For this case we will delete anything by linking to a specific path. user or organization/delete/ userID or organizationID is the basic set up. The dynamic variables are whether it’s a user or organization, and the specific ID.

So we are left with y/delete/x

You want to define that in the first object that the user clicks, before the confirm.

<a onclick="confirmation('/user/delete/<?=$emp->id; ?>');">

This is displayed to obviously delete a certain user based on their ID, you can substitute user with organization and call your organization the same way.
Next we want to make the module, we made ours using twitter bootstrap

<div id="confirm" class="modal hide fade">
<div class="modal-header"><h3>OH WAIT!</h3></div>
Are you sure you want to delete this?

<div class="confirmInputWrapper">

<a class="confirmConfirm btn" value="Delete" data-toggle="modal">Delete</a>
<a class="confirmCancel btn" onClick="javascript: $('#confirm').modal('hide'); $('.modal-backdrop')">Cancel</a>
<div class="clear"></div>
</div>

and lastly we want to make the confirmation button. The link between the object clicked and the actual send to the path.

function confirmation(action)
{
	$(".confirmSubmit").attr("href", ""+action+"");
	$("#confirm").modal('show');
}

This function grabs the delete path, as action, and ads it to the confirm button that is classed as confirmSubmit. It then does a twitter bootstrap call to show the modal before deleting the user.

After this all the user really has to do is click confirm.

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive