Question

I have almost solved my task to partial load a html with jquery (1.8.0).

This is the html I would receive from my server:

<form id="save-form" action="/sales_item/edit/9/" method="post">
  <p>
     <label for="id_item_description">Item Description:</label>
     <input id="id_item_description" type="text" maxlength="40" value="test2y" name="item_description">
  </p>
  <input type="submit" value="save">
</form>

However when I load the above with the following jquery in my <tr> element…

function row_edit() {
    // e.g. url = '/sales_item/edit/8' 
    var url = $(this).attr("href") + "/";

    //e.g. get whole row to be replaced with editing fields
    var row = $(this).closest('tr')

    row.load(
        url,        
        function () {
            $("#save-form").submit(url, row_save);
        }
    );
    return false;
}

, the hierarchy is completely lost, see how form tag is closed before the content.

<tr>
   <form id="save-form" action="/sales_item/edit/9/" method="post"></form>      
   <p>
     <label for="id_item_description">Item Description:</label>
     <input id="id_item_description" type="text" maxlength="40" value="test2y" name="item_description">
   </p>
   <input type="submit" value="save">
</tr>

Any idea what I am doing wrong in my load?

Answer 1

A <tr> cannot contain <form> elements. Most browsers try to solve it to a certain extent, but it’s not reliable, and it’s plainly invalid after all.

You’d need to create a <td> first:

$("<td>").appendTo(row).load(...);