I have a web site, which has multiple modules on a typical “dashboard” page. All of them communicate with the same database, and same set of tables, some of them do the job of writing, some display, etc.
Should I use iframe to achieve that or combine all the codes or is there other options?
Those modules can interact with each other on a client-side javascript level. For example, I click a button in module A, a textbox in module B will be hidden.
Moreover, how do you achieve such that, when I use module A to write things to the database, module B will know it’s time to fetch new data again.
If the different bits of your web page need to communicate with each other, then I don’t think iframes are a great idea. (I could be missing something though.)
You might want to have a look at Backbone.js. It gives you a model/view framework in JavaScript, with automatic re-rendering of views when their model changes, that might make it easier for you to keep all your modules in sync with each other.
You’d basically replicate your database objects in a Backbone.js model on page load, then have your on-page modules keep in sync with their Backbone.js model, instead of repeatedly polling the server for changes that have happened right there in the page anyway.