/    Sign up×
Community /Pin to ProfileBookmark

Need javaScript help

My index pages’ main section is going to serve as a container I need to replace the current index page content with new content as you select pages from the nav menu. I am brand new to javaScript, but I know there is a simple way to replace content in a container. I have been trying to figure this out for days now.
I do need javaScript, PHP solutions won’t help for this project.

can someone please help?

to post a comment
HTMLJavaScript

46 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — What's the code of your nav menu currently? I suspect there are a-href-tags referring to the other pages?
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — It won't let me post the code
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — Im still using the iframe because I can't seem to get away from it with my limited knowledge
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — >It won't let me post the code

That's weird. Are there any script tags in the code? If so, omit them. Or something like onclick?
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — I don't want to use the iframe, I just don't know another way. I am using code someone helped me write for a different project and trying to make it work here, I would rather rewrite the code with a better solution.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — let links = document.querySelectorAll('.htm');

let fillContainer = document.querySelector('#container');

// this for loop will open multipul links by looping through them one at a time.
for(let i=0,x=links.length;i<x;++i){
links[i].addEventListener('click',function(e){
e.preventDefault();
fillContainer.src = this.href;
});
}
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — ``<i>
</i>&lt;nav&gt; &lt;!-- this nav contains the ancor/s for the variable links in the script below --&gt;
&lt;a href="menu.html" title=&gt;refresh&lt;/a&gt;
&lt;a class="htm" href="testPage_1.html" target="container"&gt;Test the Container&lt;/a&gt;
&lt;a class="htm" href="testpage_2.html" target="container"&gt;test again&lt;/a&gt;
&lt;/nav&gt;

&lt;div id="heading"&gt;
&lt;h1 class="header" style="margin-right: 1em;"&gt;Container Testing Ground&lt;/h1&gt;
&lt;/div&gt;

&lt;main id="main"&gt;
&lt;!-- this is the iframe for the variable iframe in the script below. --&gt;
&lt;iframe id="container" class="iframe"&gt;&lt;/iframe&gt;





&lt;/main&gt;<i>
</i>
``
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — I would like to have content for the home page show as a default when the page loads then replace the content in the main element as you navigate the site
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — I see.

Your code is fine so far. In future please use code tags when posting code: `your code here`.

I'll be back soon and post some code which does what you require.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — Thank you, for your help
Copy linkTweet thisAlerts:
@cootheadJan 13.2022 — Hi there Lenso,

are you aware that...
<i>
</i> &lt;a href="testPage_1.html" target="container"&gt;Test the Container&lt;/a&gt;

...will load the url in this...

<i>
</i> &lt;iframe name="container"&gt;&lt;/iframe&gt;

...without JavaScript?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — was not aware.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — That could be helpful for another project
Copy linkTweet thisAlerts:
@cootheadJan 13.2022 — > @Lenso43 That could be helpful for another project

I thought it would be [b]helpful[/b] for this project. :)

[i]coothead[/i]
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — Thank you, the problem I have at the moment is that I want to replace content with new content. I have not found a solution with this method, I am open to suggestions
Copy linkTweet thisAlerts:
@cootheadJan 13.2022 — > @Lenso43

> the problem I have at the moment is that

> I want to replace content with new content.


The example that I gave you does that for any

number of [b]a elements[/b].

I would suggest that you test it more fully. :)

[i]coothead[/i]
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — @coothead#1641461 I see this works, I laugh at my code sometimes, {most of the time}
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — @Lenso43#1641457

Remove the iFrame from your main container:
``<i>
</i> &lt;main id="main"&gt;
&lt;/main&gt;<i>
</i>
`</CODE>
Then place this javascript right above the closing &lt;/body&gt; and enclose it in script tags:
<CODE>
`<i>
</i> const mainContainer = document.querySelector('main');
document.querySelector('nav').addEventListener('click', (event) =&gt; {
if (event.target.matches('a')) {
event.preventDefault();
const link = event.target,
destination = link.href;
fetch(destination).then(res =&gt; {
return res.text();
}).then(res =&gt; {
mainContainer.innerHTML = res;
});
}
});<i>
</i>
``
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — Will do
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — Sorry, This replaces the previous javaScript, correct?
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — Yes. It should be sufficient and do what you require. I tested it.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — okay, I am testing it now and it isn't working at the moment. let me make sure I didn't change anything else
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — I can't get it to work with the code that I pasted above
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — Unfortunately the forum will not allow to post the complete file including script tags.

I put my test file on pastebin.com:

https://pastebin.com/4TtJbmCG

Check if it matches your own one.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — everything matches,

<i>
</i> &lt;body&gt;
&lt;nav&gt; &lt;!-- this nav contains the ancor/s for the variable links in the script below --&gt;
&lt;a href="menu.html" title=&gt;refresh&lt;/a&gt;
&lt;a class="htm" href="testPage_1.html" target="container"&gt;Test the Container&lt;/a&gt;
&lt;a class="htm" href="testpage_2.html" target="container"&gt;test again&lt;/a&gt;
&lt;/nav&gt;

<i> </i> &lt;div id="heading"&gt;
<i> </i> &lt;h1 class="header" style="margin-right: 1em;"&gt;Container Testing Ground&lt;/h1&gt;
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;main id="main"&gt;
<i> </i> &lt;!-- &lt;iframe id="container" class="iframe"&gt;&lt;/iframe&gt; --&gt;
<i> </i> &lt;p&gt;Replace this content with new content as links are selected&lt;/p&gt;
<i> </i> &lt;/main&gt;
<i> </i> const mainContainer = document.querySelector('main');
<i> </i> document.querySelector('nav').addEventListener('click', (event) =&gt; {
<i> </i> if (event.target.matches('a')) {
<i> </i> event.preventDefault();
<i> </i> const link = event.target,
<i> </i> destination = link.href;
<i> </i> fetch(destination).then(res =&gt; {
<i> </i> return res.text();
<i> </i> }).then(res =&gt; {
<i> </i> mainContainer.innerHTML = res;
<i> </i> });
<i> </i> }
<i> </i> });
&lt;/body&gt;
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — script tags are included
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — I can't see what I am missing.
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — Unfortunately the script tags are missing. Take a close look at line 24 and 38 in my pastebin.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — sorry, I didn't include them in the code I pasted because I thought it would cause an issue. I have them surrounding the code in my editor
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — I see, my bad. The links are referring to testPage_1.html and testPage_2.html. Do these pages exist?

If they do, please post if any error messages are output in the console.

What happens when you click the links in your nav?
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — ya, I have two errors. no excuses here for not looking.

both pages exist

error one

Fetch API cannot load file:///F:/John%20Sellers/iframe-rework/testPage_1.html. URL scheme "file" is not supported.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — error two

looking_for_help.html:40 Uncaught (in promise) TypeError: Failed to fetch

at HTMLElement.<anonymous> (looking_for_help.html:40:1)
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — nothing is happening when I click the links in the nav
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — That's helpful. I forgot about this: Loading content by use of ajax will not work if the page is not running on a webserver but via the file protocol. I'm always running my test files on a local webserver, therefore it worked for me.

Unfortunately we are facing the same situation now as when using PHP.

I assume that you intend to upload your pages to your webspace anyway. Try to do so and check if they are working over there.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — I am also receiving a response "ensure CORS requests are made on supported schemes"
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — I see, I will have to get a local webserver on my machine

any suggestions for a quick fix for a beginner.
Copy linkTweet thisAlerts:
@SempervivumJan 13.2022 — I'm using XAMPP and it does well for me. Installation was easy.
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — Okay, Im looking into that

thank you. I am sure your code will work great once I am properly set up. I have been avoiding new things but I can't do that I have to grow
Copy linkTweet thisAlerts:
@Lenso43authorJan 13.2022 — I finally got the server up and running after a little research. now the code runs great. thanks for all your help and putting up with a complete newb
Copy linkTweet thisAlerts:
@SempervivumJan 14.2022 — @Lenso43#1641489 Fine that you got it working!

Note that there are some characteristics of this solution: The address bar will not reflect the page currently visible and the back and forward buttons of the browser will not work as desired. If you can accept this it's OK. Extending the scripts in order to fix this would make it more complex.

However, now that you have a local webserver running you could easily use the alternative solution with PHP include. It doesn't require any coding skills.
Copy linkTweet thisAlerts:
@Lenso43authorJan 14.2022 — @Sempervivum#1641496 I'm finding some other frustrating issues as well, the jquery drop menu I have included is way more problematic as well. all are issues that can be overcome with time. problem is, I am running out of time. trying to make a few extra bucks to simplify this guys page and I'm neither simplifying it or getting it done. I think it's time to stop over thinking.
Copy linkTweet thisAlerts:
@cootheadJan 14.2022 — > @Lenso43#1641540

> Problem is, I am running out of time.

> Trying to make a few extra bucks to simplify this guys

> page and I'm neither simplifying it or getting it done.


Well in that case, you should not have taken the [i]JavaScript[/i]

route. The simple [i]HTML[/i] method would have sufficed.

[i]coothead[/i]
Copy linkTweet thisAlerts:
@Lenso43authorJan 14.2022 — @coothead#1641546 true
Copy linkTweet thisAlerts:
@roohishaJan 15.2022 — Head over to our Learning Area JavaScript topic if you want to learn JavaScript but ... therefore we've provided this module to help you and [more info...](https://sataxaccountants.co.uk/)
Copy linkTweet thisAlerts:
@cootheadJan 16.2022 — Hi there Lenso43,

if you are interested, check out this working example...

[url=https://www.mediafire.com/file/vnhavl6pgdjffup/iframe-stuff.zip/file]iframe-stuff.zip[/url]

...which loads various documents in an [i]iframe element[/i] without javascript

but uses javascript to resize it to match the content scroll height.

If javascript is disabled the [i]iframe element[/i] can be manually resized by

dragging. the bottom right corner.

[i]coothead[i]
Copy linkTweet thisAlerts:
@Lenso43authorJan 16.2022 — thank you I will look at it
×

Success!

Help @Lenso43 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...