jquery textarea does not updates its value

Question

I have site with some columns on it and theese columns can be editet by a textarea, if the column you want to edit have some content, that old content will be put into the textarea. Then on the save button is stores the value of that text area into a variable, if i alert this variable it alerts the same value as the old content.

The idea is biscally this: FIDDLE

Where the textarea updates a div and when you hit save and get the content in the div when you hit edit. This simple works as it should, but I'm having trupple with my code, and i cant find the error. And there is no error in the console aswell.

The differense on the exmaple i made and the place of my problem is that i use an ajax call to get the old content.

First here is what happens on the edit click:

$('body').on('click', '.edit_column', function() {      

    column_to_edit = $(this).parent().parent().attr('id');
    current_step = "edit";

    $.ajax({
            url: 'pageEditor_ajax.php',
            dataType: 'json',
            async: false,
            type: 'post',
            data: {
                item_id: column_to_edit,
                mode: "edit_item"   
            }, success:function(s) {
                element_type = s.type;
                old_content = s.content;
            }, error:function(e) {  
                alert('Error!');
            }
        });

    if(element_type == 'text') {
        $('.input_type').html('<textarea class="dialog_editor element_content"></textarea>');   
    }


    $('.element_content').val(old_content);

    $('.column_tool_dialog').css('display', 'block');
    $('#edit_column_dialog').css('display', 'block');
    $('#edit_column_dialog').animate({
        left: "-=300px",
        opacity: "1"
    },500);
});

First i find the id of the column i want to edit so I'm shure that im editing the right column i the database.

The current_step variable is only for the looks, have some different dialog boxes.

The i make my ajax call that returns with success.

Then i have an if statement to check what type of column it is, i have 3 types, the two others is image and headline, havn't startet on them yet because this is not working yet.

The if statement should just build the inputs need to edit that type of column.

After the input fields a build it put the old_content into the textarea, this works fine too. The last few line is just for the looks agen to animate to the next dialog box. So my edit step works (I think).

Then you see the textarea, and i have the old content in it. When you click the save button, this happens:

$('#element_edit_button').click(function(e) {   

    e.preventDefault();

    new_content = $('.element_content').val();

    alert(new_content);

    $.ajax({
            url: 'pageEditor_ajax.php',
            dataType: 'json',
            async: false,
            type: 'post',           
            data: {
                item_id: column_to_edit,
                item_content: new_content,
                col_type: element_type,
                mode: "save_item",
                item_attr_alt_tag: alt_tag,
                item_attr_title_tag: title_tag  
            }, success:function(s) {
            }, error:function(e) {  
                alert('Der skete en fejl!');
            }
    });


    $('li#'+column_id+' .preview_content').html(new_content);
    $('li#'+column_id+' > div > small').html(new_content);
});

In this step i have a lot of things just for the looks, so i have excluded them this time. But the problem is fairly simple to explain here, the new_content variable is identic with the old_content? So all the places where is use the new_content the stuff dont get updated.

EDIT Here is the html where it all happens:

<div id=\"edit_column_dialog\" class=\"column_tool_dialog_box\">
                    <div class=\"close\">x</div>
                        <h3>Rediger dit element</h3>
                        <form method=\"post\" id=\"save_element\">
                            <p class=\"error_message\"></p>
                            <div class=\"input_type\"></div>
                            <input id=\"element_edit_button\" class=\"green dialog_button\" type=\"submit\" value=\"Gem element\" />
                        </form>
                    </div>
                </div>

Sorry for the long post, hope someone have an awnser.

Answer 1

As others have said, your jquery and even html could use some cleaning up. With that said, assuming I understand your question correctly, I think you're just missing a line in your #element_edit_button click event:

$('.element_content').val(new_content);

That should do the trick.