Question

<div style="display:none">
    <form id="login_form" method="post" action="">
            <p id="login_error">Please, enter data</p>
        <p>
            <label for="login_name">Login: </label>
            <input type="text" id="login_name" name="login_name" size="30" />
        </p>
        <p>
            <label for="login_pass">Password: </label>
            <input type="password" id="login_pass" name="login_pass" size="30" />
        </p>
        <p>
            <input type="submit" value="Login" />
        </p>
        <p>
            <em>Leave empty so see resizing</em>
        </p>
    </form>
</div>


<script type="text/javascript">

$("#tip5").fancybox({
    'scrolling'     : 'no',
    'titleShow'     : false,
    'onClosed'      : function() {
        $("#login_error").hide();
    }
});


$("#login_form").bind("submit", function() {

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "/data/login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});


</script>

I’m loading in many entries and along with those each will have a form placed with all the appropriate contact information from the database for that entry. They click the “contact” button and the fancy box pops up with the form.

What is the best way of approaching this? Should I, after determining the number of entries, loop in javascript like $(“#tip”+i).fancybox for each entry?

Answer 1

Let jQuery do the looping for you. Any forms you want fancy boxes applied to assign a class like SetToFancyBox

Then all you need to do is make a single jQuery call with a class selector:

$(".SetToFancyBox").fancybox({...});