How to use jquery in meteor?

help
1

Is there a specific guideline about how to use jquery in meteor? I’m a beginner here :(.

Also, I’ve posted a question on stackoverflow kinda related to this too. Hopefully, someone can help me out.

Thanks!!!

2

Hello,

Being a beginner myself, I use Jquery in Meteor like I was using it with any other framework, there is no big guidelines to respect.

In Meteor you’ll use it mainly inside function.

Hope it helps.

Dexterneo

3

Hi Dex

http://sallychecklist.meteor.com/

For this one, I’m trying to use jquery to add a line break if I click on a button, but still not sure how to. Do I put the append in the html file or another seperate js file? Since it’s {{}} not a div or p or anything, how can I find way to append a line break?

Thanks

4

Where exactly are you trying to add a line break and how are you trying to do it?

Generally this sounds like the sort of thing where you would not want to manipulate the DOM to achieve what sounds like styling. Good use of templates and styles sound like it might be the better way to go.

For example, if you wanted to add spacing below one of your list items and selected you could create a CSS class that adds additional margin or padding and then reactively apply that class to any selected item with a Meteor helper.

As soon as you start manipulating the DOM with jQuery you start running into issues with it not being reactive and your changes getting overwritten when a template re-renders.

Personally I avoid entirely using jQuery to directly affect the DOM in my Meteor apps. Instead I use it as a convenience function for pulling data from the DOM to use in my helpers, but even that’s a crutch.

5

Let’s see.

I’m thinking about a line break to separate each day. It should be at the end of that day’s checklist.

For ex

  1. ddd
  2. 333
  3. dlskfs
    ------ (end day)

So I tried jquery but it only saved as a session which would disappear after i refresh the page.
I also tried adding the line break into the database so it’ll stay there but it still won’t work since the ---- will be in the ‘ol’ OR underneath the list in general.

Is there a way to work around this?

Thanks!

6

This is really a styling issue. You don’t want to put the line break in your database as it isn’t data.

Is your numbering per day or does it restart with each day? You could have each days items be in a separate <ol> and just add margin to the bottom of your <ol>s with a CSS style.

1 Like
7

I’m actually using ul right now not ol. Sry.

I’d like to keep all of the tasks in one page. The new ones for new days would just keep be added.

How would I be able to put them in separate ol though since they’re sharing the same database. Let say task in this case?