how to use jquery inject html markup in any app?

Question

I want to inject html markup into a div in multiple sites in different platforms. Ideally it would look something like this where each developer can insert a script tag to my js. Lets assume each application has bootstrap and jquery.

<script id="globalheaderapi" src="https://www.url.com/globalheader.js"></script>

and html would only be something like this on the applications

<header id="globalHeader"></header>

I want to insert my html markup inside header. I would also want to js to insert link to css source.

The question is, the apps only have jquery.

 $( document ).ready(function() {
  //insert link to header css   
    $('head').append('<link rel="stylesheet" href="globlalHeader.min.css" type="text/css" />');

 //insert html in div
 $( "#globalHeader" ).html( "<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>" );
 });

Update

I tried $( "#globalHeader" ).load(... and it works if js and the app is in the same domain if i try it in a different domain i get the crosssite error

   XMLHttpRequest cannot load http://url . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

The question you are asking seems to be answered already by what you are doing. What else are you trying to accomplish? — Davy, May 21 '15 at 14:32
that was a starting point. the markup that i want to insert is quite long.. i was just wondering if there was a solution people are using to create global headers and footers .. like an api that works for multiple applications — nolawi, May 21 '15 at 14:47

score 4 · Accepted Answer · answered May 21 '15 at 14:21

4

Taking for granted that there is a decent enough reason in your environment to not just use server side includes or something more straightforward, jQuery's .load() seems like it would suit you. You'd just stub out the HTML you'd want to inject and have each page call it like this:

$("#globalHeader").load('globalHeader.html');

Your CSS injection looks fine, though I'm curious why if you have access to the site to insert a script tag you can't just add the link tag.

answered May 21 '15 at 14:21

swornabsent

984
1
7
14

There are many micro apps that want to use the same navigation as my application.. and they are all on different platforms. – nolawi May 21 '15 at 14:44
this works if the html insert is in the same domain.. but when i test it on other domains -` XMLHttpRequest cannot load http ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.` – nolawi May 21 '15 at 18:12

kaz · Answer 2 · 2015-05-21T14:55:14.057

1

If they have anything else in that global-header, .html() will overwrite it.
A better approach would be to append your content as children.

var parentEl=$('#global-header');
var myDiv= $('<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>');
myDiv.appendTo(parentEl);

Your CSS link addition looks good.

edited May 21 '15 at 14:55

answered May 21 '15 at 14:21

kaz

1,190
8
19

1

.html() does accept arguments, but it will overwrite the entire HTML each time you call .html() with a new argument. – Davy May 21 '15 at 14:51
Thanks! Edited appropriately. – kaz May 21 '15 at 15:11

score 1 · Answer 3 · answered May 22 '15 at 12:01

First of all, take in mind that if you append css link to the header almost all modern browser will load and parse that css, but you have no chance to know when. This means that your injected html can be displayed unstyled during unpredictable time lapse.

You can try to mitigate it hidding contents and display it later with a .show() call after a timeout but, anyway (1) Most of time you will delay more than necessary and (2) many times could to not be enought.

So, if your css is not huge, I recomend you to apply it with jquery's .css() method and then do a .show() over your container.

Regarding the crosssite error using .load(), I think there exists a parameter to disable that warning (but I doesn't remember what and not sure if I'm wrong). But, anyway, you can implement the same behaviour simply obtaining the html via .ajax() call and then append with .append() (or replace it with .html()) to the container's content.

score 1 · Answer 4 · edited May 23 '17 at 11:52

XMLHttpRequest works across different domains. However the server should be configured to allow these requests. Browser denies this request after it checks an HTTP header.

Suppose your code is like:

$( "#globalHeader" ).load("http://somedomain.com/path")

The code running in somedomain.com site should return the appropriate headers like:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

The first line Access-Control-Allow-Origin: * allows the requests to be made by any other domain. You can also limit these domains with this header like

Access-Control-Allow-Origin: micrositeA.com, micrositeB.com, micrositeC.com

Your http server should allow OPTIONS method for this to work (should check this). You may consult your http server documentation how to achieve this.

You can check this entry for CORS (Cross-site HTTP Requests)

How does Access-Control-Allow-Origin header work?

and

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

how to use jquery inject html markup in any app?

4 Answers4