2

This is probably a very basic question and I know how to do it using plain DOM but would like to learn the JQuery way of doing it.

After identifying the set of nodes using the appropriate JQuery selector, I would like to append a textarea, Save and Cancel button to each node with appropriate callback functions attached to the buttons to store values into a database. If the database has a value stored already, it should be pre-populated in the textarea. I can handle the back-end interaction parts, I just wanted to know the best practice for doing this sort of thing as far adding/removing form elements.

Thanks

Improve this question

4 Answers 4

Reset to default
4

Something like this, perhaps:

jQuery(yourNodes).each(function(){

    var self = this,
        loading = $('<div>LOADING</div>').appendTo(self),
        id = self.id.replace(/^edit/,'');

    // Retrieve textarea from server
    jQuery.get('/getDataForTextArea?id=' + id, function(textareaValue){

        loading.remove();

        var textarea = jQuery('<textarea/>')
            .attr('id', 'txt' + id)
            .val(textareaValue)
            .add(
                 jQuery('<button>Save</button>')
                    .attr('id', 'btnSave' + id)
                    .click(function(){ /* Click handler */ })
            )
            .add(
                 jQuery('<button>Cancel</button>')
                    .attr('id', 'btnCancel' + id)
                    .click(function(){
                        /* Remove nodes */
                        tr.remove();
                    })
            );

        var tr = jQuery('<tr colspan="4"><td/></tr>');

        tr.find('td').append(textarea);
        tr.appendTo(self);

    });

});
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

I like this answer best since it is the most complete answer for my question (add form elements and callbacks). Followup questions: 1) If my original set of nodes have ids as editN where N is a integer, I would like to give these dynamic nodes txtN, btnSaveN, etc. How can I extract the N? 2) How would the Cancel button remove all these nodes? 3) For layout purposes, I would like to enclose the textarea/save/cancel in a TR/TD (colspan=4), how can I do that?
Edited as per your requirements :)
J-P, you are the best! Let me chew on this. Quick question...Is <button> some special token for JQuery? I thought the markup to create a button is input type="button"?
It's a valid HTML element, very similar to <input type="button"/> - you can use whichever one you want...
Didn't know that, thanks! One more question, if you don't mind. Instead of adding all the nodes at once, the document.ready() function should just add a image/link to jQuery(yourNodes) and clicking that should do add all the form elemnents as you showed. How can this be done? I can see why JQuery is such a popular library, it is very powerful once you start to "think" JQuery!
|
1

Simply

$('<your nodes>').append('<textarea name="...">' + textarea_value + '</textarea>');

or using $(html) form:

$('<textarea name="...">' + textarea_value + '</textarea>').appendTo('<your nodes>');

You may also use $().clone method if you need repeating values. Take a look at official docs.

Improve this answer

Comments

0

As far as appending textarea, buttons to selected nodes @Nikita Prokopov's answer will do the trick. But as you want to add callbacks and back-end interactions, the best way to do will be to write a plugin.

Improve this answer

Comments

-1

Nikita Prokopov..answered the question. I have been working with jquery for a little while and this is what I have discovered.

Always give actions a name like so:

var SubmitText = $('#form-text-idNumber').submit(function {
                       //do stuff here
                       return false;
                  }

Dont do this:

$('#form-text-idNumber').submit(function {
                       //do stuff here
                       return false;
                  }

if you give your actions a variable it will not interfere with other similar forms on the page

Just give all of your actions and sections a variable and you should be good.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.