[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery form cloning extras

Posted on 2011-10-03
8
Medium Priority
?
317 Views
Last Modified: 2012-05-12
Got the code here: http://jsfiddle.net/vdUuy/11/

How would I add the following span to the participants div and add the click handler so it would remove the participant added?

<span class="remove_participant">&nbsp;</span>

Open in new window


Also, it looks like the click handler isn't working, don't know why.
0
Comment
Question by:EddieShipman
  • 5
  • 3
8 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 36904633
change this:

 p.text(o.fname + ' ' + o.lname);
        p.data('index', i);
        p.click(deleteParticipant);
        list.append(p);

to this

        var s = $('<span>');
        s.addClass('remove_participant');
        s.data('index', i);
        s.click(deleteParticipant);
        p.append(s);
        list.append(p);

I tried updating the fiddle, but there are some other issues (e.g., there's no element with id of "add-participant")

you also want to use e.preventDefault() in any click action triggered by a link to stop the default behavior

someLink.click(function(e){
  // do stuff..
  e.preventDefault();
});
0
 
LVL 19

Expert Comment

by:moagrius
ID: 36904646
just to clarify - the listParticipants function should now look like:

function listParticipants(){
    list.empty();
    for(var i = 0, l = participants.length; i < l; i++){
        var o = participants[i];
        var p = $('<p>');
        p.text(o.fname + ' ' + o.lname);
        var s = $('<span>');
        s.addClass('remove_participant');
        s.data('index', i);
        s.click(deleteParticipant); 
        p.append(s);
        list.append(p);
    }  
}

Open in new window

0
 
LVL 26

Author Comment

by:EddieShipman
ID: 36904883
The fiddle has the add-participant id on the button now but I can't understand why the remove-participant doesn't have the image. I see the styling in FB but not see the image.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 19

Expert Comment

by:moagrius
ID: 36905082
i don't think you linked the right fiddle, then - that one definitely does not have a button with id of add-participant...  and the button doesn't work...  can you double check the link?
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 36905219
I didn't know it changed the URL when you updated.
try this one.
http://jsfiddle.net/S24wu/13/
0
 
LVL 19

Accepted Solution

by:
moagrius earned 2000 total points
ID: 36905269
since it's a span (and not a block level element with set width/height), you need some content in there to make it show up (otherwise it's width and height of 0).

so you can either:

1) make the class display: block with set width and height (and probably a float)
2) just add a space as content s.html('&nbsp;');

here's the fiddle updated with the space

http://jsfiddle.net/S24wu/14/
0
 
LVL 26

Author Closing Comment

by:EddieShipman
ID: 36905285
Saved my butt, again, thanks.
0
 
LVL 19

Expert Comment

by:moagrius
ID: 36905301
glad i could help.  i'm out for the day, but i'll check in again tomorrow if anything else comes up for this.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question