Modal Window / foundation.reveal.js and passing a variable

Question

Task Overview

I'm using the Code Igniter Framework to build a small client management system. Part of the functionality would be to delete records from the database, before deleting I need to check with the user their okay to delete that record as a precaution. I'd like to do this via a modal window.

Frameworks I'm using

• CodeIgniter MVC Framework (PHP, MYSQL)
• Foundation HTML/CSS Boilerplate
• Foundation's Javascript Libraries (In particular reveal.js)

What I would like to achieve

I'd like to have the user click on the delete link:

 <a href="delete_domain/<?php echo $item->clientID ?>" data-reveal-id="deleteModal" class="small button secondary">Delete</a>

As you can see, the href tag is currently saying, go to the delete_domain function in the main class, and it's passing in the clients ID into the URL, this is used of course on the otherside of the application to delete the record that matches that ID.

Further on in the tag we have:

 data-reveal-id="deleteModal" 

This refers to the same [id=deletemodal] found in the modal window div that has to reside at the bottom of the page just before the closing body tag.

This is the DIV for the Modal window that resides at the bottom of the page?

<div id="deleteModal" class="reveal-modal small">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a href="" ></a>
<a class="close-reveal-modal">&#215;</a>
</div>

The Issue

I'm not really sure if or how it will work, because at the moment the delete link is inside a table row, each one of these rows is generated by a foreach function, so they're multiple of these inside the DOM each with a different /$clientID value.

If I could I'd like to pass that value to a modal window, then of course to the option to finally delete the row.

Can anyone help?

Answer 1

You can grab the data you want from the pressed button and throw it in the modal. There are probably a few ways to do it; here's one of them: http://jsfiddle.net/b37s3/

<a href="delete_domain/<?php echo $item->clientID ?>" data-reveal-id="deleteModal" class="small button secondary deleteLink">Delete</a>


<div id="deleteModal" class="reveal-modal">
    <h2>Are you sure you want to DELETE?</h2>
    <p class="lead">Random Text</p>
    <a class="deleteUrl" href="#"></a>
    <a class="close-reveal-modal">&#215;</a>
</div>

and js:

$(document).foundation();  
$('a.deleteLink').click(function(){
    var link = $('.deleteUrl');
    $(link).attr('href', this.href);
    $(link).html(this.href);
});

This will throw the href from the Delete button pressed into the modals' a href and as the links text.