Question

I am developing a survey/contacting form for customer webpage(s). Main idea is that the form can be applied to website by adding only a single line of code to customers website (like fb like-button).

I know there are several similar implementations but i want to make my own and other hand to learn the technics of this kind of ‘applications’.

A php-file is called on customer website. All necessary javascript is passed to customer website and the div and it’s content is written by it (before this point a mysql query is used to fetch some data from database which are also displayed inside div, thats why the php is needed). Div contains also a iframe (which holds main content) and the content is loaded from different server (to avoid XSS).

Div is opened by clicking open-button on it and rest of it will be slide in from the behind browser borders (so it is not a (modal) popup).

JQuery is needed to control main div movements and it is loaded same time when main div. JQuery is loaded also in iframe because it is needed to customizing feedback form in iframe.

I am asking now…

1. Is there any drawbacks which might cause problems later?
2. Is there any needs for improvements?
3. Will double JQuery cause problems or can it made some other way?
4. Any other notices of this kind implementation?

I would most kindly give more information if needed.

Answer 1

Will double JQuery cause problems or can it made some other way?

Yes, but not the way you mean. It’s perfectly fine to have an instance of jQuery in the parent window and another instance in the child window. That’s the best way of doing cross-document scripting, because jQuery has several functions that don’t work well when accessing nodes from a different document. The browser’s not going to fetch it twice, and the memory/execution overhead isn’t much these days.

The real problem is, you’re proposing to load jQuery into someone else’s page. Your code in the parent window is a guest on a window owned by someone else, and that means you have to program more defensively to avoid clashing with script on the parent page.

Loading a big hairy framework like jQuery into someone else’s page as a guest script is, in my opinion, fragile and rude. You are likely to interfere with scripts on the host page, not least other copies of jQuery (possibly of differing/incompatible versions). Use of noConflict to run two separate copies of jQuery in a page improves matters but it doesn’t solve all the problems as two jQueries share the same document nodes.

Inside the iframe, go crazy, it’s your document. In the host window, be conservative. Make the minimum amount of change necessary to implement the desired behaviour. It’s not so difficult to write a sliding div without a large framework.