Develop Reference

How to show panel with dynamic content (HTML) in it

I want to show drop-down menu with HTML content in it when the user presses my addon's button on browser's toolbar.
It seems that I need to use panel as suggested in the documentation but the problem is that my content is dynamic and can change over time while addon works. AFAIK panel can only work with predefined HTML files and change its content via scripts provided by contentScript property, but even then it is clearly stated in the documentation that it can lead to the non-approved addon:
Warning: Unless your content script is extremely simple and consists
only of a static string, don't use contentScript: if you do, you may
have problems getting your add-on approved on AMO.
Instead, keep the script in a separate file and load it using contentScriptFile. This makes your code easier to maintain, secure,
debug and review.
What can I do then?

The paragraph you quote refers to defining complex scripts inline with the contentScript parameter. If you use contentScriptFile to load the script which then modifies the HTML that should be fine.

Extracting the header and the footer of html page

How to extract the header and the footer from this page to insert it in another page?
I'm a bit confused because when I copy and paste the header div it never has the same structure and graphics in the new page? Am I missing something here?

Typically when you copy/paste the div you're getting the HTML, but not the CSS styling (unless the styling is in-line).
There is a Chrome extension called "CSS + HTML" that allows you to, in the developer console, generate a version of the div that has all CSS turned into in-line CSS, so that you can copy/paste a pretty accurate version.
(Caveats: I've had some issues with the extension, so I don't enable it except when I need it, and the HTML produced is a) awful, because it has lots of unnecessary inline CSS, and b) not always a precise match. But it's pretty good.)

Yes, you are missing something. The CSS, images, and links... They are using relative links. You would need to be sure to replace those links.
The images are linked relatively so unless you copy them local you will not have access to them.
You would also need the Style Sheets as they are linked relatively in the head.
Not that the links in some cases are to .php files. Unless you know the php running in the background you are going to lose that functionality too.

Load pages via AJAX and execute javascript and CSS

I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.

I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');

I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.

If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.

I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.

Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.

jQuery Copy text inside iframe to main document?

Hopefully someone here can help me with this challenge!
I have a parent page which is the checkout page for an e-commerce site. It's run on zencart and for every order placed a table row is generated through ZenCart. I've setup an EACH function which generates an iframe for an artwork uploader for each TR (order) found. The uploader works and the correct number of instances are being generated.
I wanted to avoid an iFrame, but the uploader script I purchased will not permit me to load it directly into the zencart page template, or via AJAX (tried both). There's some kind of major resource/path situation going on when doing it this way... so I've resorted to iframes.
I'm able to call JS on file-upload-complete. At that point I'm trying to capture the name of the filename that was just uploaded and place it inside the TR. The problem I'm running into are permission error when trying to access the iframe contents.
I've tried everything I've come across on this site and many others, so believe it isn't a problem with the selectors/frame selection... Firebug is telling me that I'm getting permission errors when trying to access the iframe, yet they're both on the same domain and the src is being set by a relative path....
I'm completely lost, any suggestions would be appreciated! Thanks!
www.prothings.com/store
Add items to the cart and go to checkout.....

when you want to access main window or window.document from inside an iframe you should change the context by using window.parent
For example when you want to append some text to a div, you should do something like this
window.parent.$.('#theDiv').text('the text');
There is a bug in IE when you run the code from inside the iframe and remove the iframe in between. IE can't run the code in the fly

Drupal display 3rd party content with script

I am trying to add this script tag, which will display some 3rd party content, to my drupal page within admin -> content -< edit (using Drupal 7.36):
<script src="http://www.applitrack.com/dex/onlineapp/defaultlinks.asp?vacancyURL=http://www.applitrack.com/dex/onlineapp/jobpostings/view.asp"></script>
However, when I save and reload, the page completely ignores the script I added and shows a blank content area. I have the text format set to 'PHP Code', and there appear to be no restrictions on the html tags allowed. I have tried each of the different text formats, but to no avail. Any suggestions as to what else I may need to do would be greatly appreciate. Thanks in advance.

The best way to add js to drupal is with the drupal core funciton drupal_add_js.
drupal_add_js('http://example.com/example.js', 'external');
Create a very basic module and include something similar to that line in the hook_init function (if it's included on every page). If it is specific to a form include it in a form alter instead. Lot of other options to make it specific to the page its needed on but the general rule is include it only where it is needed.

You would have to change the ckeditor settings to make sure script tags are allowed
admin/config/content/ckeditor
This way however is not best practice and I suggest against it.
Edit your html.tpl.php template and add that js call near the bottom of your code.