web-dev-qa-db-ja.com

jQueryがLaravel 5で正しく機能しない

ユーザーからの入力を受け取り、APIをクエリし、PHPでデータを処理し、jQueryとD3を使用して一連のグラフとして表示するWebアプリケーションを作成しました。最初にこれを設定しました手続き的な方法で、しかしそれ以来Laravelフレームワークを使用してそれを実装しています。私が抱えている問題は、JavaScriptが最終ページで正しく機能していないことです。それは何かと関係があると思いますブレードテンプレートシステムの動作方法。

最初のグラフをロードするときに、JavaScriptファイルに正しくアクセスしていることを知っています。ただし、さまざまな期間に従ってグラフを再読み込みしたり、グラフ内のデータをスクロールしたりするための追加機能がいくつかあります。ページをロードした後、jQueryのものはどれも機能していません。

とにかく、ここにコードがあります：

ルーティング：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');

?>

ベーステンプレート：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.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.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処理：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);

});

Charの制限を超えたため、コードの一部を切り取らなければなりませんでしたが、問題を特定するために重要なことは残したと思います。

基本的にはグラフを含むページを正常にロードしますが、#timeSelectドロップダウンを使用して新しいグラフをロードしようとしたり、#next1を使用してデータをスクロールしようとしても、何も起こりません。

さらに情報が必要な場合はお知らせください-ありがとうございます。

**追加情報**

グラフをロードするためにデータをビューに取得するために、 https://github.com/laracasts/PHP-Vars-To-Js-Transformer を使用しました。これを使用すると、javascript.jsというファイルがconfigに公開されます。私は自分のアプリに対応するためにこれを変更しましたが、これは私が間違っているところかもしれません。これは私の修正されたファイルです：

javascript.php（config）

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

    'js_namespace' => 'Graphs'
];
phpjquerylaravel-5blade
12
John Dawson

あなたはたくさんのコードを投稿しましたが、何が失敗しているのかについての詳細ではありません。とにかく、私の提案は、ブレードを使用するかどうかに関係なく、すべてのHTMLコードの後に​​Javascriptコードを作成することです。したがって、JavaScriptコードを実行する前にすべてのライブラリを呼び出していることを確認する必要があります。また、HTMLコードが既にレンダリングされた後（フッターの最後）にすべてを呼び出すことが望ましいです。

8
Yoandro Gonzalez

変更してみてください：

_selector.on("change", function(e) {
_

にとって：

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

たぶんあなたの$(document).ready();は本来よりも早く実行されています

3
Aramil Rey

これは私のために働いた。 jqueryは正常に読み込まれていましたが、機能していませんでした。 bootstrapおよびjqueryスクリプトをlaravelに含まれているため、呼び出す必要があるかどうかはわかりません。

Laravelは、ナビゲーションバー/ログインシステムを設定するときにjqueryを呼び出します。ヘッダーには次のものがあります。

    <script src="{{ asset('js/app.js') }}" defer ><script>

'defer'を削除したところ、jqueryが起動しました。

    <script src="{{ asset('js/app.js') }}"  ></script>
1
Glen

準備ができていない要素にアクセスしようとしている可能性があります。_#next_は機能しておらず、ラップもされていません。すべてのコードを$( document ).ready()でラップするだけです

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

または、すべてのコードをページの下部に配置します $（document）.ready（function（）{}）; vsスクリプトをページの下部に配置します

1
Mike