Include jquery-ui-browserify in client

Question

I', using browserify to transform node modules to browser ones for my express app.

This is the command to browserify

browserify -r jquery > ./public/js_app/jquery.js
browserify -r jquery-ui-browserify > ./public/js_app/jquery-ui.js

And this is to require jquery

var jQuery = require('jquery');

this code works fine

jQuery("#info-dialog");

but I don't know how to include jquery-ui-browserify. I have tried this but not works

var jQuery = require('jquery');
require('jquery-ui-browserify');
jQuery("#info-dialog").dialog({
  resizable: false,
  height: 100,
  modal: true
});

Thanks

Why don't you just require jQuery and jQuery UI in one file and then bundle that up? Also, you should assign some variable to require('jquery-ui-browserify'). For example: var jQueryUI = require('jquery-ui-browserify'); — Ajay Tatachar
– Ajay Tatachar, Commented Oct 7, 2014 at 7:30

Todd · Accepted Answer · 2014-10-30 03:15:48Z

Here's how i'd set this up

So, from the top:

create project dir:
- mkdir myProject && cd ./myProject to create directory
- npm init will interactively create your package.json
install dependencies
- sudo npm install jquery jquery-ui-browserify --save
  - this installs both and --save adds them to your package.json
Create app structure
- mkdir app will create your main folder
- cd app && touch index.html app.js
Write your script in app.js, requiring and using all you wish:
- first var $ = require('jquery'); require('jquery-ui-browserify');
- below that, write script as normal
Browserify that jank!
- open terminal, if not still in /myProject/app/, cd into it
- run browserify ./app.js > ./bundle.js
in index.html, include <script src='bundle.js'></script> just before closing body tag and you're ready to rock.

Example code

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Project</title>
  </head>
  <body>
    <h1>My Project</h1>
    <input type="text">
    <script src='bundle.js'></script>
  </body>
</html>

Here, just marked up a basic html5 page, included the bundle.js file generated by browserify. Now we can use this bundle.

// app.js
// NOTE: remember, you code this before running `browserify ./app.js > ./bundle.js`
var $ = require("jquery");
require("jquery-ui-browserify");

$(function() {
  $('input').autocomplete({ source: ['jquery', 'mootools', 'underscore']} );
});

Hope this helps! It worked perfectly for me.

Collectives™ on Stack Overflow

Include jquery-ui-browserify in client

1 Answer 1

So, from the top:

Example code

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

So, from the top:

Example code

Comments

Your Answer

Sign up or log in

Post as a guest

Related