Smalltalk › Amber Smalltalk

jsTree jQuery Plugin

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

Sean P. DeNigris

jsTree jQuery Plugin

Administrator

I found http://forum.world.st/How-to-use-a-jquery-plugin-papa-parser-td4755151.html and the resulting stub issue https://github.com/vicnet/benevoles/issues/3

So far I:
- installed jsTree via "bower install git@github.com:vakata/jstree.git"
- required jsTree in index.html with:
function (smalltalk) {
//used for all new packages in IDE
smalltalk.initialize({
'transport.defaultAmdNamespace': "amber-mycoolproject"
});
require(['bower_components/jstree/dist/jstree.min']);
- put a sample tree in index.html body:
<div id="selector">
<ul>
<li>Team A's Projects
...
</li>
</ul>
</div>

Now, the plugin instructions () say to create an instance with "$("#selector").jstree();". If I do this in the console, the tree works fine, but how do I make this be automatically executed when the page loads. I tried putting it after the require, but that didn't work. Thanks.

Cheers,
Sean

Herby Vojčík

Re: jsTree jQuery Plugin

You should require in the same call where you require amber/devel and your project code. Not with independent require([...]) call which is async and detached, you lose all advantage of requirejs - dependency ordering.

"Sean P. DeNigris" <[hidden email]>napísal/a:

>I found
>http://forum.world.st/How-to-use-a-jquery-plugin-papa-parser-td4755151.html
>and the resulting stub issue https://github.com/vicnet/benevoles/issues/3
>
>So far I:
>- installed jsTree via "bower install [hidden email]:vakata/jstree.git"
>- required jsTree in index.html with:
> function (smalltalk) {
> //used for all new packages in IDE
> smalltalk.initialize({
> 'transport.defaultAmdNamespace': "amber-mycoolproject"
> });
> require(['bower_components/jstree/dist/jstree.min']);
>- put a sample tree in index.html body:
><div id="selector">
> <ul>
> <li> Team A's Projects
> ...
> </li>
> </ul>
></div>
>
>Now, the plugin instructions () say to create an instance with
>"$("#selector").jstree();". If I do this in the console, the tree works
>fine, but how do I make this be automatically executed when the page loads.
>I tried putting it after the require, but that didn't work. Thanks.
>
>
>
>-----
>Cheers,
>Sean
>--
>View this message in context: http://forum.world.st/jsTree-jQuery-Plugin-tp4766937.html
>Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>
>--
>You received this message because you are subscribed to the Google Groups "amber-lang" group.
>To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
>For more options, visit https://groups.google.com/d/optout.

Herby Vojčík

Re: jsTree jQuery Plugin

In reply to this post by Sean P. DeNigris

And if you want to lazy load, you can have that second require call inside the require amber devel callback. But to react ro loading the plugin, you should put the callback in that second requirw call, too.

But if it is part of your app functionality (which it seem to bw as you load it on startup), it's better to load it alongside with amber and issue some app-starting code after smalltalk
Initialize, the rest you can in smalltalk code ('#selector' asJQuery jsTree).

Herby Vojčík <[hidden email]>napísal/a:

>You should require in the same call where you require amber/devel and your project code. Not with independent require([...]) call which is async and detached, you lose all advantage of requirejs - dependency ordering.
>
>"Sean P. DeNigris" <[hidden email]>napísal/a:
>
>>I found
>>http://forum.world.st/How-to-use-a-jquery-plugin-papa-parser-td4755151.html
>>and the resulting stub issue https://github.com/vicnet/benevoles/issues/3
>>
>>So far I:
>>- installed jsTree via "bower install [hidden email]:vakata/jstree.git"
>>- required jsTree in index.html with:
>> function (smalltalk) {
>> //used for all new packages in IDE
>> smalltalk.initialize({
>> 'transport.defaultAmdNamespace': "amber-mycoolproject"
>> });
>> require(['bower_components/jstree/dist/jstree.min']);
>>- put a sample tree in index.html body:
>><div id="selector">
>> <ul>
>> <li> Team A's Projects
>> ...
>> </li>
>> </ul>
>></div>
>>
>>Now, the plugin instructions () say to create an instance with
>>"$("#selector").jstree();". If I do this in the console, the tree works
>>fine, but how do I make this be automatically executed when the page loads.
>>I tried putting it after the require, but that didn't work. Thanks.
>>
>>
>>
>>-----
>>Cheers,
>>Sean
>>--
>>View this message in context: http://forum.world.st/jsTree-jQuery-Plugin-tp4766937.html
>>Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>>
>>--
>>You received this message because you are subscribed to the Google Groups "amber-lang" group.
>>To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
>>For more options, visit https://groups.google.com/d/optout.
>
>--
>You received this message because you are subscribed to the Google Groups "amber-lang" group.
>To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
>For more options, visit https://groups.google.com/d/optout.

Herby Vojčík

Re: jsTree jQuery Plugin

In reply to this post by Sean P. DeNigris

When we're at timing and dependency ordering, there is one more thing that should be done, which is especially true for jquery plugins - you need to give loader the information that the plugin depends on jquery. That is, you must add shim section to config (if it is not already there), and add an item for the plugin, telling it depends on jquery.
If you use stable, not master, the place to put this is inside the require.config call in indec.html, it is the one where you map paths for your namespace; and you can find pieces of such shim config for example in support/devel.js, IIRC, wherw jquery-tabby plugin is told to be depenrent on jQuery (which has all-lowercase name as amd module).
If you use master, you should take inspiration from jquery-tabby.amd.json file and let amber config do the rest.

"Sean P. DeNigris" <[hidden email]>napísal/a:

sebastianconcept

Re: jsTree jQuery Plugin

so if you want to use Bootstrap3 you'd load bootstrap.js using require.config to set it as depending on jquery?

sebastian

o/

> On 08/07/2014, at 06:47, Herby Vojčík <[hidden email]> wrote:
>
> When we're at timing and dependency ordering, there is one more thing that should be done, which is especially true for jquery plugins - you need to give loader the information that the plugin depends on jquery. That is, you must add shim section to config (if it is not already there), and add an item for the plugin, telling it depends on jquery.
> If you use stable, not master, the place to put this is inside the require.config call in indec.html, it is the one where you map paths for your namespace; and you can find pieces of such shim config for example in support/devel.js, IIRC, wherw jquery-tabby plugin is told to be depenrent on jQuery (which has all-lowercase name as amd module).
> If you use master, you should take inspiration from jquery-tabby.amd.json file and let amber config do the rest.
>
> "Sean P. DeNigris" <[hidden email]>napísal/a:
>
>> I found
>> http://forum.world.st/How-to-use-a-jquery-plugin-papa-parser-td4755151.html
>> and the resulting stub issue https://github.com/vicnet/benevoles/issues/3
>>
>> So far I:
>> - installed jsTree via "bower install [hidden email]:vakata/jstree.git"
>> - required jsTree in index.html with:
>> function (smalltalk) {
>> //used for all new packages in IDE
>> smalltalk.initialize({
>> 'transport.defaultAmdNamespace': "amber-mycoolproject"
>> });
>> require(['bower_components/jstree/dist/jstree.min']);
>> - put a sample tree in index.html body:
>> <div id="selector">
>> <ul>
>> <li> Team A's Projects
>> ...
>> </li>
>> </ul>
>> </div>
>>
>> Now, the plugin instructions () say to create an instance with
>> "$("#selector").jstree();". If I do this in the console, the tree works
>> fine, but how do I make this be automatically executed when the page loads.
>> I tried putting it after the require, but that didn't work. Thanks.
>>
>>
>>
>> -----
>> Cheers,
>> Sean
>> --
>> View this message in context: http://forum.world.st/jsTree-jQuery-Plugin-tp4766937.html
>> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>>
>> --
>> You received this message because you are subscribed to the Google Groups "amber-lang" group.
>> To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
>> For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
> For more options, visit https://groups.google.com/d/optout.

Herby Vojčík

Re: requirejs and shim dependency (was: jsTree jQuery Plugin)

sebastian wrote:
> so if you want to use Bootstrap3 you'd load bootstrap.js using require.config to set it as depending on jquery?

You are not loading anything using require.config. You are configuring
the loader using require.config.

You load things using require(...) itself.

The question is strange, can you say more precisely what were you
actually asking?

> sebastian

Herby

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

sebastianconcept

Re: requirejs and shim dependency (was: jsTree jQuery Plugin)

if you read carefully I've never suggested that you load things with require.conf

I'm asking if:

you use require.conf to set bootstrap3 as requiring jquery?

sebastian

o/

> On 08/07/2014, at 11:23, Herby Vojčík <[hidden email]> wrote:
>
>
>
> sebastian wrote:
>> so if you want to use Bootstrap3 you'd load bootstrap.js using require.config to set it as depending on jquery?
>
> You are not loading anything using require.config. You are configuring the loader using require.config.
>
> You load things using require(...) itself.
>
> The question is strange, can you say more precisely what were you actually asking?
>
>> sebastian
>
> Herby
>
> --
> You received this message because you are subscribed to the Google Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
> For more options, visit https://groups.google.com/d/optout.

Herby Vojčík

Re: requirejs and shim dependency (was: jsTree jQuery Plugin)

In reply to this post by Herby Vojčík

sebastian <[hidden email]>napísal/a:

if you read carefully I've never suggested that you load things with require.conf

Ah, really. I parethesized it as (load (using require.config) to set (as depending)) not as (load (using require.config (to set (as depending)))).

I'm asking if:

you use require.conf to set bootstrap3 as requiring jquery?

Yes, you do, if bootstrap3 is not already supporting amd and lists jquery as dependency. All non-amd modules (the ones not calling define where they explicitly list their dependencies) can be loaded fine by require.js, just they have no dependencies defined, so they are loaded out of order. You may use require.config shim section to supply metainfornation (mainly dependencies) so that loader can correctly load the modules and call the callback only when all required modules and their dependencies are set up.

Herby

sebastian

o/

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.