I am using CodeIgniter to display a list of items from the database. I want to delete an item based on it’s ID. This is not a problem and works fine without the modal box.
My issue is that I am using a jQuery plugin called reveal (http://goo.gl/3lzRN) to add a modal box to confirm deletion. This works for the first item in the list, but the others have the same ID as the first.
<a href="pages/<?php echo $row->id; ?>" class="delete">
<i class="icon-cancel"></i><span class="delete_tooltip">delete page</span>
</a>
<aside id="modal">
<header id="delete_page">Delete Page</header>
<article id="modal_content">
<p>
Are you sure you want to delete the page<br />'<?php echo $row->title ?>'?
</p>
<p>This action cannot be undone.</p>
<p>
<a href="pages/delete_page/<?php echo $row->id; ?>" >
<i class="icon-cancel"></i>Delete
</a> <a href="pages/#" class="modal_cancel">Cancel</a>
</p>
</article>
</aside>
Above is the link to open the modal box, and the content in it. These are within a foreach loop, but as I know the loop works fine, I haven’t posted it.
You should use a class instead of an ID. IDs should only be present once per page, and thus this is what is causing your problem.
Classes are used for items that appear more than once (reusable items).
I’d recommend also assigning a unique id to the modals too, something like id=”modal-1″ where 1 is the ID from $row->id;
This way, each of your modals can be accessed through the class easily, but can be uniquely identified by their ID.
http://jsfiddle.net/Z7vHT/1/ That should fix your issues.