jquery html creating multiples of the same form

Question

I am using ASP.NET MVC, Partial Views and Dialogs. I make a ajax request to the server and it hands me back a partial view. Then I use: $('#elementTag').html(returnData) to refill the bounding div's. However, this partial view contains the inner working for a dialog wrapped in a form element along with the rest of the partial view content. The javascript also contained within the partial view, upon document ready would sets up the dialog.

I started on this design method: bundling the dialog content along with the partial view to keep things together.

Now I started on this issue because I was having problems with one of my dialogs. I could initialize a form element within a dialog form prior to showing the dialog but, when the user requested to save the data from the dialog all elements retreived using a serializeArray were empty.

Using Firebug I noticed that each time I requested the partial view containing the dialog form it was creating another form of the same type (i.e. definetly a memory leak there). My html was being replaced and I beleive that the script was also being duplicated.

So either I am doing this all wrong or there is a problem here. I am using the modal dialog to prompt for information, serializing the data from the dialog and sending it to the server.

What is the best practice here? Should I bundle all the dialog content into the site master and all the javascript into a single js file or is there a way to replace everything?

Answer 1

I would have all the js in a single compressed, gzip served file, that way it gets loaded and cached on the first page.

To help keep a clean separation of script I tend to namespace my script into application.pages or controller.action and inside have init functions that setup the features needed for that page (load tabs, setup modal dialog etc) so it doesnt matter if the page is loaded via ajax or not the same script still gets executed. This was not trivial to setup but has paid dividends. Paul irish has similar thoughts in his blog post here. It may help you also.

Answer 2

Thank you for your reply. I'm new to javascript, well not new just very, very rusty with a lot of old, bad habits which quickly caught up with me.

Not quite sure how your reply solves my problem but that is my short coming (ignorance) not yours and therefor, I consider your reply the answer.

In the world of ajax patterns, knowing javascript patterns and best practices has now become very essential. I'm use to the old way of complete page refresh (i.e. clear the trash to make room for new trash). You can get away with a lot of bad habits, no longer.

Your short reply has prompted me to return back to the basics with a new perspective.