Loading a Page into a jQuery Dialog

Posted by Dave on Stack Overflow See other posts from Stack Overflow or by Dave
Published on 2010-05-02T21:12:59Z Indexed on 2010/05/02 21:17 UTC
Read the original article Hit count: 598

Filed under:

I tend to follow a fairly "modular" approach to building applications and I recently started working with jQuery. The application I'm working on is going to be fairly large so I'm trying to break pieces out into separate files/modules when possible. One example of this is a "User Settings" dialog.

This dialog has a form, a few tabs, and quite a good number of input fields so I want to develop it in a separate HTML file (PHP actually, but it can be considered HTML for the purposes of this example). It's an entire page in and of itself with all the tags you would expect such as:

<html><head></head><body></body></html>

So I can now develop, what I want to be, the dialog separate from the base application. This dialog has it's own Javascript (A LOT of Javascript, in fact) in the head as well, with jQuery $(document).ready(){} capturing, etc. Everything works flawlessly in isolation. However, when I attempt to load the jQuery modal dialog with the page (inside of the main application page), as one might expect, trouble ensues.

Here's a brief, very simple, example of what it looks like:

editUserDialog.load ("editUser.php", {id : $('#userList').val(), popup : "true"}, function     () {
  editUserDialog.dialog ("option", "title" , "Edit User");
  editUserDialog.dialog ('open');
});

(I'm passing in a "popup" flag to the page so that the page can determine its context -- i.e. as a page or inside of the jQuery dialog).

Question 1: When I moved the code from the "head" into "body" (in the editUser.php page) it actually worked for the most part. It seemed that jQuery was calling the $(document).ready() function in the context of the body of the loaded file and not the head. Is this a bad idea?

Question 2: Is my process for building this application just totally flawed to begin with?

I've scoured the net to attempt to find a "best practices" sort of document to building reasonably large applications using jQuery/PHP without a lot of success so maybe there's something out there someone else is aware of that I've somehow missed.

Thanks for bearing with me while I attempt to describe the issues I've encountered and I hope I've accurately described the problem.

© Stack Overflow or respective owner

Related posts about jQuery