SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with deleting a recipient object from an array by the recipient's ID value

    Hi Guys,

    I have a form where recipients can be added to the group of recipients http://screencast.com/t/H1QFdzLBg8. I use two inputs for gathering names and emails and the <ul> highlighted in red where I add recipients as <li>. Adding and deleting recipient functions are working fine so far. After recipients are gathered I need to send them via ajax. I can't take recipients from the <ul> and store them in a variable with the form submit, which would be logical because I trim strings that are too long. You can see on the screenshot fourth recipient has name and email strings to long.

    I decided to add recipients to an array at the same time when I add them to the recipients group. That's fine. However I need to delete them from the array at the same time when I delete them from the recipient group. I thought I might add an ID to every recipient <li> and delete an item from the array by the objects ID. That didn't work because if I delete the first object from the array with an ID 0 the second object's ID will be changed to 0, where the recipients ID from the recipients group remains the same value regardless of it's position.

    The other option that I considered was to add an ID property to every recipient. I can find that ID but how will I delete the rest of the objects properties such as a name and an email.

    Creating a recipient in the recipient group

    Code:
    var recipients = [];
    	var i = 0;
    	function createRecipient(name,email) {
    		recipients.push({ID:'rec_'+i,'recipients_name':name,'recipients_email':email});
    		if (name.length > 24) {name = name.substr(0,24) + '...'};
    		if (email.length > 25) {email = email.substr(0,25) + '...'};
    		$("#share_via_email .recipient_group").append("<li id='rec_"+i+"' class='recipient' style='display:none'><span class='avatar'></span><h3 class='recipient_name'>"+name+"</h3><span class='recipient_email'>"+email+"</span><a href='#' class='recipient_close'></a></li>");
    		$("#share_via_email .recipient_group .recipient:last-child").fadeIn(200);
    		i++;
    	}
    Delete a recipient from the recipients group

    Code:
    $("#share_via_email .recipient_group").on("click", ".recipient_close", function() {
    		$(this).parent(".recipient").fadeOut(200, function() {
    			$(this).remove();
    		});
    		numberOfRecipients --;
    		i--;
    	});
    Do you have any ideas? Thanks

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,405
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi Yarik,

    Instead of an array, you could use an object to store the data as key/value pairs, like this:
    Code JavaScript:
    recipients = {};
     
    // Add a recipient
    recipients[email] = name;
     
    //Removing a recipient
    delete recipients[email];

    As email addresses over 25 chars in length get truncated for display, you can't use that value when you want to remove a recipient from the list, so you could store the original, unaltered email on the list element as a data attribute.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    Hi Yarik,

    Instead of an array, you could use an object to store the data as key/value pairs, like this:
    Code JavaScript:
    recipients = {};
     
    // Add a recipient
    recipients[email] = name;
     
    //Removing a recipient
    delete recipients[email];

    As email addresses over 25 chars in length get truncated for display, you can't use that value when you want to remove a recipient from the list, so you could store the original, unaltered email on the list element as a data attribute.
    That makes perfect sense. Thanks so much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •