I have the parent page where i want to display some results taken from database. Above the table results area i have some filters and also an button named CONTACTFILTER and a hidden input CONTACT. When i press the CONTACTFILTER button an Facebox popup appear with a scrollable list of contacts pretty much in the style of iphone contacts style. I use the slidernav pluggin for that.
I call the facebox popup like this in the parent page :
$('#CONTACTFILTER').click(function () {
$.facebox({ ajax: 'allcontacts.php' });
});
In allcontacts.php i have an ul with a long list of contacts. I used bqsic ul and li for that
<ul>
<li id="a"><a name="a" class="title">A</a>
<ul>
<li><a href="1">Adam</a></li>
<li><a href="2">Alex</a></li>
<li><a href="3">Ali</a></li>
<li><a href="4">Apple</a></li>
<li><a href="5">Arthur</a></li>
<li><a href="6">Ashley</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="7">Barry</a></li>
<li><a href="8">Becky</a></li>
<li><a href="9">Biff</a></li>
<li><a href="10">Billy</a></li>
<li><a href="11">Bozarking</a></li>
<li><a href="12">Bryan</a></li>
</ul>
</li>
</ul>
All good till now ...
What i want to achieve is when click on a contact like Barry the facebox popup should close and transmit the value="7" to the parent's hidden input CONTACT After that i will submit the form and perform the rest of the magic on database records.
Thank you guys in advance
This would be a simple solution:
$(document).on('click', '#facebox a', function(evt) {
evt.preventDefault();
var userId = $(this).attr('href');
$('#user-id-input').attr('value', userId);
$(document).trigger('close.facebox');
});
Here is a working example: http://jsfiddle.net/j35J3/
But I wouldn't recommend to store the user Ids in the href attribute. If you use HTML 5 you could use a custom data attribute:
<a href="#" data-id="123">Name</a>
To access the id in the example:
var userId = $(this).data('id');