Though fanquery was initially developed as a project separate from tales, tales provides some really handy tools like auto-reloading which is essential for working with javascript. So even if you are using fanquery outside of tales, just develop it using tales and then copy the scripts to your other environment.

Create a new app.

fan tales new fanquerytest

cd to the "fanquerytest" and start the server using

fan tales run

create fan/IndexJs.fan. And type the following code

using fanquery
using tales

@Js
class IndexJs : PageJs{
  override Void main(){
    Jq.ready{
      Win.cur.alert("hello")
    }
  }
}

The code should be simple to follow through

1. We add the @Js facet to the class that extends PageJs
2. main() is called as the page loads. Jq.ready{} is equivalent of $(document).ready{} jquery method
3. when dom is ready we show an alert

Now we need to tell the index page to use the IndexJs script. Open Index.fan and add make the following changes(shown in bold):

using tales
class Index : Page{
  @Route{uri = "/"}
  Void main(){
    html := Html("template/Index.html")
    html.tag("dynamic").text("Tales")
    html.jsMain(IndexJs#)
    response.writeTag(html)
  }
}

The only important line is

html.jsMain(IndexJs#)

. We indicate that the script in IndexJs has to be used for this html. Now modify IndexJs.fan to try out various Jquery methods.

Read this if want to use some plugin