WAY off topic : HTML

asking this here, as I have searched the world over and found nothing that points a direction that seem to work :frowning:
My Xojo app is writing a dynamic website
It consists of an INDEX.HTML that is made up of 5 iFrames… one is named “container” another is named “sidebar”

Sidebar is loaded with a “menu” made of of UL/LI/ and anchors. the idea being that you click on a link, and that page (all local) is loaded into container via a short Javascript

function navigate(goto) {
   alert(goto); // this alert shows
   document.getElementsByID('container')[0].src = goto;  // nothing happens, 
   alert("ok"); // this one does not

sample link [this is inside an unordered list]

<a onClick="navigate('../classes/index.html')">Classes</a>

I realize this is not Xojo related (other than an Xojo app is writing the code for me :slight_smile: ), but hoped that someone here could help…

getElementsByID is not a thing. You want getElementById(), and YES THE CASING MATTERS (lowercase d).

true… typo… but even fixing that … still nothing

document.getElementById('container')[0].src = goto;
document.getElementById('container').href = goto;

Is container the iframe? StackOverflow says that you should use the .src property.
Does document.getElementById('container').src = goto; do anything?

The developer console can be handy with debugging Javascript, it’ll give you the errors instead of just silently failing.

The debugger is returning

TypeError: null is not an object (evaluating 'document.getElementById('container').src = goto')

‘goto’ has a value, as the Alert is displaying it to me

So what that’s telling us is that document.getElementById('container') isn’t giving an object to work with (so it has no src property either). Is the id of the iframe “container” ?

<iframe id="container" src="something.html"></iframe>

and if I try this method

<a href="/sidebar.html" target="container">link1</a>

I get unable to load local resource …

but doing this

<a href="../../sidebar.html" target="container">link1</a>

does load the page, but NOT in the iframe, it does it full screen :frowning:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
   <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<style type='text/css'>
html, body {position:absolute; left:0;top:0;height:100%;width:100%;
margin:0; overflow : hidden; padding:0;}
div { padding:0; margin:0; border:none;}
#header,#ref    {position:fixed; height:35px; width:100%; overflow : hidden;}
#header    {position:fixed; top:0px; }
#ref    {position:fixed; top:36px;  }
#sidebar,#container {position:absolute; top:72px; height:calc(100% - 114px); overflow-y: auto;overflow-x: auto; scrolling='auto';}
#sidebar   {left:0px;   width:300px; }
#container {left:301px; width:calc(100% - 301px); }
#footer    {position:fixed; left:0px; bottom:0px;  height:35px;  width:100%; overflow : hidden;}
#sidebar {background-color:cyan;}
<body bgcolor=red>
<iframe id='header'    src='support/topbar.html/'></iframe>
<iframe id='ref'       src='support/refbar.html/'></iframe>
<iframe id='container' name 'container' src=''></iframe>   //<----------------
<iframe id='sidebar'   src='support/sidebar.html/'></iframe>
<iframe id='footer'    src='support/botbar.html/'></iframe>

I’m not trying to be rude with this, it should be name='container' and I would also try a more unique name, just in case. You would then not need javascript, and could use the target="" capabilities.

Stripping away a bunch of the stuff for illustration:


<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<body bgcolor=red>
<iframe id='headerFrame' src='support/topbar.html'></iframe>
<iframe id='refBarFrame' src='support/refbar.html'></iframe>
<iframe id='mainContentFrame' name='mainContent'></iframe>
<iframe id='sideBarFrame' src='support/sidebar.html'></iframe>
<iframe id='footerFrame' src='support/botbar.html'></iframe>


<a href="../classes/index.html" target="mainContent">Classes</a>

Does that work for you?
(have not tested this locally, but see it working by example here)

Html5 doesn’t support the name= attributes.

Try getElementById(“theid”) with the double quotes.

[quote=398726:@Derk Jochems]Html5 doesn’t support the name= attributes.

Try getElementById(“theid”) with the double quotes.[/quote]
Dave defined the document type as HTML 4 :slight_smile:

rude is say “Hey Moron… you forgot the equal sign”… otherwise your response was part of what I was looking for , as in “Hey you missed this” :slight_smile:

not HTML5… notice the first line…

Thanks… that made it work using “TARGET=” which I prefer
But I did notice, it only works, if the original IFRAME had a blank “SRC=’’” specified… otherwise it did not replace it
but if it started blank, then my links switched the content as desired…