/    Sign up×
Community /Pin to ProfileBookmark

JS Dynamic Content Question

Copy linkTweet thisAlerts:
Nov 10.2011

I am new to JavaScript and need some guidance.

I have a site setup, where each page has 3 <div> columns. In the 3rd <div> Column, I want to populate dynamic content. Basically, I want to have 1 external file, which holds the content to be populated. The 3rd <div> column on each page would need to pull the information from the 1 external file. I want to insert JavaScript in the 3rd <div> column to direct the page to pull this content from the 1 external file.

Example: 3rd <div> column could show Ads or Promotions. The external file holds the images, links, etc. for the specific Ads or Promotions. The external file can be edited just once and all pages automatically show this new content because the JavaScript in the 3rd <div> column pulls from this external file.

This seems like it should be really simple, but I cannot find anything online that describes how to do this. I am likely not using the right keywords for my search because I am new to JS.

Any help/guidance is appreciated!

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@wes_beasleyauthorNov 11.2011 — Can anyone help point me in the right direction to do this?
Copy linkTweet thisAlerts:
@007JulienNov 11.2011 — You can always build javascript files with PHP (with a content type and a charset)...
[code=php]header("Content-Type:text/javascript;charset=utf-8");[/code]
And this files can contents all HTML that you will (tags, images with there src, links...). In the limit a simple variable can contain all the HTML.

Then you have only to insert this script in your page and to build your 3rd <div> Column... An innerHTML could be then enough ...

I do not know for which reasons this technique, which protects the server by reserving the PHP for the updates, is only rarely used ?

To avoid problems with apostrophes and single quotation marks (usually rendered identically but serving a different purpose) it often better too replace all text quotation marks (') with the typographer apostrophes (&#8217? obtain with Alt 0146 (or Alt Fn 0146) with a simple myText=myText.replace(/'/,'&#8217;'/g);
Copy linkTweet thisAlerts:
@svidgenNov 11.2011 — What part of the process are you hung up on? Fetching the content? Putting it in the div? Or both?
Copy linkTweet thisAlerts:
@wes_beasleyauthorNov 11.2011 — Sadly, I am limited to HTML and JavaScript. The server that I am running off of is managed by my IT department and they refuse to provide any further functionality.
Copy linkTweet thisAlerts:
@wes_beasleyauthorNov 11.2011 — I'm hung on both. I am looking for information that shows me how to use the JS to pull the info from the external file (what code needs to be used) and info on how the external file should be setup. All of the pages are located on the same server and within the same root directory; some pages will be located in sub-directories within the root directory.
Copy linkTweet thisAlerts:
@007JulienNov 11.2011 — Without PHP (or an other server language) Ajax can only fetch on the server existing contents... Then an iframe with an html page make the same thing !
Copy linkTweet thisAlerts:
@svidgenNov 11.2011 — Without PHP (or an other server language) Ajax can only fetch on the server existing contents... Then an iframe with an html page make the same thing ![/QUOTE]

Yes and no. AJAX allows you to use more complex (although prebuilt) structures that update multiple areas, receive special formatting, etc. Or, if the content is just text, it spares you from having to wrap the data/text in HTML.

Also, if you write the fetched content to a node in the page, it'll resize itself naturally. If you use an iframe, you're stuck writing additional script to resize it based on it's content, a task that's not always successful across browsers.
Copy linkTweet thisAlerts:
@wes_beasleyauthorNov 11.2011 — I created a quick/simple layout with MS Word and attached a screenshot, if that helps to describe what I am trying to do.
×

Success!

Help @wes_beasley 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...