Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, if I'm understanding you correctly, you're having trouble conceiving and designing what parts of these actions are server-side (PHP) and what parts are client side (Javascript) and then the client-server communication strategy. This is a common speedbump. There's several ways to deal with it.</p> <p>First (and less preferred) you could create a form and reload the whole page with the new date range:</p> <pre><code>// we're looking for '+1 year', '+3 months' or '+1 month'. if someone really // wants to send another value here, it's not likely to be a security risk // but know your own application and note that you might want to validate $range = isset($_GET['range'])&amp;&amp;$_GET['range']?$_GET['range']:'+1 year'; $begin = new DateTime(date('Y-m-d', strtotime('+1 days'))); $end = new DateTime(date('Y-m-d', strtotime($range))); // ... the rest of your code to build the chart. ?&gt; &lt;form action="&lt;?= $_SERVER['PHP_SELF']; ?&gt;" method="get"&gt; &lt;select name="range" size="1"&gt; &lt;option value="+1 year"&gt;1 year&lt;/option&gt; &lt;option value="+3 months"&gt;3 months&lt;/option&gt; &lt;option value="+1 month"&gt;1 month&lt;/option&gt; &lt;/select&gt; &lt;input type="submit" name="action" value="Redraw Chart"&gt; &lt;/form&gt; </code></pre> <p>... the reason that's the less preferred is because it causes a whole refresh of the page.</p> <p>If you want to avoid a whole page refresh, you're doing pretty much the same thing, but do it with ajax. The setup is almost identical, just a couple minor changes:</p> <pre><code>// between building the data table and the javascript to build the chart... $jsonTable = json_encode($table); if (isset($_GET['ajax']) &amp;&amp; $_GET['ajax']) { echo json_encode(array('table' =&gt; $table)); exit; } // remainder of your code, then our new form from above ?&gt; &lt;form id="redraw_chart_form" action="&lt;?= $_SERVER['PHP_SELF']; ?&gt;" data-ajaxaction="forecast.php" method="get"&gt; &lt;? foreach ($_GET as $key =&gt; $val) { ?&gt; &lt;input type="hidden" name="&lt;?= $key; ?&gt;" value="&lt;?= $val; ?&gt;"&gt; &lt;? } ?&gt; &lt;input type="hidden" name="ajax" id="redraw_chart_form_ajax" value="0"&gt; &lt;select name="range" size="1"&gt; &lt;option value="+1 year"&gt;1 year&lt;/option&gt; &lt;option value="+3 months"&gt;3 months&lt;/option&gt; &lt;option value="+1 month"&gt;1 month&lt;/option&gt; &lt;/select&gt; &lt;input type="submit" name="action" value="Redraw Chart"&gt; &lt;/form&gt; &lt;script&gt; // I'm assuming you've got jQuery installed, if not there are // endless tutorials on running your own ajax query $('#redraw_chart_form').submit(function(event) { event.preventDefault(); // this stops the form from processing normally $('#redraw_chart_form_ajax').val(1); $.ajax({ url: $(this).attr('data-ajaxaction'), type: $(this).attr('method'), data: $(this).serialize(), complete: function() { $('#redraw_chart_form_ajax').val(0); }, success: function(data) { // referring to the global table... table = data.table; drawChart(); }, error: function() { // left as an exercise for the reader, if ajax // fails, attempt to submit the form normally // with a full page refresh. } }); return false; // if, for whatever reason, the preventDefault from above didn't prevent form processing, this will }); &lt;/script&gt; </code></pre> <hr> <p>Edit for clarity:</p> <ol> <li><p>Don't forget to use the following block of code from the first (page refresh) example, otherwise you're not using the form at all:</p> <p><code>$range = isset($_GET['range'])&amp;&amp;$_GET['range']?$_GET['range']:'+1 year';</code></p> <p><code>$begin = new DateTime(date('Y-m-d', strtotime('+1 days')));</code></p> <p><code>$end = new DateTime(date('Y-m-d', strtotime($range)));</code></p></li> <li><p>Ajax will only work if the <em>only</em> data you're sending back is the json encoded block, which means your chart building data needs to be at the top of the script before <em>any</em> HTML output is started, including your page template. If you can't put the chart building code at the top of the script, then you'll have to add it to a whole separate script that all it does is calculate the data for the chart, and then you can have it return the ajax data without all of the other HTML on the page. If you can't do either of those things, you'll just have to turn off the Ajax bit and do a whole page refresh.</p></li> </ol> <hr> <p>Edit 2: I added the <code>data-ajaxaction</code> attribute to the <code>&lt;form&gt;</code> element, this is a user defined attribute that I made up to provide a different action just for ajax. I also changed the <code>$.ajax()</code> call to use this attribute rather than the <code>action</code> attribute.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. COThanks. Yes, you understand me correctly, and yes I prefer the AJAX method. I have jQuery installed. I have included your code on the page, but when clicking on the 'Redraw Chart' button, I'm redirected to the url `http://www.finance.nickputman.com/?ajax=0&range=%2B1+year&action=Redraw+Chart` which shows me my home page, rather than the current page which has the following url: `http://www.finance.nickputman.com/?page_id=174`. Any ideas why this is happening?
      singulars
    2. COOK, first things first, in the form tag change `action="<?= $_SERVER['PHP_SELF']; ?>"` to `action="<?= $_SERVER['PHP_SELF']; ?>?<?= $_SERVER['QUERY_STRING']; ?>"`. This will keep you on `page_id=174`, and fixing that *should* get the form to work, just with a page refresh. Secondly, it looks like it's not executing any of the jQuery onsubmit event. Look for errors in the javascript console that would keep the javascript from executing (if you're using Chrome, hit f12 and hit the "console" tab). Before `preventDefault()`, put `alert('debug');`, see if it runs.
      singulars
    3. COThanks. The jQuery error is `'Semantic Issue - Expected token ')'` on this line: `url: $(this).attr('action'),`. There is still an issue with the URL string for the form action. With your suggested modification I am still redirected to the home page. If I leave out `<?= $_SERVER['PHP_SELF']; ?>` and `?` from the URL, then the URL is correct apart from the inclusion of the question mark, i.e. `http://www.finance.nickputman.com/page_id=174?ajax=0&range=%2B3+months&action=Redraw+Chart`.
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload