setting attributes of appended HTML to a variable in jquery?

Question

so, i'm working on a backend create/edit/delete page for a blog - it shows a list of articles with an edit and delete button for each. when the edit button for article 'foo' is clicked, these things happen:

the div expands and the raw HTML of an edit form is appended inside with jquery append().
the DOM has an array of objects, with each object containing the information for one article. the specific object with id 'foo' is fetched and cast to an array 'bar'.

now, what i'm trying to do is to set the values of the appended form to the values within 'bar'. i've tried using .attr(), .val(), but nothing seems to work.

i think the problem might be that i'm doing this all in the same scope. right after my .append() call, i try to access the elements i just appended by ID. is this tripping me up?

within the function, this is how i tried to do it:

$(this).parent().children('#thisone').append("<input id="articletitle">");
$(this).parent().children('#thisone').children('#articletitle').val("my title");

Can you see the highlighting above where your strings are quoted incorrectly? — Brian
– Brian, Commented Sep 24, 2013 at 18:38
In addition to the quoting syntax error, $(this).parent().children('#thisone') makes me assume you have duplicated element ids, which is invalid and can cause problems. — Jason P
– Jason P, Commented Sep 24, 2013 at 18:39
I guess Brian is right. And also keep in mind, that if you have problems with JavaScript/JQuery to use the console in Chrome. (Right-click -> Inspect Element -> Console) — Jay Claiton
– Jay Claiton, Commented Sep 24, 2013 at 18:41
Jason: was selecting a class with the parent.children thing in my original. good point though. — amagumori
– amagumori, Commented Sep 27, 2013 at 2:25

hunter · Accepted Answer · 2013-09-24 18:46:19Z

2

Try building the complete element before you append it:

var $input = $("<input>", { 
    id: "articleTitle",
    value: "my title"
});

$("#thisone").append($input);

edited Sep 24, 2013 at 18:46

answered Sep 24, 2013 at 18:41

hunter

63.7k19 gold badges115 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Claiton Over a year ago

And ID's should always be unique. Therefore you wouldn't need the .parent().children()'s but just $('#thisone').append()

Ganatra · Accepted Answer · 2013-09-24 19:46:36Z

0

Assuming your HTML code will be somewhat like this

<div id="thisone">
    <span id="articletitle">Some Crazy Blog Title</span>
    <a id="edittile" href="#">Edit Title</a>
</div>

Javascript code to question:

$('#edittile').on('click', function() {
    var value = $('#articletitle').text();
    var html = '<form><input type="text" value="'+ value +'">';
    html += '<input type="submit" value="save"></form>';
    $('#articletitle').html(html);
    $(this).hide();
});

I have created a js fiddele code your ref too check it out here: http://jsfiddle.net/4hA6y/

answered Sep 24, 2013 at 19:46

Ganatra

6,9883 gold badges19 silver badges17 bronze badges

Collectives™ on Stack Overflow

setting attributes of appended HTML to a variable in jquery?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related