[Off] JavaScript footer for my 4D app webpage?

Ben Kershaw (6/12/14 9:23AM)
Ben Kershaw (6/12/14 10:00AM)
Keith Goebel (6/13/14 1:47AM)
Peter Mitchell (6/13/14 10:34AM)
Keith Goebel (6/13/14 3:25PM)

Ben Kershaw (6/12/14 9:23 AM)

Cc: Keith Goebel <keith.g@...

Keith Goebel wrote:

color><param>00000,0000,DDEE/param>II have a standard footer area on a
bunch of web pages, and would like to "populate" the pages from a
single source, using JavaScript.
Is it possible to setup the HTML (see below) with a JavaScript
function so the HTML's table cell populates its content from a
JavaScript document?
/color>
Keith,

Unless this HTML is going to change often, I wouldn&iacute;t bother
dynamically inserting it using either 4D or JavaScript - that&iacute;s making
it more complicated than it needs to be.

The low-tech way is to add your own custom tag, such as
<!&oacute;myStandardFooter&oacute;> and then just do a manual find & replace in
your text editor across all files any time it changes. If you want to
have it done automatically, then you could probably use something like
CodeKit (https://incident57.com/codekit/index.html) and some Haml, and
have CodeKit do the compile/insertion for you.

If that won&iacute;t work for you, and you&iacute;re serving the pages from 4D,
you
could have 4D read the contents of the standard footer and do a
Replace String when the page is served. If you&iacute;re dead set on using
JavaScript, I&iacute;d use AJAX and have the JavaScript code read the
standard footer once during unload, and then use JQuery to insert the
HTML into the right place.

Regards,
Ben Kershaw
Ben Kershaw (6/12/14 10:00 AM)

Cc: 4D Tech Mailing List Technical <4D_Tech@...

Keith,

Ah, OK - makes more sense now. In that case I&iacute;d go the AJAX/JQuery
route - have an AJAX call in your JavaScript&iacute;s document.ready function
that gets the contents of the standard footer, stores it in a variable
(so you&iacute;re only hitting the server once and not on every page load),
then use JQuery to insert the HTML wherever you want it. It&iacute;s easier
than it sounds.

My recommended steps:

1) Start using Sublime Text as your text editor if you&iacute;re not already:
http://www.sublimetext.com/. Not necessary for this task, but it&iacute;s an
awesome text editor. I wish I could use it for 4D.
2) Install JQuery if you haven&iacute;t already: http://jquery.com/
3) Take a look at the JQuery $(document).ready() function (the
equivalent of 4D&iacute;s On Load event):
http://learn.jquery.com/using-jquery-core/document-ready/
4) Take a look at the JQuery AJAX call:
http://api.jquery.com/jquery.ajax/
5) Take a look at the JQuery append command (along with prepend,
insert, etc): http://api.jquery.com/append/

FYI: Treehouse is a good source for web development classes:
http://teamtreehouse.com/

Regards,
Ben Kershaw

On Jun 12, 2014, at 9:47 AM, Keith Goebel <keith.g@...
wrote:

color><param>00000,0000,DDEE/param>BBen, thanks for your reply.
Sorry, I didn't explain why I want to do this - I am teaching myself
JavaScript and am simply trying to run before I can walk :-)

As part of this, I am trying to get a handle on what the limitations
of JavaScript are.
I thought populating a common HTML footer on static web pages from a
common JavaScript file would be a good project for getting the hang of
using external js files.

I don't know if that's even possible though, as I have been unable to
find a way to insert HTML into the web page with JS - hence this
thread asking if it can be ?done.
Cheers, Keith

On 13/06/2014, at 1:23 AM, Ben Kershaw wrote:

/color><color><param>8826F,0000,8219/param>KKeith Goebel wrote:

/color><color><param>FFC79,0365,0771/param>II have a standard footer
area on a bunch of web pages, and would like to "populate" the pages
from a single source, using JavaScript.
Is it possible to setup the HTML (see below) with a JavaScript
function so the HTML's table cell populates its content from a
JavaScript document?
/color><color><param>8826F,0000,8219/param>
Keith,

Unless this HTML is going to change often, I wouldn&iacute;t bother
dynamically inserting it using either 4D or JavaScript - that&iacute;s making
it more complicated than it needs to be.

The low-tech way is to add your own custom tag, such as
<!&oacute;myStandardFooter&oacute;> and then just do a manual find & replace in
your text editor across all files any time it changes. If you want to
have it done automatically, then you could probably use something like
CodeKit (https://incident57.com/codekit/index.html) and some Haml, and
have CodeKit do the compile/insertion for you.

If that won&iacute;t work for you, and you&iacute;re serving the pages from 4D,
you
could have 4D read the contents of the standard footer and do a
Replace String when the page is served. If you&iacute;re dead set on using
JavaScript, I&iacute;d use AJAX and have the JavaScript code read the
standard footer once during unload, and then use JQuery to insert the
HTML into the right place.

Regards,
Ben Kershaw
/color><color><param>00000,0000,DDEE/param>
/color>
Keith Goebel (6/13/14 1:47 AM)

Kershaw
<4dnug@...

Ben, thanks for your reply.
Sorry, I didn't explain why I want to do this - I am teaching myself
JavaScript and am simply trying to run before I can walk :-)

As part of this, I am trying to get a handle on what the limitations
of JavaScript are.
I thought populating a common HTML footer on static web pages from a
common JavaScript file would be a good project for getting the hang of
using external js files.

I don't know if that's even possible though, as I have been unable to
find a way to insert HTML into the web page with JS - hence this
thread asking if it can be ?done.
Cheers, Keith

On 13/06/2014, at 1:23 AM, Ben Kershaw wrote:

color><param>00000,0000,DDEE/param>KKeith Goebel wrote:

/color><color><param>8826F,0000,8219/param>II have a standard footer
area on a bunch of web pages, and would like to "populate" the pages
from a single source, using JavaScript.
Is it possible to setup the HTML (see below) with a JavaScript
function so the HTML's table cell populates its content from a
JavaScript document?
/color><color><param>00000,0000,DDEE/param>
Keith,

Unless this HTML is going to change often, I wouldn&iacute;t bother
dynamically inserting it using either 4D or JavaScript - that&iacute;s making
it more complicated than it needs to be.

The low-tech way is to add your own custom tag, such as
<!&oacute;myStandardFooter&oacute;> and then just do a manual find & replace in
your text editor across all files any time it changes. If you want to
have it done automatically, then you could probably use something like
CodeKit (https://incident57.com/codekit/index.html) and some Haml, and
have CodeKit do the compile/insertion for you.

If that won&iacute;t work for you, and you&iacute;re serving the pages from 4D,
you
could have 4D read the contents of the standard footer and do a
Replace String when the page is served. If you&iacute;re dead set on using
JavaScript, I&iacute;d use AJAX and have the JavaScript code read the
standard footer once during unload, and then use JQuery to insert the
HTML into the right place.

Regards,
Ben Kershaw
/color>
Peter Mitchell (6/13/14 10:34 AM)

On 06-12-2014, at 8:25 PM, Keith Goebel <keith.g@... wrote:

color><param>00000,0000,DDEE/param>II would be slightly happier if I
could insert the entire html table cell's contents from JS, but I'm
delighted to get this far.
/color>
Would something like this work for you?

var tableCell = document.getElementById(&euml;IDofCell');

tableCell.innerHTML = htmlHere;

The &euml;htmlHere&iacute; could be a variable that contains what you want for
your footer.

Peter
Keith Goebel (6/13/14 3:25 PM)

Cc: tdemeo@...

Tom,
That's great advice - thank you!
It is just the direction I was hoping to go with this.
I now have
- the plain text portions inserted by JS using id's inside span
sections in the html
- the href populated by JS
and, it works :-)

I would be slightly happier if I could insert the entire html table
cell's contents from JS, but I'm delighted to get this far.

Thanks again,
Keith

...
color><param>00000,0000,DDEE/param>BBased on your comments, let's
assume you have created a javascript variable that contains the string
you want to insert:
/color>....
Reply to this message

Summary created 6/13/14 at 1:26PM by Intellex Corporation

Comments welcome at: feedback@intellexcorp.com