replace content of div with another content

Question

I've been building a list of links, all of which should change the content of a div to another specific content (about 4 lines of stuff: name, website, contact etc.) upon a click.

I found this code:

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

and used it in such a way:

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie</a>
</li>

And it doesn't work as I expected.

It changes hyperlinks text from 'Pomorskie' to 'superlink'.

The plain text works just fine but I need links.

here's the http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/ (only two of them show anything)

But after trying all of your recomendations, I think I'd jump to different divs with #links, cause nothing worked with this :/

Thanks a lot for trying, and cheers :)

Sergius

can you add the code for the wojewodztwo object? – Indiana

Can you show an example of a before and after for how you would like the links to appear? – Diastyle

@PatrickGunderson wojewodztwo is just a div which is going to be replaced: '<div id="wojewodztwo"></div>' – Sergius

Your HTML is invalid, it would need to be <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=&qout;http://address.com&qout;>superlink</a>')"> (notice the escaped quotes) – Pirtle

@StevenFarley example: let us have 3 links: link1 (content1) link2 (content2) link3 (content3) every content consists of nameX, addressX and hyperlinkX here's <div id="wojewodztwo"></div> which content should be replaced with contentX upon a click :) – Sergius

@Pirtle " isn't escaped, it's an entity reference. \" is escaped, and %22 is url encoded. – Lawlor

Answer 1

Just as a completely sideways look at this, I'd suggest avoiding the nesting weirdness / complexity, and reducing the problem down.

Setup the content in a hidden (ie. <div id="replacements">...</div>) Grab the innerHTML from the node you want, and be done with it.

Much easier to get replacement content from non-devs that way too, kinda works great if you're in a team.

// Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }

Control it with: (lose that href=javascript: and use onClick, better as an event handler, but for brevity I'll inline it as an onClick attribute here, and use a button.)

<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>

We have our target somewhere in the document.

<div id="target">My content will be replaced</div>

Then the replacement content sits hidden inside a replacements div.

<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>

Here it is in JSBin

Improve the dynamic nature of this by using Handlebars or another nice JS templating library, but that's an exercise for the OP.

edit: Note, you should also name functions with a leading lowercase letter, and reserve the leading uppercase style for Class names e.g. var mySweetInstance = new MySpecialObject();

Lawlor

OMG IT WORKS '<script type="text/javascript"> function ReplaceContentInContainer(id,id2) { var container = document.getElementById(id); var container2 = document.getElementById(id2); container.innerHTML = container2.innerHTML;} </script>' – Sergius

Always try to use abstraction / indirection ("divide and conquer" if you like) to solve problems, they just get easier, the more you separate things out, and it all feels more pleasant when you return to it. – Lawlor

Answer 2

The quotes are mismatched! So when you click you are getting a JavaScript error.

The browser sees this string:

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie<

as:

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="

Chnage the " inside to @quot;

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=@quot;http://address.com@quot;>superlink</a>')">Pomorskie</a>
</li>

Example fiddle.

Also note, using the href tag for JavaScript is a BAD practice.

Navarrete

+1 for thinking beyond the given URL and considering white spaces. I removed my answer. Though it worked without the " with the OP's given URL it was not exactly correct as you correctly pointed out. As you already covered it now there is no need for me to repeat the same thing in another answer. Nice catch. – Blasto

thanks guys, nothing helps though, I edited the question and put I'm gonna put it to rest I think. CHEERS! – Sergius

Answer 3

You've got a problem with nested quotes. Take a look in your DOM inspector to see what the HTML parser built from it! (in this demo, for example)

You either need to HTML-escape the quotes inside the attribute as " or ", or convert them to apostrophes and escape them inside the JS string with backslashes:

<a href="j[…]r('wojewodztwo', '<a href=&quot;http://address.com&quot;>superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…

See working demos here and here.

Better, you should use a onclick attribute instead of a javascript-pseudo-url:

<a onclick="ReplaceContentInContainer('wojewodztwo', …)">Pomorskie</a>

or even a javascript-registered event handler:

<li class="pl11">
    <a id="superlink">Pomorskie</a>
</li>
<script type="text/javascript">
    function replaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
    document.getElementBId("superlink").onclick = function(event) {
        replaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>');
        event.prevenDefault();
    };
</script>

(demo)

Pirtle

works great in the demo! just gonna try this in my case in a sec :) thanks! – Sergius

ok, it doesn't work for me :/ thanks for your help. I think I'm gonna go with the #links jumping to different divs instead of replacing one. thanks and cheers! – Sergius

Wow, I'm a bit stunned that escaped \" don't work in this context. – Lawlor

@Slomojo yup, I'm trying with the one that's most to the north (on the map) – Sergius

@user1399364 yeah, I'd feel a bit concerned about using \' even if it did work, I'd worry about it (perhaps broken in another (future?) JS engine, and super tough to find/debug.) When it comes down to it, this would be better done with a bit more indirection, so you can compose the anchor element in a less brittle fashion. – Lawlor

@Slomojo: \" doesn't work as it still collides with the attribute delimiters, you need to use entities in HTML (backslashes don't work). – Pirtle

@Pirtle I know, I tried, it, I was just a bit surprised. But that sort of hoop jumping should just be avoided altogether. see my answer. – Lawlor

@Slomojo: Better avoid it by separating content from behavior, i.e. place it all into an independent script (file) tag. – Pirtle

@Pirtle I mean avoid nesting quotes all over the place due to too much inlining. – Lawlor