Problem with jQuery in Laravel

[John Dawson]

Hello everyone, I'm new to the group and am hoping that someone may be able to help me with a problem I'm having with a web application I've created.

The web app 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.

I've attached a screen dump of the final screen that displays the data.  The 'Change time span' drop down menu should reload the graph data, and the 'next' and 'previous' buttons should scroll through the data, but neither of these are working.

I don't want to paste a load of unnecessary code here but here is a link to the question I have asked on Stack Overflow:

http://stackoverflow.com/questions/32454521/jquery-not-working-properly-in-laravel-5

I don't know where the problem lies which is why I have placed so much code in that question, but that's probably why it's had no answers!

Thank you in advance for any help; I'm really stuck with this!

John

[Alan Wynn]

Hi John,

Just having a quick look over the email/SO I can see that you haven’t mentioned anything about the config (https://github.com/laracasts/PHP-Vars-To-Js-Transformer#defaults)

All your javascript should be as low down the HTML as you can get it so not to block the IO. Because of this I would recommend you using a “scripts” section or something similar. This way you can have a footer blade file that loads in all your javascript libraries in, then your shared javascript via the laracasts js package, and finally any supporting code.

The reason I mention all of this before getting to my point is because it looks like the package defaults to a view/partial called footer. I don’t see any mention of a file that being done (mentioned here https://github.com/laracasts/PHP-Vars-To-Js-Transformer#bind_js_vars_to_this_view).

Regards,

Alan

-- 
Alan Wynn
Sent with Airmail

--
You received this message because you are subscribed to the Google Groups "PHPNE" group.
To unsubscribe from this group and stop receiving emails from it, send an email to php-north-eas...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

---

[John Dawson]

Hi Alan,

Thanks for getting back to me.  I moved the script links to the bottom of data.blade.php but still no difference.  In the base template app.blade.php I load in the scripts for jQuery and Bootstrap (to use on all pages), for the homepage view home.blade.php I load in the script for the JavaScript specific to that page (script.js).

I changed the javascript.php file created when publishing PHP-Vars-To-Js-Tranformer to this:

    return [

        'bind_js_vars_to_this_view' => 'pages.data',

        'js_namespace' => 'Graphs'

    ];

In graphs.js I am then getting the data using that namespace via e.g. Graphs.allCited.  I can call the data in the console so I'm guessing the namespace may be incorrect but maybe there is a problem with how I've set up the bind_js_vars_to_this_view variable.  pages.data refers to the view that displays all the graphs, as per the previous screen dump.  It's stored as resources\views\pages\data.blade.php.

In routes.php I refer to the route as Route::post('data', 'PagesController@process'); and then, at the end of process, I call return View::make('pages.data');

I may have got something wrong here as I am very new to Laravel!  It seems the problem is in the routing, templating or script links somehow.

Thanks for your help with this, I've been having a nightmare.

John 

[John Dawson]

Sorry, when I said that I thought the namespace is incorrect, I meant correct...

[John Dawson]

After some troubleshooting, it seems that the problem is with the way I've implemented the PHP-Vars-To-JS-Transformer.  The console recognises all the data that I have passed through via the PagesController like Graphs.allCited or Graphs.userFunded, but doesn't recognise any of the variables created in graphs.js dynamically.  That is, it must recognise them when it first loads the page as it uses e.g. palette1 to colour the bar graph for the first graph, but after the page has loaded, palette1 comes up as undefined in the console.

I'm not sure why this is though - has anyone used PHP-Vars-To-JS-Transformer before and can spot what I'm doing wrong?

Thanks a lot,

John

On Tuesday, September 8, 2015 at 5:26:44 PM UTC+1, Alan Wynn wrote: