Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Include jquery-ui-browserify in client

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

like image 529
tmtxt Avatar asked Mar 16 '14 11:03

tmtxt


1 Answers

Here's how i'd set this up

So, from the top:

  1. create project dir:
    • mkdir myProject && cd ./myProject to create directory
    • npm init will interactively create your package.json
  2. install dependencies
    • sudo npm install jquery jquery-ui-browserify --save
      • this installs both and --save adds them to your package.json
  3. Create app structure
    • mkdir app will create your main folder
    • cd app && touch index.html app.js
  4. 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
  5. Browserify that jank!
    • open terminal, if not still in /myProject/app/, cd into it
    • run browserify ./app.js > ./bundle.js
  6. 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.

like image 194
Todd Avatar answered Oct 01 '22 07:10

Todd