2015-09-08 24 views
11

Bir kullanıcıdan girdi alan, bir API sorgusu yapan, verileri PHP ile işleyen ve jQuery ve D3 kullanarak bir dizi grafik olarak sunan bir web uygulaması oluşturdum. Bunu başlangıçta prosedürel bir şekilde belirledim, ancak o zamandan beri Laravel çerçevesini kullanarak uyguluyordum. Sorun şu ki, JavaScript son sayfada düzgün çalışmıyor; Bence Blade şablon sisteminin çalıştığı bir şey var.jQuery düzgün çalışmıyor Laravel 5

JavaScript'in ilk grafikleri yüklediğinden doğru şekilde eriştiğini biliyorum. Bununla birlikte, grafikleri farklı zaman aralıklarına göre yeniden yüklemek ve ayrıca grafiklerdeki verilerde gezinmek için bazı ekstra işlevler vardır. Sayfayı yükledikten sonra jQuery öğelerinden hiçbiri çalışmıyor.

YÖNLENDİRME: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]'); 

?> 

TABAN TEMPLATE:app.blade.php (kaynaklar \ görünümler)

<!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> 

Neyse

, burada kodudur ANA SAYFA:home.blade.php (sayfaların \ kaynaklar \ görünümler)

{{-- 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 

VERİ EKRANI:data.blade.php (sayfaların \ kaynaklar \ görünümler)

@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 İŞLEME:PagesController.php (app \ Http Kontrolörleri \)

<?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: Benim Char sınırı gittigraphs.js (kamu \ 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); 

}); 

böylece kod bazılarını kesmek zorunda kaldı ama ben sorunu tanımlamak için önemli olanları unutmuşum.

Temel olarak, grafikleri ince bir sayfa ile yükler, ancak #timeSelect açılır menüsüyle yeni grafikler yüklemeye veya #next1 ile veriyi kaydırmaya çalışırsanız, hiçbir şey olmuyor.

Daha fazla bilgiye ihtiyacınız varsa bildirin - teşekkürler. EK BİLGİ **

** Ben grafikleri yüklemek için görünümüne benim verileri almak için https://github.com/laracasts/PHP-Vars-To-Js-Transformer kullandı. Bunu kullandığınızda, javascript.js adlı config dosyasına bir dosya yayımlar. Uygulamamı barındırmak için bunu değiştirdim, ancak bu yanlış gittiğim yer olabilir.

javascript.php (yapılandırma) Sen bir sürü kod gönderdiniz

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

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

Tarayıcınızın konsolu –

+4

Mesaj kontrol daha kod ediniz. –

+0

@GaneshGhalame konsolda hata yok – jayrdi

cevap

6

değil başarısız olduğunun üzerinde özelliklerini: Bu benim tadil dosyasıdır.Her neyse, önerim, tüm HTML kodlarından sonra, JavaScript kullanarak ya da değil, sipariş vermek için Javascript Kodunuzu almayı denemektir. Bu nedenle, javascript kodunuzu çalıştırmadan önce tüm kütüphaneleri aradığınızdan emin olmanız ve html kodunuz zaten oluşturulduktan sonra (altbilginin sonunda) tercih edilenleri yapmanız gerekir.

+0

Teşekkürler, ilk başta neden ve nerede başarısız olduğunu, dolayısıyla tüm kodu bilmiyorum. Yine de söylediğiniz gibi, kütüphaneler yüklendiğinde sorun olduğunu düşünüyorum. Bir haftaya uzağım ama geri döndüğümde betik linklerini oynatmaya çalışacağım. Bence haklısın, sorun bu. Yardım ettiğin için teşekkür ederim. – jayrdi

+0

Mükemmel, daha fazla yardıma ihtiyacınız varsa bildirin. –

3

deneyin değişen:

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

için:

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

Belki senin daha önce çalıştırdığı $(document).ready(); daha olması gerektiği