2015-09-08 19 views
11

Ich habe eine Webanwendung erstellt, die Eingaben von einem Benutzer entgegennimmt, eine API abfragt, die Daten mit PHP verarbeitet und sie dann als eine Serie von Diagrammen mit jQuery und D3 darstellt. Ich habe dies ursprünglich prozedural eingerichtet, habe es aber inzwischen mit dem Laravel-Framework implementiert. Das Problem, das ich habe, ist, dass das JavaScript auf der letzten Seite nicht richtig funktioniert; Ich denke, es hat etwas damit zu tun, wie das Blade-Vorlagensystem funktioniert.jQuery funktioniert nicht richtig in Laravel 5

Ich weiß, dass es die JavaScript-Datei korrekt aufruft, wie es die ersten Grafiken lädt. Es gibt jedoch einige zusätzliche Funktionen, um die Graphen nach verschiedenen Zeitspannen neu zu laden und auch durch die Daten in den Graphen zu blättern. Nachdem die Seite geladen wurde, funktioniert kein jQuery-Programm mehr.

, Auf jeden Fall hier ist der Code:

FÜHRUNG: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('/', '[email protected]'); 

// perform POST on 'data' and call method 'process' on the PagesController class 
Route::post('data', '[email protected]'); 

?> 

BASE TEMPLATE:app.blade.php (resources \ Ansichten)

<!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('[email protected]') }}"><span class="glyphicon glyphicon-home"></span></a></li> 
         <li><a href="{{ action('[email protected]') }}">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> 

STARTSEITE:home.blade.php (resources \ Ansichten \ Seiten)

{{-- 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 \ Ansichten \ Seiten)

@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 VERARBEITUNG: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); 

}); 

ich über meine char Grenze ging so hatte einen Teil des Codes zu schneiden, aber ich glaube, ich habe links, was wichtig ist, das Problem zu identifizieren.

Grundsätzlich lädt es die Seite mit den Grafiken fein, aber wenn Sie versuchen, neue Diagramme mit dem Dropdown-Menü #timeSelect oder durch die Daten mit #next1 zu scrollen, passiert nichts.

Lassen Sie mich wissen, wenn Sie weitere Informationen benötigen - danke.

** ZUSÄTZLICHE INFORMATIONEN **

I verwendet https://github.com/laracasts/PHP-Vars-To-Js-Transformer um meine Daten zu der Ansicht zu bekommen, um die Grafiken zu laden. Wenn Sie dies verwenden, veröffentlicht es eine Datei config namens javascript.js. Ich habe dies geändert, um meine App anzupassen, aber dies könnte sein, wo ich falsch liege. Das ist meine geänderte Datei:

javascript.php (config)

return [ 
    'bind_js_vars_to_this_view' => 'pages.data', 

    'js_namespace' => 'Graphs' 
]; 
+2

überprüfen Sie Ihre Browser-Konsole –

+4

Beitrag mehr Code bitte. –

+0

@GaneshGhalame keine Fehler in der Konsole – jayrdi

Antwort

6

Sie haben eine Menge Code geschrieben, und nicht die Besonderheiten auf, was versagt.Wie auch immer, mein Vorschlag ist, versuchen Sie Ihren Javascript-Code nach allem HTML-Code, mit Klinge oder nicht, Reihenfolge Angelegenheiten. Sie müssen also sicher sein, dass Sie alle Bibliotheken aufrufen, bevor Sie Ihren JavaScript-Code ausführen, und tun Sie alles, nachdem Ihr HTML-Code bereits gerendert wurde (am Ende der Fußzeile).

+0

Danke, ich war mir zunächst nicht sicher, warum und wo es scheiterte, daher der ganze Code. Wie du aber sagst, ist das Problem, wenn die Bibliotheken geladen sind. Ich bin für eine Woche weg, werde aber versuchen, die Skript-Links zu verschieben, wenn ich zurück bin. Ich denke du hast recht, dass das das Problem ist. Danke für Ihre Hilfe. – jayrdi

+0

Perfekt, lassen Sie mich wissen, wenn Sie mehr Hilfe benötigen. –

3

Try-Wechsel:

selector.on("change", function(e) { 

für:

$(document).on('change', '#timeSelect', function(e) { 

Ihre $(document).ready(); ausführt früher, als es sollte vielleicht

1

Höchstwahrscheinlich werden Sie versuchen, ein Element zuzugreifen, die nicht bereit ist, #next funktioniert nicht und ist auch nicht verpackt. Wickeln Sie einfach den gesamten Code in $(document).ready()

$(document).ready(function() { 
}); 

oder legen Sie den gesamten Code im unteren Teil der Seite - $(document).ready(function(){}); vs script at the bottom of page

Verwandte Themen