Question

I have a modal which pops out a form, allowing an admin to edit/update a news story. It works just fine, updating the database and everything, only the ‘Story’ piece appears outside of the textarea box when in the modal window.

A few pictures will illustrate my point and confusion.

‘Look YAY’ is the current story, being pulled into the area underneath the textarea

adding in a new story

the new story is now in the database, but underneath the textarea box in the modal

yet on the actual form page it is where it is suppose to be

I’ve checked and rechecked my code, but my only thought is that jquery-UI is somehow interfering with the textarea since, by definition, the code within the modal is equivalent to that of the Edit News form.

Here is the form code for the story element

    Story<br/>
    <textarea name="edit_story"/><?php print $row['story'];?></textarea>

and the jquery which pops it open

$('.edit').click(function(event){
        //don't follow the link
        event.preventDefault();
        var $link = $(this).parent();
        //load in the html from the form at edit_news
        var formDOM = $("<div />").load($link.attr('href')+' #edit_form', function() { 
                //clear the dialog box
        $('#dialog-edit').empty();
                // Append to the page 
                $('#dialog-edit').append(formDOM);
                //make the dialog
                $('#dialog-edit').dialog({
                    autoOpen:false,
                    title:$link.attr('title'),
                    width:530,
                    height:465
                })
                //open it up
                $('#dialog-edit').dialog('open');
                $('#edit_form').submit(function(event){
                    //knock out its form processing
                    event.preventDefault();
                    $.ajax({
                type    : "post",  
                        url     : $link.attr('href'),  
                        data    : $(this).serialize(),  
                        success : function() { 
                            //close dialog
                    $('#dialog-edit').dialog('close');
                            }
                    })
                })
        })
    });

What is going on here?

if anyone has any ideas please toss them my way. It may very well be a n00bish programming error, which I will gracefully accept.

Answer 1

You are closing <textarea> tag before printing text into it. Fix:

<textarea name="edit_story"><?php print $row['story'];?></textarea>