Board Logo

Dynamically generating the script configuration
tigra - 5/19/2006 at 04:18 PM

The questions about this have been asked over and over again for different scripts so we decided to summarize it in one general posting that we can refer everyone to.

Objective: The scripts must load the data from the dynamic source. Examples:
- the navigation loads its items from the database
- the navigation maps file system hierarchy of the server
- the calendar has different dates available depending on the role of the user logged in
- scroller loads the data from the server side AcitveX
- etc.

Audience: Following knowledge/skills are required to understand and implement code described in this article:
- understanding of the basic client-server architecture (once upon a time there was a server and the browser separated by the internet. Browser sends the request, server runs the server side code in requested document (if any), which produces the response, server sends the response over the internet to the browser and browser runs the client side code (if any) found in the response).
- server side programming skills (once upon a time a?? long story which you're expected to know)
- almost no client side programming skills - we programmed everything for you; just follow the formats described in the documentation.

Background: Most of our client side scripts use JavaScript variables as the source of the configuration data. In many cases configuration variables are placed in external .js files. Examples:

1. page index.html contains menu created with constructor:

Code:
new menu (MENU_ITEMS, MENU_POS);

which refers to MENU_ITEMS variable loaded from menu_items.js file linked to the page with tag: <script language="JavaScript" src="menu_items.js"></script>

2. page sample.html contains the scroller created with constructor: variable in its constructor:
Code:
new TScroll_init (Tscr_LOOK, Tscr_BEHAVE, Tscr_ITEMS);

which refers to Tscr_LOOK variable loaded from tsp_files/scroll.tpl.js file linked to page with tag: <script language="javascript" src="tsp_files/scroll.tpl.js"></script>
etca??

We use configuration variables because they're compact, parsed very efficiently and can be placed in external files. Now external files are good because they can be linked to many HTML pages so webmaster has only one file to maintain; also browsers can cache them and load faster.

Approach: For the server side scripts (such as ASP/PHP/CGI/ColdFusion a??) the client side JavaScript code is nothing but just a text. It can be generated the same as HTML or CSS. Example:
You can do this with HTML (php sample):
Code:
<p>I'm <? echo($lostMoney ? 'sad' : 'happy') ?> today!</p>

You can do the same with JavaScript:
Code:
<script language="JavaScript">
var s_Mood = '<? echo($lostMoney ? 'sad' : 'happy') ?>';
</script>

Sample above shows how server side script dynamically assigns the value of the client side variable. Note that by the time the data arrives to the browser this is static JavaScript code, either:
Code:
<script language="JavaScript">
var s_Mood = 'sad';
</script>

or
Code:
<script language="JavaScript">
var s_Mood = 'happy';
</script>


The client side JavaScript will not even know if the variable was assigned by the server side script or it was hard coded in the file.
Same approach can be used to generate more complex variables like those used in our client side script. Depending on the situation (configuration variable format and source of data), you may need database connections, loops, recursive function calls and other things programmers write. Anyway, the result of the server side script's execution should be the text of the configuration variable.

Implementation: As mentioned above the configuration variables often saved in external .js files. We can't add any server side code to those files because server will not run them. Normally servers are configured to run server side code only in files with certain extensions (.asp .php .cf .pl a??) Since the page hosting the JavaScript component [most likely] has such extension already we can just move configuration variable there from the external static file. Example:
instead of linking the texternal static .js file:
Code:
<script language="JavaScript" src="menu_items.js"></script>

in main html document (say products.php)
we put this inside the main document:
Code:
<script language="JavaScript">
var MENU_ITEMS = <? a?? ?>;
</script>

where <? a?? ?> is your server side code that generates the text of the configuration variable.
Moving the variable into the main document is painless because the advantages of the external configuration files no longer apply:
- there is no maintenance because the configuration variable is generated by the server side code which can be moved to server side include file if shared among the pages
- browser caching will not improve download time because dynamically generated variable may be different next time page loads

Debugging: There may be errors in your server side code, there may be errors in it's output (client side code). Errors in the server side code will inevitably result in failure of the client side code so you should debug server side first. As always the information about the problem can be found in the server's error log file. Some server side scripting engines will dump debug information into the page itself.
When server side script doesn't throw any error messages check for the client side errors (make sure reporting is enabled in the browser). Most likely you'll receive "variable is undefined" error and another error message with the syntax error details. Use view->source feature of your browser to check client side output of your server side script. Pay attention to apostrophes, brackets and commas. If the format is incorrect make adjustments in your script.
Most frequently experienced problems are:
- the comma after the last element of the array. Example:
Code:
<script language="JavaScript">
var VARNAME = [
'element1',
'element2',
'element3', // <-- this one
];
</script>

it will take some extra effort to detect the last run of the loop so you don't put that comma
- missing or extra brackets. Check if the number of opening brackets equals the number of closing brackets of the same type, they don't overlap etc.
- unescaped slashes, apostrophes or quotations. Example:
Code:
<script language="JavaScript">
var VARNAME = 'can't write like this';
</script>

in above code the string is closed too early by the apostrophe in word can't so the string is: 'can', the rest of the text is out of string and there is mismatched apostrophe at the end. Correct code is:
Code:
<script language="JavaScript">
var VARNAME = 'can't write like this';
</script>

The slash does all the magic so when slash itself needed in the text it must be used with another slash:
Code:
<script language="JavaScript">
var PATH = 'c:\My Documents\';
</script>


Feedback: Post your questions and notes in this thread. Share your server side scripts with others by publishing them in the related forums


tigra - 5/22/2006 at 03:05 PM

Some code samples related to this topic:

http://www.softcomplex.com/forum/viewthread_1958/ (perl server side for tigra menu scripts)
http://www.softcomplex.com/forum/viewthread_611/ (ASP server side for Tigra Menu)
http://www.softcomplex.com/forum/viewthread_610/ (PHP server side for Tigra Menu)
http://www.softcomplex.com/forum/viewthread_583/ (JSP server side for Tigra Menu)
http://www.softcomplex.com/forum/viewthread_1966/ (ColdFusion server side for tigra menu scripts)
http://www.softcomplex.com/forum/viewthread_3187/ (generate HTML site map from menu_items.js or tree_items.js (CGI/Perl))
http://www.softcomplex.com/forum/viewthread_724/ (Server Side Components for Tigra Tree Menu PRO (PHP/ASP DB/FS))
http://www.softcomplex.com/forum/viewthread_230/ (Loading Tree menu dynamically)


andimartin - 6/12/2007 at 12:03 PM

Thanks guys,

This did help a little.

However, one quick question regarding TigraScroller.

I wish to pass variables to my content file dynamically through the URL. I've edited the scroll.js file slightly so that it calls

Code:
...'scroll.html?' + <?php echo "id=0"; ?>..
and edited scroll.html so that the definition of n_id becomes:
Code:
var n_id = <?php echo $_GET['id']; ?>;


I can't seem to get the scroll.html file to load when anything other than scroll.html?i (where i is an integer) is passed.

The server is recognising my files as php files, I appended .php onto all the filenames, however, wanted to keep it simple in this post. Eg, when i say scroll.html, it's really calling scroll.html.php?....

Basically, i'd like it to pass ?direction=vertical&filename=content_filename.php& .... plus five other variables to be used by the content file.

Any advice would be greatly appreciative. I have a very limited knowledge of javascript.

Many thanks,

Andi Martin


andimartin - 6/12/2007 at 12:46 PM

It's offical, i'm an idiot. Forgot to add ' characters in order to pass the text. Now have

Code:
'scroll.php?' + <?php echo "'0&id=1'"; ?>
which seems to be working fine.

Thanks!


jaykate - 2/21/2012 at 09:31 AM

Jordan 11 cool grey hot sale online, All air jordan 11 shoes include jordan retro 11 jordan cool grey 11 are 40% - 60% price off
discount!


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/