1

I have a form with a lot of options.

In the form, I can make the data private or public so;

  1. Make the data private : yes, no (radio buttons)
  2. If clicked yes, displaying a hidden div with 2 more form options; a. member name search (text input) b. selected members (multi selectbox).

If I click make the data private "yes", and search for a username, it is displaying found results like a suggestion box. When I click on a username (in one of the found results displaying in suggestion box), I can add it successfully to my multi selectbox (selected members)

If I decide to make it public and click make the data private "no" after adding some members to my multi selectbox (selected members), I'm deleting all options, and adding 1 option back in there (Public View).

The problem starts after here. Before submitting the form, if I click make the data private "yes" again, (1; clicked yes, selected some members, 2; clicked no and removed all options from selectbox, 3; clicked yes again), search for some members and click on them, it is adding 2 times in my multi selectbox (selected members).

Interestingly, if I do it 2 times (add some members, click no for privacy and delete options), next time when I want to add some members it is adding 2 times. If I do it 5 times, it is adding 5 times.

Here is my Jquery;

// Private Options
$('input[name=make_private]').bind('click', function() {
    // Make It Private
    if ($(this).val() == 1) {
        $('.frm_make_private_1').fadeIn(1000);
        // Get clicked member
        $('a.member').live('click', function() {
            var username = $(this).text();
            var id = $(this).attr("id");
            // Add it to the Allowed Members Multi Selectbox
            $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected", "selected"));
            // Don't load the page
            return false;
        });
    }
    // Make It Public
    else {
        // Hide everything about Product Privacy
        $('.frm_make_private_1').fadeOut(1000);
        // Remove All Options
        $("#allowedMembers option").each(function() {
            $(this).remove();
        });
        // Add Public Option
        $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
    }
});
Improve this question

2 Answers 2

Reset to default
2

When you are binding events multiple time you should .unbind() first. Otherwise you will have multiple (and maybe same) events bound to the same action

Try

('input[name=make_private]').unbind().bind('click', function () {
// Make It Private
if ($(this).val() == 1) {
    $('.frm_make_private_1').fadeIn(1000);
    // Get clicked member
    $('a.member').unbind().live('click', function () {
        var username = $(this).text();
        var id = $(this).attr("id");
        // Add it to the Allowed Members Multi Selectbox
        $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected","selected"));
        // Don't load the page
        return false;
    });
}
// Make It Public
else {
    // Hide everything about Product Privacy
    $('.frm_make_private_1').fadeOut(1000);
    // Remove All Options
    $("#allowedMembers option").each(function() {
        $(this).remove();
    });         
    // Add Public Option
    $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
}
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hello Ron, firstly thank you for your answer. Where should I exactly use it and how should I use it? I am not an expert, I would be glad if you could help.
Hello Ron, thank you for your reply. Unfortunately adding .unbind() infront of bind('click') and live('click') didn't do the trick :(
Found the way, moving $('a.member').live('click') outside of $('input[name=make_private]').bind('click') did the trick. Thanks for helping. I would like to accept your reply as solution (assisted one at least) but I don't know if it is good way to go. I'm new here, do you have any suggestions?
No worries. Only accept solutions that solve the problem. So people who find this question in the future don't get confused. Vote up anything that is useful.
Thanks a lot, I am too low on reputation to be able to vote for now. Will do it once I can. Once again, thank you.
0

Found the way, moving $('a.member').live('click') outside of $('input[name=make_private]').bind('click') did the trick. Thank you Ron for guiding me.

// Private Options
$('input[name=make_private]').bind('click', function () {
    // Make It Private
    if ($(this).val() == 1) {
        $('.frm_make_private_1').fadeIn(1000);
    }
    // Make It Public
    else {
        // Hide everything about Product Privacy
        $('.frm_make_private_1').fadeOut(1000);
        // Remove All Options
        $("#allowedMembers option").each(function() {
            $(this).remove();
        });         
        // Add Public Option
        $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
    }
});
// Get clicked member
    $('a.member').live('click', function () {
        var username = $(this).text();
        var id = $(this).attr("id");
        // Add it to the Allowed Members Multi Selectbox
        $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected","selected"));
        // Don't load the page
        return false;
    });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.