Jump to content

Using javascript to avoid page replication

A_tom

By A_tom
in HTML/XHTML

 Share

Recommended Posts

A_tom Newbie

A_tom

Posted
Posted

A lot of the pages on my website are displaying the same chart with different data. To create a new page, I just make a copy of an existing page and change a couple of data references. Simple enough. However, I've been going through changing all of my pages to get HTML5 compliant and the process of changing all these pages gets a bit tedious. It's occurred to me that I could create a generic chart page which gets called by every master page (the master pages tend to be more unique in form). Then when the page gets called from the master page, it would just pass the name of the data files (xml) to the chart generation page. Here is an example of a chart page:

 

 

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ESCombo7 24 Month History</title><link href="styles.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" /><link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" /><link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" /><script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script></head><body class="twoColFixLtHdr"><div id="container"><div id="header" class="fltlft"><img src="images/logo.jpg" alt="SIF Trading Systems Logo" class="fltlft" /><img src="images/software_box.jpg" alt="Software Box" class="fltrt" /> </div><br class="clearfloat" /> <div style="text-align: center">      <object type="application/x-shockwave-flash" width="500" height="300">         <param name="movie" value="../FusionCharts/Column2D.swf" />         <param name="FlashVars" value="&dataURL=clientFTP/ESCombo7MoBar.xml&chartWidth=500&chartHeight=300">         <param name="quality" value="high" />         <embed src="../FusionCharts/Column2D.swf" flashVars="&dataURL=clientFTP/ESCombo7MoBar.xml&chartWidth=500&chartHeight=300" quality="high" width="500" height="300" id="Column2D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></div><div style="margin-left: 200px"><br /><p>This chart is automatically updated directly from a TradeStation chart.</p><p style="margin-right: 125px">PAST PERFORMANCE WHETHER REAL OR HYPOTHETICAL IS NO GUARANTEE OF FUTURE RESULTS.</p></div><div id="footer"><p><a href="ESCombo7.html">ESCombo7</a></p></div></div></body></html>

There are only two things on this page which make it different from all the other pages displaying the exact same chart, but with different data. The first is the name of the data file (ESCombo7MoBar.xml), which appears twice. The other is the name of the page which called this page ("ESCombo7.html) and some text which describes that page. This is essentially just one thing, namely ESCombo7. I suppose there could be just one variable passed to do everything (ESCombo7) since that is the only text which varies within the page.

 

I think it might be possible to pass this information to this page as a variable in js, but I'm not sure what that would look like. Is this correct or is there another, better way.

 

Thanks for any assistance.

 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Like this you mean?

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">$(function(){    //option 1    insertme('ESCombo7');    });            function insertme(ref) {//this can be placed in external js file                var join = "";                join += '<object type="application/x-shockwave-flash" width="500" height="300">';                join += '<param name="movie" value="../FusionCharts/Column2D.swf" />';                join += '<param name="FlashVars" value="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300">';                join += '<param name="quality" value="high" />';                join += '<embed src="../FusionCharts/Column2D.swf" flashVars="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300" quality="high" width="500" height="300" id="Column2D" type="application/x-shockwave-flash"  pluginspage="http://www.macromedia.com/go/getflashplayer" />';                join += '</object>';                $('#dumphere').append(join);            }        </script>        <style type="text/css">        </style>    </head>    <body>        <div id="dumphere">           <!-- <script> ///option 2 - just remove comment tags                insertme('ESCombo7');            </script>-->        </div>    </body></html>
Link to comment
Share on other sites
A_tom Newbie

A_tom

Posted
  • Author
Posted

So far, so good. The page above renders ok, and I have modified it so it will look like all my existing chart pages. What I still need is to understand how to pass the 'ESCombo7' as a variable or value from the page where the link is which will cause the chart page to load. I gather there are several ways to do this, but I can't understand any of them well enough to implement it or to understand which is the best/correct method.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

You could add chart ref to custom data- attribute to the container with id dumphere, give the link a id ref and target it as well to replace href and inner html

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            $(function() {                if ($('#dumphere').index() !== -1) // if id ref 'dumphere is found proceed                {                    var ref = $('#dumphere').attr('data-chartref'); // get custom data- attribute value and assign it to ref                    var join = "";                    join += '<object type="application/x-shockwave-flash" width="500" height="300">';                    join += '<param name="movie" value="../FusionCharts/Column2D.swf" />';                    join += '<param name="FlashVars" value="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300">';                    join += '<param name="quality" value="high" />';                    join += '<embed src="../FusionCharts/Column2D.swf" flashVars="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300" quality="high" width="500" height="300" id="Column2D" type="application/x-shockwave-flash"  pluginspage="http://www.macromedia.com/go/getflashplayer" />';                    join += '</object>';                    $('#dumphere').append(join); //append join content with chart ref to element with specific id                                $('#chartlink').attr('href', ref + ".html").html(ref); // change href and content within anchor open/closing tags with chart ref}            });        </script>        <style type="text/css">        </style>    </head>    <body>        <div id="dumphere" data-chartref="ESCombo7">        </div>        <p>            <a id="chartlink" href="#l">Please Enable JavaScript blah blah</a>        </p>    </body></html>
Edited by dsonesuk
Link to comment
Share on other sites
A_tom Newbie

A_tom

Posted
  • Author
Posted

I could not get your last code to load a chart, but I've been looking at using PHP, and this is what I've come up with.

In the html calling page I've changed the link which calls the chart page to this:

<p><a title="" href="FCBarChart.php?sysname=ESCombo7">Bar chart for last 24 mo.</a></p>

 

This will pass the sysname as a variable in the url.

 

Now, using your first example above I've change the chart page to this

 

!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <link href="styles.css" rel="stylesheet" type="text/css" />        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">$(function(){    //option 1    //insertme('ESCombo7');    insertme('<?php echo $_GET["sysname"] ?>');});            function insertme(ref) {//this can be placed in external js file                var join = "";                join += '<object type="application/x-shockwave-flash" width="500" height="300">';                join += '<param name="movie" value="../FusionCharts/Column2D.swf" />';                join += '<param name="FlashVars" value="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300">';                join += '<param name="quality" value="high" />';                join += '<embed src="../FusionCharts/Column2D.swf" flashVars="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300" quality="high" width="500" height="300" id="Column2D" type="application/x-shockwave-flash"  pluginspage="http://www.macromedia.com/go/getflashplayer" />';                join += '</object>';                $('#dumphere').append(join);            }        </script>        <style type="text/css">        </style>    </head>    <body class="twoColFixLtHdr">        <div id="container">    <div id="header" class="fltlft"><img src="images/logo.jpg" alt="SIF Trading Systems Logo" class="fltlft" />    <img src="images/software_box.jpg" alt="Software Box" class="fltrt" />          </div>    <br class="clearfloat" />         <div id="dumphere" style="text-align: center">           <!-- <script> ///option 2 - just remove comment tags                insertme('ESCombo7');            </script>--></div><div style="margin-left: 200px"><br><p>This chart is automatically updated directly from a TradeStation chart.</p><p style="margin-right: 125px">PAST PERFORMANCE WHETHER REAL OR HYPOTHETICAL IS NO GUARANTEE OF FUTURE RESULTS.</p></div><div id="footer"><p><a href="ESCombo7.html">ESCombo7</a></p></div>        </div>        </body></html>

This correctly loads the chart page, so I can now maintain only one chart page and just pass the sysname variable to tell it which xml file to use.

 

Is this a proper/good way to do this?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Only drawback insertme('<?php echo $_GET["sysname"] ?>'); has to be placed in php every time, but in my previous post all can be placed in external js file, you just add target chart file ref to data-chartref="ESCombo7" 

<div id="dumphere" data-chartref="ESCombo7">

it will then find this and creates object, embed tags with this chart ref.

Edited by dsonesuk
Link to comment
Share on other sites
A_tom Newbie

A_tom

Posted
  • Author
Posted

Only drawback insertme('<?php echo $_GET["sysname"] ?>'); has to be placed in php every time, but in my previous post all can be placed in external js file, you just add target chart file ref to data-chartref="ESCombo7"

<div id="dumphere" data-chartref="ESCombo7">

it will then find this and creates object, embed tags with this chart ref.

I have rerun the code you are referencing here and it does load the page; not sure why it didn't before. In order to understand what you've done, I need a much better understanding of how js works, and that will take some time, and I'm not sure that investment in time is worth my trouble. When I used the php, I understood how the xml file reference was being passed to the page which is to display the data in the xml file. I do not understand how that is supposed to work in your example. What does that calling page need to do using js to get the xml file reference passed to the page being called and which is supposed to display the data in that file?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

I was under the impression when calling xml files they will be as

 

ESCombo7MoBar.xml

ESCombo8MoBar.xml

ESCombo9MoBar.xml...

 

Only the part in red changes.

 

So if you add this part of text to custom data- attribute on the element which has the id ref 'dumphere', your important part of file

 

<div id="dumphere" data-chartref="ESCombo7">

 

can be used and added to remaining xml file name to produce the complete file name, when the object and embed code are created.

 

var ref = $('#dumphere').attr('data-chartref'); // get custom data- attribute value and assign it to ref

 

var join = "";join += '<object type="application/x-shockwave-flash" width="500" height="300">';join += '<param name="movie" value="../FusionCharts/Column2D.swf" />';join += '<param name="FlashVars" value="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300">';join += '<param name="quality" value="high" />';join += '<embed src="../FusionCharts/Column2D.swf" flashVars="&dataURL=clientFTP/' + ref + 'MoBar.xml&chartWidth=500&chartHeight=300" quality="high" width="500" height="300" id="Column2D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';join += '</object>';

 

will result in

 

value="&dataURL=clientFTP/ESCombo7MoBar.xml&chartWidth=500&chartHeight=300"

OR

value="&dataURL=clientFTP/ESCombo8MoBar.xml&chartWidth=500&chartHeight=300"

OR

value="&dataURL=clientFTP/ESCombo9MoBar.xml&chartWidth=500&chartHeight=300"

 

 

depending on what data-chartref value is.

 

Thiis finds div with id 'dumphere' and appends the object/embed code stored in join.

$('#dumphere').append(join);

 

this as optional added option will find link with id 'chartlink' and change link and innerhtml text

$('#chartlink').attr('href', ref + ".html").html(ref);

 

<a id="chartlink" href="#l">Please Enable JavaScript blah blah</a>

now becomes

<a id="chartlink" href="ESCombo7.html">ESCombo7</a>

 

This ends the tutorial on how this function works, any question?

Link to comment
Share on other sites
A_tom Newbie

A_tom

Posted
  • Author
Posted

Yes. How does the page which displays the chart (ESCombo7 24 Mo Bar Chart), acquire the name of the system for which the chart is to be displayed from the page which is requesting the chart page (ESCombo7 Main Page)? If you look at the main page, you'll see two links which are both requesting the 24 month bar chart. One is my original method, and the other uses php to request the chart page by passing the name of the system to a generic chart display page. So my question was, how does that happen using js instead of php. You may well have explained how that is to be done, but I have failed to grasp it. If that is the case, then don't go to any more trouble; just tell me to look harder.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Is the chart page a single page? which you send information regarding what chart to show? not quite understanding, this is the only conclusion i have come up with with what you are trying to achieve, IF not! i don't understand, what you are not getting with my method, it is not sending variable value through get querystring on what chart to show, but gathering this information directly from custom data- attribute, set on individual pages.

Link to comment
Share on other sites
A_tom Newbie

A_tom

Posted
  • Author
Posted

Is the chart page a single page? which you send information regarding what chart to show? not quite understanding, this is the only conclusion i have come up with with what you are trying to achieve, IF not! i don't understand, what you are not getting with my method, it is not sending variable value through get querystring on what chart to show, but gathering this information directly from custom data- attribute, set on individual pages.

I'm sorry, but I've probably done a poor job of even asking the right question. This is the main website: SIFTradingSystems If you go there, you'll see a menu on the left which invites you to go to some linked pages (different systems). Each system has it's own main page like ESCombo7. Once you get to a system page, you have the opportunity to pull up one of a number of charts which will give some historical performance on the system, usually a flash chart, such as the one we'be been working on: ESCombo7 monthly bar chart. Each system may have 3 or 4 charts, and up until now, each chart has had its own page. It dawned on me that I might be able to avoid duplicating all these pages, by just have a generic page and telling it which data file to use when the page is loaded. The hand off of this system name needs to occur between the system page and the chart page. That's what I've been trying to figure out how to do. I hope that's clearer, but since I've already have the php method, perhaps we should just let it go at that.

 

I appreciate all your help.

Link to comment
Share on other sites
A_tom Newbie

A_tom

Posted
  • Author
Posted

I've run across one more small problem with these revisions. Everything seems to work ok with Chrome and IE, but Firefox will not display the chart. It does have the flash plug in and it will display the chart on the old website, but not the new one.

 

Any suggestions?

 

Here is the page which is supposed to display the chart:

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <link href="styles.css" rel="stylesheet" type="text/css" />        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">$(function(){    //option 1    //insertme('ESCombo7');    insertme('<?php echo $_GET["sysname"].$_GET["period"]."Bar" ?>');});            function insertme(ref) {//this can be placed in external js file                var join = "";                join += '<object type="application/x-shockwave-flash" width="500" height="300">';                join += '<param name="movie" value="../FusionCharts/Column2D.swf" />';                join += '<param name="FlashVars" value="&dataURL=clientFTP/' + ref + '.xml&chartWidth=500&chartHeight=300">';                join += '<param name="quality" value="high" />';                join += '<embed src="../FusionCharts/Column2D.swf" flashVars="&dataURL=clientFTP/' + ref + '.xml&chartWidth=500&chartHeight=300" quality="high" width="500" height="300" id="Column2D" type="application/x-shockwave-flash"  pluginspage="http://www.macromedia.com/go/getflashplayer" />';                join += '</object>';                $('#dumphere').append(join);            }        </script>        <style type="text/css">        </style>    </head>    <body class="twoColFixLtHdr">        <div id="container">    <div id="header" class="fltlft"><img src="images/logo.jpg" alt="SIF Trading Systems Logo" class="fltlft" />    <img src="images/software_box.jpg" alt="Software Box" class="fltrt" />          </div>    <br class="clearfloat" />         <div id="dumphere" style="text-align: center">           <!-- <script> ///option 2 - just remove comment tags                insertme('ESCombo7');            </script>--></div><div style="margin-left: 200px"><br><p>This chart is automatically updated directly from a TradeStation chart.</p><p style="margin-right: 125px">PAST PERFORMANCE WHETHER REAL OR HYPOTHETICAL IS NO GUARANTEE OF FUTURE RESULTS.</p></div><div id="footer"><p><a href="<?php echo $_GET["sysname"] ?>.html"><?php echo $_GET["sysname"] ?></a></p></div>        </div>        </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...