Update an HTML page using Javascript

**pipwax** · 12-11-2011, 02:43 AM

I am working in an environment where the only programming language I an effectively use is javaScript.

Here is what I would like to do! I have an html page that I maintain weekly. the only items to be changed are the text content and the subject photo.

Can I create a form with an upload field which would update my text write up and replace my image?

**djr33** · 12-11-2011, 04:14 AM

No. You must have a serverside language (such as PHP, ASP or CGI) if you want to store content on the server as a file or in a database.

You could potentially use Javascript to get the information from another file (using Ajax), but you couldn't use a form to upload it.

If you absolutely can't use a serverside language (I recommend moving servers if that's a problem), then your best option will be to upload a content text file to the server via FTP, then use Javascript to automatically bring that content into the pages.

Javascript operates only in the browser (so it is a clientside language), and it can't store information anywhere. It can interact with the user (and serverside languages can't), but basically it's to add fun effects/interaction/movement to a page or in some cases organize/bring in content. But it can't "save" anything.

**pipwax** · 12-11-2011, 11:25 PM

Thanks!

**djr33** · 12-12-2011, 12:51 AM

By the way, you can use Javascript (a method called Ajax) to use serverside scripts-- so you can create a JS interface to save things to the server. But that needs the behind-the-scenes PHP (etc) to function. Using only JS, it's not possible.

**lmbarns** · 12-12-2011, 03:12 PM

Similar to the ajax idea you can use an xml file to store each "record" with a path to the uploaded image. Then when you add new entries to the xml file by whatever means, and upload it, you'll have the new entries available on the site.

You could make a form to update the file, upload the image, etc but that still requires server side code...

**molendijk** · 12-12-2011, 04:36 PM

If you give up the idea of a form with an upload field, then you could do the following (without even using Ajax):
File in which you want to do the updates:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<script type="text/javascript">
function checkIframeLoading() 
{
if(frames['iframe'].document.readyState == 'complete' )
{
if(document.readyState=='complete' )
{
setTimeout("document.getElementById('updated_text').innerHTML=frames['iframe'].document.getElementById('external_text').innerHTML",0)
setTimeout("document.getElementById('updated_image').innerHTML=frames['iframe'].document.getElementById('external_image').innerHTML",0)
}
}
   
//check again after 10 millisecs if iframe is loaded
window.setTimeout('checkIframeLoading()', 10);
  
}
  
setTimeout("frames['iframe'].location.replace('external.html')", 0);
setTimeout(checkIframeLoading,0)
</script>

</head>

<body><iframe name="iframe" style="position:absolute; visibility: hidden; left: -10000px"></iframe>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
<div id="updated_text" style="border: 2px solid red; text-align: center"></div><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
<div id="updated_image"></div><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br>

</body>

</html>

external.html: the file used for doing the updates

Code:

<div id="external_text">This is text from <i>external.html</i></div><br>
<div id="external_image">This is an image from <i>external.html</i> &rarr; <img src="http://www.google.com/intl/nl_ALL/images/logos/images_logo_lg.gif" width="200" height="100" border="1" title="" alt=""></div> contained in <i>external.html</i>

Now each time you change the text wrapped in div id="external_text" and/or the image in div id="external_image (second file), the changes will be updated in the main file.
===
Arie Molendijk.

**djr33** · 12-13-2011, 12:04 AM

Getting the information isn't the problem. The original question was about being able to use Javascript store new info. There are lots of solutions if you can either use a serverside language or you can upload the information via FTP.

**pipwax** · 12-13-2011, 02:21 AM

I will try this one, hopefully I can get it to work.

Thread: Update an HTML page using Javascript

Thread Tools

Search Thread

Update an HTML page using Javascript

The Following User Says Thank You to molendijk For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions