I have created a web application that takes input from a user, queries an API, processes the data with PHP and then presents it as a series of graphs using jQuery and D3. I initially set this up in a procedural manner but have since been implementing it using the Laravel framework. The problem I am having is that the JavaScript is not working properly in the final page; I think it has something to do with the way the Blade template system works.
I know that it is accessing the JavaScript file correctly as it loads up the initial graphs. However there is some extra functionality to reload the graphs according to different time spans and also to scroll through the data in the graphs. After it has loaded the page, none of the jQuery stuff is working.
Anyway, here is the code:
ROUTING: routes.php (app\Http)
<?php
// perform GET request on root and call method 'index' on the PagesController class
// (app/Http/Controllers/PagesController.php)
Route::get('/', 'PagesController@index');
// perform POST on 'data' and call method 'process' on the PagesController class
Route::post('data', 'PagesController@process');
?>
BASE TEMPLATE: app.blade.php (resources\views)
<!DOCTYPE HTML>
<html lang="en">
<head>
{{-- this stops the default compatibility view for intranet sites in IE --}}
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>Academic Intelligence</title>
{{-- LINKS --}}
{{-- local css file --}}
{!! HTML::style('css/style.css') !!}
{{-- bootstrap css (bootswatch readable style) --}}
{!! HTML::style('//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css') !!}
{{-- SCRIPTS --}}
{{-- jquery --}}
{!! HTML::script('https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js') !!}
{{-- bootstrap js --}}
{!! HTML::script('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js') !!}
</head>
<body>
{{-- TITLE BAR --}}
<div class="sg-titlebar">
<h1><a title="Newcastle University Homepage" accesskey="1" href="http://www.ncl.ac.uk/"/><span title="Newcastle University">Newcastle University</span></a></h1>
<h2><a href="https://resviz.ncl.ac.uk/wos/">Academic Intelligence</a></h2>
</div>
<div class="sg-content">
{{-- NAVIGATION BAR --}}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="{{ action('PagesController@index') }}"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a href="{{ action('PagesController@about') }}">About</a></li>
</ul>
</div> {{-- navbar-collapse --}}
</div> {{-- container --}}
</nav> {{-- navbar --}}
{{-- main content --}}
<section class="container">
{{-- unique section to other pages --}}
@yield('content')
</section> {{-- main content; container --}}
</div> {{-- sg-content --}}
{{-- FOOTER --}}
</body>
</html>
HOME PAGE: home.blade.php (resources\views\pages)
{{-- this HTML is inserted into app.blade.php as content --}}
@extends('app')
@section('content')
{{-- local script --}}
{!! HTML::script('js/script.js') !!}
<div class="row">
{{-- search form --}}
{{-- using Illuminate\Html\HtmlServiceProvider package --}}
{!! Form::open(['url' => 'data', 'id' => 'form']) !!}
<fieldset>
<div class="form-group">
{{-- see http://getbootstrap.com/css/#grid for explanation of Bootstrap grid system --}}
<div class="col-lg-6 well bs-component">
{{-- 'journal(s) section of form' --}}
<div class="journal_fields_wrap">
{{-- 'journal(s)' section header --}}
<h4 class="form_title">Journal</h4>
{{-- buttons above 'journal(s)' input boxes --}}
<div class="journal_buttons">
{{-- loads a list of journals on Web of Science --}}
<a class="btn btn-success" target="_blank" href="http://ip-science.thomsonreuters.com/cgi-bin/jrnlst/jloptions.cgi?PC=D"
data-toggle="tooltip-down" title="Search Thomson Reuters for journals">Journal List</a>
{{-- add extra input field for journals --}}
{!! Form::button('<span class="glyphicon glyphicon-plus"></span> Add more fields', ['class' => 'add_journal_field_button btn btn-info']) !!}
</div> {{-- journal_buttons --}}
{{-- input box for journal(s) --}}
<div class="form_field">
{{-- parameters: textbox(name, default value, options array) --}}
{!! Form::text('journal1', null, ['class' => 'form-control', 'data-toggle' => 'tooltip-right', 'title' => 'Please enter only one journal per box']) !!}
</div> {{-- form_field --}}
</div> {{-- journal_fields_wrap --}}
{{-- 'keyword(s)' section of form --}}
<div class="title_fields_wrap">
{{-- 'keyword(s)' section header --}}
<h4 class="form_title">Keyword</h4>
{{-- buttons above 'keyword(s)' input boxes --}}
<div class="title_buttons">
{{-- add extra input field for keywords --}}
{!! Form::button('<span class="glyphicon glyphicon-plus"></span> Add more fields', ['class' => 'add_title_field_button btn btn-info']) !!}
</div> {{-- title_buttons --}}
{{-- input box for keyword(s) --}}
<div class="form_field">
{{-- parameters: textbox(name, default value, options array) --}}
{!! Form::text('title1', null, ['class' => 'form-control', 'data-toggle' => 'tooltip-right', 'title' => 'Please enter only one title per box']) !!}
</div> {{-- form_field --}}
</div> {{-- title_fields_wrap --}}
{{-- 'time span' section of form; header --}}
<h4 class="form_title">Time Span</h4></br>
{{-- 'From:' header --}}
{!! Form::label('select', 'From:', ['class' => 'col-lg-2 control-label']) !!}
<div class="col-lg-3">
{{-- parameters: selectbox(name, [data], default, [options]) --}}
{{-- data (years) provided by script.js --}}
{!! Form::select('timeStart', [], 'Select', ['class' => 'form-control', 'id' => 'select']) !!}
</div> {{-- col-lg-3 --}}
{{-- 'To:' header --}}
{!! Form::label('select', 'To:', ['class' => 'col-lg-2 control-label']) !!}
<div class="col-lg-3">
{{-- as other select box above --}}
{!! Form::select('timeEnd', [], 'Select', ['class' => 'form-control', 'id' => 'select']) !!}
</div> {{-- col-lg-3 --}
<br/><br/>
{{-- execute search; submit button --}}
{{-- parameters: button(text on button, [options]) --}}
{!! Form::button('<strong>Submit</strong><span class="glyphicon glyphicon-transfer"></span>', ['type' => 'submit', 'class' => 'btn btn-primary btn-lg', 'id' => 'submit']) !!}
</div> {{-- col-lg-6 --}}
<div class="col-lg-6 well bs-component">
{{-- bootstrap window --}}
<div class="modal-dialog">
<h4>Notes</h4>
<p>This application is optimised for Chrome.</p>
<p>In order to get the best results from your search,<br/>enter one or more journals.</p>
<p>Keywords and time spans are optional but can be<br/>used to refine your search.</p>
</div> {{-- modal-dialog --}}
</div> {{-- col-lg-6 --}}
</div> {{-- form-group --}}
</fieldset>
{!! Form::close() !!}
</div> {{-- row --}}
@stop
DATA DISPLAY: data.blade.php (resources\views\pages)
@extends('app')
@section('content')
<!-- d3 -->
{!! HTML::script('https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js') !!}
<!-- local script -->
{!! HTML::script('js/graphs.js') !!}
<section class="graphs container">
<div class="row col-lg-12" id="header">
<div class="col-lg-1"></div>
<div class="panel panel-info col-lg-7">
<div class="panel-heading">
<h2 class="panel-title">Search Parameters</h2>
</div>
<div class="panel-body">
<div id="journalData"></div>
<div id="keywordData"></div>
<div id="timescaleData"></div>
</div>
</div> <!-- panel panel-info -->
<div class="dropdown col-lg-2">
<div class="form-group">
<label for="select" class="control-label">Change time span:</label>
<select class="form-control" id="timeSelect">
<option value="chart2" selected>User defined</option>
<option value="chart4">Last 10 years</option>
<option value="chart5">Last 5 years</option>
<option value="chart6">Last 2 years</option>
</select>
</div>
</div> <!-- dropdown -->
<div class="col-lg-2"></div>
</div> <!-- row -->
<div class="graph_fields_wrap row backdrop col-lg-12">
<div class="col-lg-6">
<h3 class="titles">Ranked Author Citations</h3>
<h4 class="titles">All time (from 1970)</h4>
<button class="pager" id="previous1" type="button" disabled><span class="glyphicon glyphicon-chevron-left"></span> previous</button>
<button class="pager indexer" type="button" disabled>1 - 10</button>
<button class="pager" id="next1" type="button">next <span class="glyphicon glyphicon-chevron-right"></span></button>
<div class="chart1 well bs-component"></div>
</div>
<div class="col-lg-6">
<h3 class="titles">Ranked Author Citations</h3>
<h4 class="titles" id="userTitle"></h4>
<button class="pager" id="previous2" type="button" disabled><span class="glyphicon glyphicon-chevron-left"></span> previous</button>
<button class="pager indexer" type="button" disabled>1 - 10</button>
<button class="pager" id="next2" type="button">next <span class="glyphicon glyphicon-chevron-right"></span></button>
<div class="chart2 well bs-component"></div>
</div>
</div> <!-- row -->
</br>
<div class="row col-lg-12">
<div class="row backdrop col-lg-7" id="impact">
<h3 class="titles">Weighted Citation Factor</h3>
<h4 class="titles">All time (from 1970)</h4>
<div class="well bs-component" id="rankChart">
<div class="chart3"></div>
</div>
</div> <!-- row -->
<div class="backdrop col-lg-5" id="algorithm">
<h3 class="titles">Explanation of Bubble Chart</h3>
<div class="well bs-component">
<p>The weighted citation factor applies a weighting to citations based on the year of publication. The more recent the citation, the higher the weighting.</p>
<p>This chart takes into account data from all years. The higher the weighted citation factor, the larger the bubble.</p>
</div>
</div>
</div> <!-- col-lg-12 -->
</br>
<div class="graph_fields_wrap2 row backdrop col-lg-12">
<div class="col-lg-6">
<h3 class="titles">Ranked Awarded Funds (£millions)</h3>
<h4 class="titles">All time, UK only</h4>
<div class="chart7 well bs-component"></div>
</div>
<div class="col-lg-6">
<h3 class="titles">Ranked Awarded Funds (£millions)</h3>
<h4 class="titles userTitle">, UK only</h4>
<div class="chart8 well bs-component"></div>
</div>
</div> <!-- row -->
</section>
@stop
PHP PROCESSING: PagesController.php (app\Http\Controllers)
<?php namespace App\Http\Controllers;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use Request;
use App\SoapController;
use App\Models\SearchData;
use App\Models\SoapWrapper;
use App\Models\RestWrapper;
use App\Models\DataSort;
use App\Models\BubbleChartCompatible;
use DB;
use View;
use Laracasts\Utilities\JavaScript\JavaScriptFacade as JavaScript;
class PagesController extends Controller {
public function __construct()
{
$this->middleware('guest');
}
// method index returns view 'home' (resources/views/home.blade.php)
public function index()
{
return view('pages.home');
}
// method process returns view 'data' (resources/views/data.blade.php)
public function process()
{
... processes data ...
// pass data to JavaScript (uses https://github.com/laracasts/PHP-Vars-To-Js-Transformer)
JavaScript::put([
'allCited' => $allCited,
'userCited' => $userCited,
'tenCited' => $tenCited,
'fiveCited' => $fiveCited,
'twoCited' => $twoCited,
'valueData' => $valueData,
'allFunded' => $allFunds,
'userFunded' => $userFunds,
'tenFunded' => $tenFunds,
'fiveFunded' => $fiveFunds,
'twoFunded' => $twoFunds,
'searchData' => $searchParams
]);
return View::make('pages.data');
}
}
JAVASCRIPT: graphs.js (public\js)
$(document).ready(function() {
// pull data from PHP
// CITES
var allCitedData = $.parseJSON(Graphs.allCited);
var userCitedData = $.parseJSON(Graphs.userCited);
var tenCitedData = $.parseJSON(Graphs.tenCited);
var fiveCitedData = $.parseJSON(Graphs.fiveCited);
var twoCitedData = $.parseJSON(Graphs.twoCited);
// VALUES; leave in JSON format
var valueData = Graphs.valueData;
// FUNDS
var allFundedData = $.parseJSON(Graphs.allFunded);
var userFundedData = $.parseJSON(Graphs.userFunded);
var tenFundedData = $.parseJSON(Graphs.tenFunded);
var fiveFundedData = $.parseJSON(Graphs.fiveFunded);
var twoFundedData = $.parseJSON(Graphs.twoFunded);
// USER SEARCH PARAMETERS
var searchData = Graphs.searchData;
// different colour settings for graphs
var palette1 = {
fill: "steelblue",
hover: "brown"
};
var palette2 = {
fill: "seagreen",
hover: "darkorange"
};
var palette3 = {
fill: "darkblue",
hover: "darkmagenta"
};
var palette4 = {
fill: "darkolivegreen",
hover: "darkseagreen"
};
// set title for user defined graph
var graphTitle = $(".userTitle");
console.log(searchData.from + " to " + searchData.to);
graphTitle.prepend(searchData.from + " to " + searchData.to);
// change graph according to dropdown choice
var wrapperG = $(".graph_fields_wrap1"); // wrapper for div containing citations graphs
var wrapperF = $(".graph_fields_wrap2"); // wrapper for div containing funds graphs
var selector = $("#timeSelect"); // dropdown graph menu ID
// variables to log subset location in arrays (to use in slice)
var from1 = 0;
var to1 = 10;
var from2 = 0;
var to2 = 10;
var from3 = 0;
var to3 = 10;
var from4 = 0;
var to4 = 10;
var from5 = 0;
var to5 = 10;
var selected = "chart2";
// when the selection is changed in the dropdown menu do:
selector.on("change", function(e) {
// ignore default action for this event
e.preventDefault();
// remove currently displayed graph, 1st child of div (1st graph is 0th)
$(wrapperG.children()[1]).remove();
$(wrapperF.children()[1]).remove();
// get value of currently selected
var selectedVal = $(this).val();
selected = selectedVal;
// check value of selected
// append new graph to wrapper div & run loadGraph to reprocess data
if (selectedVal == "chart2") {
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button' disabled><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>1-10</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph(userCitedData.slice(0,10), selectedVal, palette2);
wrapperF.append("<div class='col-lg-6'><h3 class='titles'>Ranked Awarded Funds (£millions)</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + ", UK only</h4><div class='chart8 well bs-component'></div></div>").loadGraph(userFundedData.slice(0,10), "chart8", palette4);
} else if
... etc ...
});
/*****************************************/
/*********** PAGINATION *****************/
/*****************************************/
// ALL TIME CITED, chart1
// next author set
wrapperG.on("click", "#next1", function (e) {
// ignore default action for this event
e.preventDefault();
// shift pointers up 10 for next subset of array
from1 += 10;
to1 += 10;
// check if at end of data
if (to1 > (allCitedData.length)) {
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button' disabled>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
} else {
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
}
});
// all time cited, previous author set
wrapperG.on("click", "#previous1", function (e) {
// ignore default action for this event
e.preventDefault();
// shift pointers down 10 for previous subset of array
from1 -= 10;
to1 -= 10;
// check if at start of data
if (from1 == 0) {
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button' disabled><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
} else {
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
}
});
// OPTIONS CITED, charts 2, 4, 5 & 6
// optional cited, next author set
wrapperG.on("click", "#next2", function (e) {
// ignore default action for this event
e.preventDefault();
// remove currently displayed graph, 1st child of div (1st graph is 0th)
$(wrapperG.children()[1]).remove();
// check selectedVal to see which graph to append
switch(selected) {
case ("chart2"):
// shift pointers up 10 for next subset of array
from2 += 10;
to2 += 10;
// check if at end of data
if (to2 >= (userCitedData.length)) {
// load new graph after other graph (1st child of div)
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button' disabled>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
} else {
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
}
break;
... etc ...
}
});
// optional cited, previous author set
wrapperG.on("click", "#previous2", function (e) {
// ignore default action for this event
e.preventDefault();
// remove currently displayed graph, 1st child of div (1st graph is 0th)
$(wrapperG.children()[1]).remove();
// check selectedVal to see which graph to append
switch(selected) {
case ("chart2"):
// shift pointers down 10 for previous subset of array
from2 -= 10;
to2 -= 10;
// check if at start of data
if (from2 == 0) {
// load new graph after other graph (1st child of div)
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button' disabled><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
} else {
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
}
break;
case ("chart4"):
... etc ...
}
});
// create array to store various chart names
var fundedCharts = [
"chart7",
"chart8",
"chart9",
"chart10",
"chart11"
];
// Immediately Invoked Function Expression: allows '$' to work with any other plugins
(function ($) {
// add function to '$.fn' object (contains all jQuery object methods)
$.fn.loadGraph = function(graphData, graphSelect, graphColour) {
... creates graph from data ...
} (jQuery));
// bubble chart
(function ($) {
$.fn.loadBubbles = function(graphData, graphSelect) {
... creates bubble chart from data ...
} (jQuery));
// load initial graphs to page, 1st 10 authors
$(".chart1").loadGraph(allCitedData.slice(0,10), "chart1", palette1);
$(".chart2").loadGraph(userCitedData.slice(0,10), "chart2", palette2);
$(".chart3").loadBubbles(valueData, "chart3");
$(".chart7").loadGraph(allFundedData.slice(0,10), "chart7", palette3);
$(".chart8").loadGraph(userFundedData.slice(0,10), "chart8", palette4);
});
I went over my char limit so had to cut out some of the code but I think I've left what's important to identify the problem.
Basically it loads the page with the graphs fine, but if you try to load new graphs with the #timeSelect dropdown or scroll through the data with #next1, nothing happens.
Let me know if you need any more info - thanks.
** ADDITIONAL INFO **
I used https://github.com/laracasts/PHP-Vars-To-Js-Transformer in order to get my data to the view to load the graphs. When you use this it publishes a file to config called javascript.js. I have changed this to accommodate my app, but this could be where I'm going wrong. This is my amended file:
javascript.php (config)
return [
'bind_js_vars_to_this_view' => 'pages.data',
'js_namespace' => 'Graphs'
];
