Replacing DIV content based on variable sent from another HTML file

Question

I'm trying to get this JavaScript working:

I have an HTML email which links to this page which contains a variable in the link (index.html?content=email1). The JavaScript should replace the DIV content depending on what the variable for 'content' is.

<!-- ORIGINAL DIV -->
<div id="Email">

</div>


<!-- DIV replacement function -->

<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>

<!-- Email 1 Content -->
<script ="text/javascript">
var content = '<div class="test">Email 1 content</div>';

ReplaceContentInContainer('Email1',content);
}
</script>

<!-- Email 2 Content -->
<script ="text/javascript">
var content = '<div class="test">Email 2 content</div>';

ReplaceContentInContainer('Email2',content);
}
</script>

Any ideas what I've done wrong that is causing it not to work?

Answer 1

Rather than inserting the element as text into innerHTML create a DOM element, and append it manually like so:

var obj = document.createElement("div");
obj.innerText = "Email 2 content";
obj.className = "test"

document.getElementById("email").appendChild(obj);

See this working here: http://jsfiddle.net/BE8Xa/1/

EDIT

Interesting reading to help you decide if you want to use innerHTML or appendChild:

"innerHTML += ..." vs "appendChild(txtNode)"

Answer 2

The ReplaceContentInContainer calls specify ID's which are not present, the only ID is Email and also, how are the two scripts called, if they are in the same apge like in the example the second (with a corrected ID) would always overwrite the first and also you declare the content variable twice which is not permitted, multiple script blocks in a page share the same global namespace so any global variables has to be named uniquely.

Answer 3

David's on the money as to why your DOM script isn't working: there's only an 'Email' id out there, but you're referencing 'Email1' and 'Email2'.

As for grabbing the content parameter from the query string:

var content = (location.search.split(/&*content=/)[1] || '').split(/&/)[0];

Answer 4

I noticed you are putting a closing "}" after you call "ReplaceContentInContainer". I don't know if that is your complete problem but it would definitely cause the javascript not to parse correctly. Remove the closing "}".

With the closing "}", you are closing a block of code you never opened.

Answer 5

First of all, parse the query string data to find the desired content to show. To achieve this, add this function to your page:

<script type="text/javascript">
function ParseQueryString() {
    var result = new Array();
    var strQS = window.location.href;
    var index = strQS.indexOf("?");
    if (index > 0) {
        var temp = strQS.split("?");
        var arrData = temp[1].split("&");
        for (var i = 0; i < arrData.length; i++) {
            temp = arrData[i].split("=");
            var key = temp[0];
            var value = temp.length > 0 ? temp[1] : "";
            result[key] = value;
        }
    }
    return result;
}
</script>

Second step, have all possible DIV elements in the page, initially hidden using display: none; CSS, like this:

<div id="Email1" style="display: none;">Email 1 Content</div>
<div id="Email2" style="display: none;">Email 2 Content</div>
...

Third and final step, in the page load (after all DIV elements are loaded including the placeholder) read the query string, and if content is given, put the contents of the desired DIV into the "main" div.. here is the required code:

window.onload = function WindowLoad() {
    var QS = ParseQueryString();
    var contentId = QS["content"];
    if (contentId) {
        var source = document.getElementById(contentId);
        if (source) {
            var target = document.getElementById("Email");
            target.innerHTML = source.innerHTML;
        }
    }
}

Answer 6

How about this? Hacky but works...

<!-- ORIGINAL DIV -->
<div id="Email"></div>

<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
var txt = document.createTextNode(content); 
container.appendChild(txt);
}

window.onload = function() {
var args = document.location.search.substr(1, document.location.search.length).split('&');
var key_value = args[0].split('=');
ReplaceContentInContainer('Email', key_value[1]);
}
</script>