How to make ajax requests in montagejs

[bvenkatr]

I have two questions,

1) How do we include external js files in montagejs(for example moment.js) ?

2) Using jquery, we can make ajax get, post requets in simpler way. How do we make ajax requests in montagejs ?

Please help me.

Thanks in advance.

[Ryan Paul]

When you want to include a third-party JavaScript library in your project, the best choice is to install the library from npm and use it through the MontageJS module loader. In cases where the library isn’t available from npm, you can just add a script tag to your project's base index.html file.

If you are using Montage Studio to work on your project, you can use the following steps to add Moment.js to your project:

1) Click the package.json in the project pane, which will open it in the editor

2) Type “moment” in the search field and hit enter

3) Click the “install” button for the Moment package

4) Save the package.json file so that the change will take effect

If you are not using Montage Studio, you can do the equivalent of the previous steps at the command line:

$ npm install moment —save

After you have added Moment.js to your project, you can use it via the module loader. Say that you have a component with a JavaScript file where you want to use the library… just put this line near the other require statements at the top of the file:

var moment = require("moment”);

After you have done that, you can use the “moment” variable anywhere in your script to reference the module. For example:

exports.Main = Component.specialize(/** @lends Main# */ {

   templateDidLoad: {

          value: function() {

              var day = moment("Dec 25, 1995");

              console.log("Test:", day);

          }

      }

  }

Regarding your second question, about XHR requests, I’ve been really happy with a library called Reqwest: https://github.com/ded/reqwest You can install it in your project through npm, following the same instructions that I provided above for Moment. Once you have added Reqwest to your project, you can do things like this:

Reqwest({url: “http://www.reddit.com/r/aww.json", type: "json”, method: “get" }).then(function(output) {

console.log(output);

});

-- 

Ryan Paul

--
You received this message because you are subscribed to the Google Groups "Montage JS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to montagejs+...@googlegroups.com.
Visit this group at http://groups.google.com/group/montagejs.
For more options, visit https://groups.google.com/d/optout.

[Benoit Marchant]

On May 21, 2014, at 12:35 AM, Ryan Paul <s...@phault.net> wrote:

When you want to include a third-party JavaScript library in your project, the best choice is to install the library from npm and use it through the MontageJS module loader. In cases where the library isn’t available from npm, you can just add a script tag to your project's base index.html file.

You can also include a <script> tag importing moment.js or any other script in the template HTML file of any component, MontageJS will import that once for you in the main page. Best way to keep script dependencies encapsulated.

If you are using Montage Studio to work on your project, you can use the following steps to add Moment.js to your project:

1) Click the package.json in the project pane, which will open it in the editor

2) Type “moment” in the search field and hit enter

3) Click the “install” button for the Moment package

4) Save the package.json file so that the change will take effect

If you are not using Montage Studio, you can do the equivalent of the previous steps at the command line:

$ npm install moment —save

After you have added Moment.js to your project, you can use it via the module loader. Say that you have a component with a JavaScript file where you want to use the library… just put this line near the other require statements at the top of the file:

var moment = require("moment”);

After you have done that, you can use the “moment” variable anywhere in your script to reference the module. For example:

exports.Main = Component.specialize(/** @lends Main# */ {

   templateDidLoad: {

          value: function() {

              var day = moment("Dec 25, 1995");

              console.log("Test:", day);

          }

      }

  }

Regarding your second question, about XHR requests, I’ve been really happy with a library called Reqwest: https://github.com/ded/reqwest You can install it in your project through npm, following the same instructions that I provided above for Moment. Once you have added Reqwest to your project, you can do things like this:

Reqwest({url: “http://www.reddit.com/r/aww.json", type: "json”, method: “get" }).then(function(output) {

console.log(output);

});

request offers a promise approach, but as we typically encourage the use standards as much as possible, so we haven’t seen the need to add code there ourselves, especially as http://www.w3.org/TR/XMLHttpRequest2/ simplify the event handling quite a bit compared to older versions:

4.9 Events summary

This section is non-normative.

The following events are dispatched on XMLHttpRequest and/or XMLHttpRequestUpload objects:

Event name	Interface	Dispatched when…
readystatechange	Event	The readyState attribute changes at some seemingly arbitrary times for historical reasons.
loadstart	ProgressEvent	When the request starts.
progress	ProgressEvent	While sending and loading data.
abort	ProgressEvent	When the request has been aborted. For instance, by invoking the abort() method.
error	ProgressEvent	When the request has failed.
load	ProgressEvent	When the request has successfully completed.
timeout	ProgressEvent	When the author specified timeout has passed before the request could complete.
loadend	ProgressEvent	When the request has completed (either in success or failure).

-- 

Ryan Paul

Hope that helps!

montagestudio.com		Benoit Marchant CEO & Co-Founder 1290 Oakmead Parkway, Ste 111 Sunnyvale, CA 94085 (1) 408.621.4874 mobile Profile | @benoitmarchant

 

[bvenkatr]

Thanks Ryan & Benoit for such a fast response.

I will follow the steps outlined below and will post my results.

Thanks & Regards

[François Frisch]

Since moment is compatible with node.js, I would follow their instructions for node. http://momentjs.com/docs/#/use-it/node-js/

--

[bvenkatr]

Hi,

Now I am able to make ajax post/get requests using jquery by including jquery plugin in index.html.

Thank you very much for your help.