How to use jQuery inside a package?


#1

I’m tearing my hair out over how to use jQuery within a package. My View class generates a few jQuery objects in its @content method and I need to append a jQuery collection (with click handlers attached) to these objects. What do I need to ‘require’ to get my beloved ‘$’ (or ‘jQuery’)?


#2

Ugh, I missed the obvious: require(‘atom’).$


#3

Since version 1.0, you should use this to use jQuery:

{$} = require('atom-space-pen-views')

You have to include this in your package.json:

{
  "dependencies": {
    "atom-space-pen-views": "^2.0.3"
  }
}

Look at this page to read more about this.


How can you make ajax requests?
#5

You don’t need to use atom-space-pen-views for this purpose.
Under the hood atom-space-pen-views just imports jquery:

$ = jQuery = require 'jquery'

To package.json:

{
  "dependencies": {
    "jquery": "^2.1.4"
  }
}

#6

That is a pretty general statement. I assume you mean to only use space-pen when you need other features. There is nothing wrong with atom-space-pen-views in general.


#7

Maxim, in general, you are right! In my case I needed atom-space-pen-views, so I directly depended on this. But from case to case you should decide which package you really need.


#8

How can I use jQuery without space-pen?

For example, I have a button:

$ = jQuery = require 'jquery'

module.exports =
class Demo
  constructor: (serializedState) ->
   # element being added to the page
   @element = document.createElement('div')
   @element.classList.add('demo')

   # button
   button = '<button class="submit">Submit</button>'
   @element.innerHTML = button

   # add to page
   @element.appendChild(content)

$(".demo .submit").click ->
      alert "Button works"

How can I make this into a working example?


#9

You can add jquery as a dependency in your package.json:

"dependencies": {
  "jquery": "^2.0.0"
}

#10

Yes, all dependencies are added and updated. jQuery loads.

But how do I get a simple click to trigger?


#11

I found it on Stack Overflow. Works for me:

$ = jQuery = require 'jquery'

module.exports =
class Demo
  constructor: ->
    # element being added to the page
    @element = document.createElement('div')

    # button
    button = document.createElement("input")
    button.type = "button"
    button.value = "Submit"
    #button.onclick = ->
    #  alert "Button works!"
 
    # add to page
    buttonElement = @element.appendChild(button)

    $(buttonElement).click ->
      alert "Button works!"


#12

What about other libraries, I have a project where I would like to use underscore but the same approach doesn’t seem to work for me


#13

ok, I figured it out,
import _ from "./underscore";

Then in the dependencies:
"underscore": "1.8.3"


#14

I am trying to use jQuery from within a build script, so I cannot go about this the usual way: i.e., I cannot use package dependencies, as I am not writing a package.

If I try: $ = require('jquery'); then I get the error that jquery is not a recognised module.

How can I use jQuery without having to make a dependency for it?


#15

I don’t think you can. Atom doesn’t include jQuery anymore (or at least doesn’t in a way that you would be able to get to it from a build script). So you would have to install jQuery somewhere so that you can then require it from there.


#16

Yeah, I realised that eventually. What I did in the end was just require the jquery that another package was using xD