0

I am trying to use a jquery dialog to edit the contents of a web page. I want to have an edit button that takes the contents from the list below (only the name and the bios, not the images) and puts those into a jquery dialog. This dialog would have an editable text field and an editable text area for the name and bio, respectively, for entry in the list. I lmpw that the way to do this would be something like 

$("#list").each(function() {
    $("#dialog-list").append($(this).text());
}

but I can't figure out how to do this when I need to add both a name and a bio for each person. It is complicated by the fact that in each li of the original list, I have an inner ul. I need this because I want to put the image next to the name and bio. So, my two questions are: is there a way to do what I described here and would there be an easier method if I had a better way of putting the image next to the text in the original list? Thanks for the help.

<ul id="list">
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio</p>
        </li>
        </ul>   
    </li>
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio2</p>
        </li>
        </ul>   
    </li>
</ul>
Improve this question

1 Answer 1

Reset to default
1

You may try this (DEMO)

$(function(){
    $('.edit').on('click', function(){
        var el = $(this),
            div = $('<div/>', {
                'id':'dlg',
                'class':'dlgEditor'
            }).append($('<label/>', {
                'text':'Name',
                'style':'display:block'
            })).append($('<input/>', {
                'type':'text',
                'style':'width:250px',
                'id':'name',
                'value':el.closest('li').find('h2').text()
            })).append($('<label/>', {
                'text':'Bio',
                'style':'display:block'
            }))
            .append($('<textarea/>', {
                'id':'bio',
                'style':'width:250px',
                'html':el.closest('li').find('p').text()
            })).appendTo('body')
            .dialog({
                title:'Edit',
                buttons: [
                   {
                       text: "Save",
                       click: function(){
                           var li = $('li.editing'),
                               name = $(this).find('#name').val(),
                               bio = $(this).find('#bio').val();
                           li.find('h2').text(name);
                           li.find('p').text(bio);
                       }
                   },
                   {
                       text: "Close",
                       click: function(){
                           $(this).dialog('close');
                           $('li.editing').removeClass('editing');
                       }
                   }
               ]
        });
        el.closest('li').addClass('editing');
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.