jquery facebox variable return

Question

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

Answer 1

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');