javascript - Loading Highcharts via shim using RequireJS and maintaining jQuery dependency -


i'm attempting load highcharts library using shim in requirejs. however, when highcharts loads, throws exception because can't access jquery methods depends on.

the require config looks so:

require.config({     baseurl: "js",      shim: {          'libs/highcharts/highcharts.src.js': {             deps: ['jquery'],             exports: function(jquery)             {                 this.highchartsadapter = jquery;                  return this.highcharts;             }         }     } });

the exception thrown is:

uncaught typeerror: undefined not function

and in regards line:

datalabels: merge(defaultlabeloptions, {

the issue merge call, maps jquery (or other adapter highcharts supports; i'm using jquery).

i'm not sure how make sure highcharts gets access jquery using requirejs , shim.

has used requirejs , highcharts before? guess issue isn't specific highcharts, library has other sorts of dependencies.

thanks in advance advice or points correct direction!

to add further context, in hopes familiar require.js or shims able without having intimately familiar highcharts, here's source sets merge method in highcharts

var globaladapter = win.highchartsadapter, adapter = globaladapter || {},  // utility functions. if highchartsadapter not defined,  // adapter empty object // , utility functions null. in case  // populated // default adapters below.  // {snipped code}  merge = adapter.merge  // {snipped code}  if (!globaladapter && win.jquery) {     var jq = win.jquery;      // {snipped code}      merge = function () {         var args = arguments;         return jq.extend(true, null, args[0], args[1], args[2], args[3]);     };      // {snipped code} }

the win object reference set window @ beginning of script. so, thought adding window.jquery = jquery; export method on shim result in highcharts picking jquery reference; didn't.

again, insight, info, advice, or heckles appreciated @ point - i'm @ complete loss, , starting question whether trying implement , amd package system in browser javascript worth it.

after accepting answer pabera below thought appropriate update question reflect how answer helped solution (though, it's answer).

requirejs uses "paths" find libs aren't "amd" supported , loads them on page. "shim" object allows define dependencies libraries defined in paths. dependencies must loaded before requirejs try load dependent script.

the exports property provides mechanism tell requirejs how determine if library loaded. core libs jquery, backbone, socketio, etc export window level variable (backbone, io, jquery , $, etc). provide variable name exports property, , requirejs able determine when lib loaded.

once definitions done, can use requirejs' define function expected.

here's example require.config object:

require.config({     baseurl: "/js/",      paths: {         jquery: 'jquery',         socketio: 'http://localhost:8000/socket.io/socket.io', //for loading socket.io client library         highcharts: 'libs/highcharts/highcharts.src',         underscore: 'libs/underscore',         backbone: 'libs/backbone'     },      shim: {         jquery: {             exports: 'jquery'         },          socketio: {             exports: 'io'         },          underscore: {             exports: '_'         },          backbone: {             deps: ['jquery', 'underscore'],             exports: 'backbone'         },          highcharts: {             deps: ['jquery'],             exports: 'highcharts'         }     } });

as pabera mentioned before, require.js version 2.0.1.

i hope gets use out of this; know road blocked me little while; kept banging head same spot in wall did, posting this.

i had exact same problem , struggling around many hours until saw entry here. started on scratch , works me @ least.

requirejs.config({     baseurl:'/js/',     paths:{       jquery:'vendor/jquery',       handlebars: 'vendor/handlebars',       text: 'vendor/require-text',       chaplin:'vendor/chaplin',       underscore:'vendor/underscore',       backbone:'vendor/backbone',       highcharts: 'vendor/highcharts'     },      shim: {       backbone: {         deps: ['underscore', 'jquery'],         exports: 'backbone'       },       underscore: {         exports: '_'       },           highcharts: {         exports: 'highcharts'       }         }, });

since use chaplin on top of backbone, including more files in paths attribute. highcharts has similar structure backbone thought load same way. works me now. can see, introducing highcharts in paths attribute export shim afterwords.

maybe helps, otherwise let's try contribute on more solve problem.


Comments

Post a Comment

Popular posts from this blog

jquery - Invalid Assignment Left-Hand Side -

i trying assign class tag via jquery, resulting in error through firebug says "invalid assignment left-hand side" on fourth line below. <cfoutput> $('.pngfix a').each(function(index) { var hreflink = $(this).attr("href"); if (hreflink.tolowercase() = '../audio.cfm') { $(this).addclass('audioimg'); } }); </cfoutput> looking around online, looks syntax problem, don't seem see it... any tips? thanks if (hreflink.tolowercase() = '../audio.cfm') that attempts assign value, rather check equality. change = operator == .
Read more

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more