jQuery: how to slide up/down newly created html?

[eluser]codex[/eluser]
I think it's fairly easy, but somehow I can't see it.

I would like to create some new html (a form), append it to an element (a li) and slide the newly created content into view. CReation and appending the content is working, I just can't get it to slide :-S

Does anyone of the jQuery gurus know what the correct syntax is for this?

Code:

function createEditForm(li_id) {
    // There may be a nicer/cleaner/better way to do this. If so I'd like to hear.
        var form = $(    '<form action="" name="test" id="editform">'+
                        '<p>Naam &lt;input type="text" value="'+ li_id +'"&gt;</p>'+
                        '<p>Adres &lt;input type="text"&gt;</p>'+
                        '<p>Plaats &lt;input type="text"&gt;</p>'+
                        '<p>Telefoon &lt;input type="text"&gt;</p>'+
                        '<p>&lt;input type="submit" name="doedan" value="wijzig"&gt;</p>'+
                        '&lt;a href="#" onclick="deleteEditForm('+ li_id +'); return false"&gt;annuleer</a>'+
                        '&lt;/form&gt;'
                        );
    
        return form;
    }

function rollOutEditForm(li_id) {
        
        var list = $('#'+ li_id);
        var editform = createEditForm(li_id);
        
        $(editform).appendTo(list); // <--- this needs to be slidin'
// I would say $(editform).appendTo(list).slideDown(500); but that's not working

        
        var editid = '#change_'+ li_id;
        $(editid).hide();
        
    }

[eluser]marcmesa[/eluser]
I haven't used jquery for some months so i don't have it too "fresh" but I think it's because the new node (the form) is not being taken into account by jquery because when jquery was loaded te element wasn't a part of the DOM tree. Posible solutions: apply the effects to the nearest parent node (ex. <div id="container">the form or list</div>) that is not dinamically created.
There are other solutions like re-binding, event propagation or using some jquery plugin that does the job (i think one of the plugins was "live query").

[eluser]marcmesa[/eluser]
A better explanation on the jQuery FAQ.

[eluser]MCrittenden[/eluser]
If I understand your question correctly, an easy solution would be to change the following:

Code:

$(editform).appendTo(list);

into this:

Code:

$(editform).appendTo(list).css('display','none');
$(editform).slideDown();

All that does is creates the form but keeps it hidden, and then slides it into view. It seems a little hackish but it works. Just attach a click handler to the list items using something like:

Code:

$(document).ready(function(){
    $('ul li').click(function() {
        rollOutEditForm(this.id);
    })
})

Is that what you were asking or did I misunderstand? I'm still a newbie at CI (first post by the way) but I've done a good bit of jQuery so I'll be glad to help if I misunderstood.

I'm not sure what you're going for with the editid in the last two lines so I wasn't able to test that, and you get some crazy things happening if you click the same <li> more than once, but those can be fixed (you can use slideToggle() instead of slideDown() and only appendTo() if there isn't a form already. That should fix that).

[eluser]codex[/eluser]
[quote author="MCrittenden" date="1210930584"]
into this:

Code:

$(editform).appendTo(list).css('display','none');
$(editform).slideDown();

[/quote]

That works great. Thanks!