views:

1187

answers:

2

I'm using jQuery's form plugin to submit a form asynchronously. The server sends back HTML which goes into a div #boardcontainer by setting the target of an ajaxForm call. This works fine.

...
    var options = { 
      target:        '#boardcontainer',    // target element(s) to be updated with server response 
      beforeSubmit:  showRequest,  // pre-submit callback 
      success:       showResponse  // post-submit callback 
      };
    $('#myForm').ajaxForm(options); 
...

Problem is, the HTML that comes back from the server contains two divs:

<div id="board">
...
</div>
<div id="status">
...
</div>

"#board" is a giant HTML table prerendered by the server. "#status" is a short message and should ideally go into a div other than #boardcontainer.

What's the best way to handle this situation? Can jquery change a div's parent? If so I can change the parent in the post-submit callback, but I can't seem to find a way to do it.

+2  A: 

In your success callback you could rearrange the divs using appendTo. Alternatively you could return json and build the divs in your success callback.

 $('#status').appendTo('#realTarget');

EDIT: Upon checking, appendTo itself does what you need it to do without losing the event handlers.

tvanfosson
I'd say you SHOULD be returning JSON. It's the pages job to render data into html, you shouldn't be writing html in your code.
Andrew Bullock
In ASP.NET MVC the action could be rendering a partial view, in this case returning HTML would be perfectly acceptable since it is view code that is doing the rendering. It's hard to tell from the sample code if this is the case or not.
tvanfosson
Are you suggesting that you convert the JSON into HTML in the javascript? Many of our ajax calls that require loading of complex HTML execute scripts that include an HTML template and return that HTML. It allows our designers to change the design without needing a programmer.
jonstjohn
@jonstjohn -- I assume that you're referencing @Andrew's comment. If so it would be helpful to clarify. As for me I only offered it as a possibility. What you're doing seems reasonable, but it does raise the question of why you are rearranging your designer's views in code.
tvanfosson
@Andrew: i think i take issue with the blanket statement 'you shouldn't be writing html in your code'. What's the point of jquery.load() then? How could you properly use jquery forms w/ just JSON? I think it's a nice design goal, but as a practical matter, servers are very good at building html.
Scott Evernden
@ScottEvernden: I agree; in fact in this case the HTML returned is over 600 elements and it would be pretty slow and pointless to rearrange it with javascript.
Brandon Thomson
@tvanfosson: the appendTo is close but I neglected to mention the form is submitted multiple times and appendTo adds the status to the div each time instead of replacing it. I tried some other combinations including replace/replaceWith but couldn't seem to get the desired behavior.
Brandon Thomson
A: 

I ended up building the divs with json (with the html for the divs embeded as strings, though)

Here's the code:

  $(document).ready(function() { 
    var options = { 
      beforeSubmit:  showRequest,  // pre-submit callback 
      success:       showResponse,  // post-submit callback 
      dataType:      'json'
      }; 
    $('#myForm').ajaxForm(options); 
  }); 

  function showResponse(data)  { 
    $('#statusTarget').html(data.status)
    $('#boardcontainer').html(data.board)

    });

It works and both the #statusTarget and the #boardTarget are replaced with the new html every time the form is submitted.

Brandon Thomson