I have a Meteor app which uses a router as per the sample Todos app, eg.:
var TodosRouter = Backbone.Router.extend({
routes: {
":list_id": "main"
},
main: function (list_id) {
...
},
...
});
Router = new TodosRouter;
I have an external service that lets me know when it is finished via a POST request to a URL that I specify. On receiving the POST request, it needs to perform some functions. Can I set this up consistent with the above framework? If not, am I better off writing a separate non-Meteor (eg. nodejs) app to handle the POSTs, or is there a way to make it work within Meteor?
I know this, this and this StackOverflow question are similar, but none of the answers explains how to do it with the Backbone.Router.
Thanks!
Here's how I migrated from the Backbone.Router to Iron-Router. I couldn't see a way to use them both at once.
First, I put code like in #Christian Fritz's answer, in the server folder:
Router.map(function () {
this.route('foo', {
path: '/foo',
where: 'server',
action: function() {
if (this.request.method == 'POST') {
console.log('post request received');
} else {
this.response.writeHead(404);
}
}
})
});
That handles the POST request, as tested by including a console.log in the action (which will write to the terminal window where meteor is running), and typing:
curl --data "p=bar" localhost:3000/foo
Then I replaced the Backbone.Router call with code in the client folder, as described in the Iron-Router docs, eg.
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function () {
this.route('home', {
path: '/',
template: 'homepage',
});
});
Then I had to rewrite my templates so that pages were generated from different templates, instead of from different Session variable settings. This actually simplified my code, eg. instead of:
<body>
{{#if onPage 'home'}}
{{> homepage }}
{{/if}}
{{#if onPage 'help'}}
{{> helppage }}
{{/if}}
...
</body>
and
UI.registerHelper("onPage", function(name) {
return Session.equals('page', name);
});
it's just:
<template name="layout">
{{>yield}}
</template>
Any javascript that needs to direct the user to a specific page uses Router.go() with the route name:
Router.go('home');
Beyond that, I found a few places where I used to be able to assume my collections .findOne() had found one, but seem to have broken with Iron-Router. Wrapping these in ifs fixed them.
In Meteor 0.8, to check what page you are on you can use (see here):
Router.current().lookupProperty('template')
Related
Usually whenever I read a blog post about PWA's, the tutorial seems to just precache every single asset. But this seems to go against the app shell pattern a bit, which as I understand is: Cache the bare necessities (only the app shell), and runtime cache as you go. (Please correct me if I understood this incorrectly)
Imagine I have this single page application, it's a simple index.html with a web component: <my-app>. That <my-app> component sets up some routes which looks a little bit like this, I'm using Vaadin router and web components, but I imagine the problem would be the same using React with React Router or something similar.
router.setRoutes([
{
path: '/',
component: 'app-main', // statically loaded
},
{
path: '/posts',
component: 'app-posts',
action: () => { import('./app-posts.js');} // dynamically loaded
},
/* many, many, many more routes */
{
path: '/offline', // redirect here when a resource is not cached and failed to get from network
component: 'app-offline', // also statically loaded
}
]);
My app may have many many routes, and may get very large. I don't want to precache all those resources straight away, but only cache the stuff I absolutely need, so in this case: my index.html, my-app.js, app-main.js, and app-offline.js. I want to cache app-posts.js at runtime, when it's requested.
Setting up runtime caching is simple enough, but my problem arises when my user visits one of the potentially many many routes that is not cached yet (because maybe the user hasn't visited that route before, so the js file may not have loaded/cached yet), and the user has no internet connection.
What I want to happen, in that case (when a route is not cached yet and there is no network), is for the user to be redirected to the /offline route, which is handled by my client side router. I could easily do something like: import('./app-posts.js').catch(() => /* redirect user to /offline */), but I'm wondering if there is a way to achieve this from workbox itself.
So in a nutshell:
When a js file hasn't been cached yet, and the user has no network, and so the request for the file fails: let workbox redirect the page to the /offline route.
Option 1 (not always useful):
As far as I can see and according to this answer, you cannot open a new window or change the URL of the browser from within the service worker. However you can open a new window only if the clients.openWindow() function is called from within the notificationclick event.
Option 2 (hardest):
You could use the WindowClient.navigate method within the activate event of the service worker however is a bit trickier as you still need to check if the file requested exists in the cache or not.
Option 3 (easiest & hackiest):
Otherwise, you could respond with a new Request object to the offline page:
const cacheOnly = new workbox.strategies.CacheOnly();
const networkFirst = new workbox.strategies.NetworkFirst();
workbox.routing.registerRoute(
/\/posts.|\/articles/,
async args => {
const offlineRequest = new Request('/offline.html');
try {
const response = await networkFirst.handle(args);
return response || await cacheOnly.handle({request: offlineRequest});
} catch (error) {
return await cacheOnly.handle({request: offlineRequest})
}
}
);
and then rewrite the URL of the browser in your offline.html file:
<head>
<script>
window.history.replaceState({}, 'You are offline', '/offline');
</script>
</head>
The above logic in Option 3 will respond to the requested URL by using the network first. If the network is not available will fallback to the cache and even if the request is not found in the cache, will fetch the offline.html file instead. Once the offline.html file is parsed, the browser URL will be replaced to /offline.
I'm new to Angular. I've tried everything I know how and Google searches have surprisingly few tutorials on this particular question. Here's the last code I tried:
index.html
<form ng-submit="addArticle(articles)">
<input type="text" id="title" ng-model="newPost.title">
<input type="text" id="body" ng-model="newPost.body">
<input type="submit" value="Submit">
</form>
articles controller
app.controller('ArticlesCtrl', function($scope, Article) {
$scope.articles = Article.query();
$scope.newPost = Article.save();
});
articles service (rails backend)
app.factory('Article', function($resource) {
return $resource('http://localhost:3000/articles');
});
I can retrieve data just fine. But I can't submit any new data to the rails backend. On page load, the rails server error is:
Started POST "/articles" for 127.0.0.1 at 2015-02-08 18:26:29 -0800
Processing by ArticlesController#create as HTML
Completed 400 Bad Request in 0ms
ActionController::ParameterMissing (param is missing or the value is empty: article):
app/controllers/articles_controller.rb:57:in `article_params'
app/controllers/articles_controller.rb:21:in `create'
Pressing the submit button does nothing at all. The form basically does not work and the page is looking for a submission as soon as it loads.
I understand what the error says, that it's not receiving the parameters from the form. What I don't understand is what that should look like in my controller and/or form.
What am I doing wrong and how do I fix this?
Angular has a feature called services which acts as a model for the application. It's where I'm communicating with my Rails backend:
services/article.js
app.factory('Article', function($resource) {
return $resource('http://localhost:3000/articles/:id', { id: '#id'},
{
'update': { method: 'PUT'}
});
});
Even though the :id is specified on the end, it works just as well for going straight to the /articles path. The id will only be used where provided.
The rest of the work goes into the controller:
controllers/articles.js
app.controller('NewPostCtrl', function($scope, Article) {
$scope.newPost = new Article();
$scope.save = function() {
Article.save({ article: $scope.article }, function() {
// Optional function. Clear html form, redirect or whatever.
});
};
});
Originally, I assumed that the save() function that's made available through $resources was somewhat automatic. It is, but I was using it wrong. The default save() function can take up to four parameters, but only appears to require the data being passed to the database. Here, it knows to send a POST request to my backend.
views/articles/index.html
<form name="form" ng-submit="save()">
<input type="text" id="title" ng-model="article.title">
<input type="text" id="body" ng-model="article.body">
<input type="submit" value="Submit">
</form>
After getting the service setup properly, the rest was easy. In the controller, it's required to create a new instance of the resource (in this case, a new article). I created a new $scope variable that contains the function which invokes the save method I created in the service.
Keep in mind that the methods created in the service can be named whatever you want. The importance of them is the type of HTTP request being sent. This is especially true for any RESTful app, as the route for GET requests is the same as for POST requests.
Below is the first solution I found. Thanks again for the responses. They were helpful in my experiments to learn how this worked!
Original Solution:
I finally fixed it, so I'll post my particular solution. However, I only went this route through lack of information how to execute this through an angular service. Ideally, a service would handle this kind of http request. Also note that when using $resource in services, it comes with a few functions one of which is save(). However, this also didn't work out for me.
Info on $http: https://docs.angularjs.org/api/ng/service/$http
Info on $resource: https://docs.angularjs.org/api/ngResource/service/$resource
Tutorial on Services and Factories (highly useful): http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
articles.js controller
app.controller('FormCtrl', function($scope, $http) {
$scope.addPost = function() {
$scope.article = {
'article': {
'title' : $scope.article.title,
'body' : $scope.article.body
}
};
// Why can't I use Article.save() method from $resource?
$http({
method: 'POST',
url: 'http://localhost:3000/articles',
data: $scope.article
});
};
});
Since Rails is the backend, sending a POST request to the /articles path invokes the #create method. This was a simpler solution for me to understand than what I was trying before.
To understand using services: the $resource gives you access to the save() function. However, I still haven't demystified how to use it in this scenario. I went with $http because it's function was clear.
Sean Hill has a recommendation which is the second time I've seen today. It may be helpful to anyone else wrestling with this issue. If I come across a solution which uses services, I'll update this.
Thank you all for your help.
I've worked a lot with Angular and Rails, and I highly recommend using AngularJS Rails Resource. It makes working with a Rails backend just that much easier.
https://github.com/FineLinePrototyping/angularjs-rails-resource
You will need to specify this module in your app's dependencies and then you'll need to change your factory to look like this:
app.factory('Article', function(railsResourceFactory) {
return railsResourceFactory({url: '/articles', name: 'article');
});
Basically, based on the error that you are getting, what is happening is that your resource is not creating the correct article parameter. AngularJS Rails Resource does that for you, and it also takes care of other Rails-specific behavior.
Additionally, $scope.newPost should not be Article.save(). You should initialize it with a new resource new Article() instead.
Until your input fields are blank, no value is stored in model and you POST empty article object. You can fix it by creating client side validation or set default empty string value on needed fields before save.
First of all you should create new Article object in scope variable then pass newPost by params or access directly $scope.newPost in addArticle fn:
app.controller('ArticlesCtrl', function($scope, Article) {
$scope.articles = Article.query();
$scope.newPost = new Article();
$scope.addArticle = function(newPost) {
if (newPost.title == null) {
newPost.title = '';
}
// or if you have underscore or lodash:
// lodash.defaults(newPost, { title: '' });
Article.save(newPost);
};
});
If you want use CRUD operations you should setup resources like below:
$resource('/articles/:id.json', { id: '#id' }, {
update: {
method: 'PUT'
}
});
This is a question about best practices for making the JavaScript call that generates the standard "Connect to QuickBooks" button (for establishing a connection to QuickBooks Harmony via Intuit's v3 REST API).
If I follow Intuit's example, I would:
Reference https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js in a script tag.
Place the <ipp:connectToIntuit></ipp:connectToIntuit> tagset where I want the "Connect to QuickBooks" button to display
Cross my fingers and hope that intuit.ipp.anywhere.js isn't redirecting to a downtime message, again still exists
Make my call to intuit.ipp.anywhere.setup()
See the "Connect to QuickBooks" button
... which works (for many values of "works"), but feels pretty fragile:
If intuit.ipp.anywhere.js is redirecting to a downtime message (read: not JavaScript) or is otherwise unavailable, I'll get a script error.
If I get a script error (or something else goes wrong with Intuit's copy of the script), there isn't any feedback to the user, just a blank space where the "Connect to QuickBooks" button should be.
To make this all a little more resilient, I'm combining the reference to intuit.ipp.anywhere.js and the call to intuit.ipp.anywhere.setup() into a JQuery .ajax() call:
$.ajax({
url: 'https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js',
type: 'GET',
dataType: 'script',
timeout: 4000,
success: function(response) {
if (typeof intuit !== 'undefined') {
intuit.ipp.anywhere.setup({
menuProxy: 'MYMENUPROXYURL.aspx',
grantUrl: 'MYGRANTURL.aspx'
});
}
},
error: function(x, t, m) {
// show some friendly error message about Intuit downtime
}
});
... which also works (for a few more values of "works"):
My call to setup() is wrapped inside the success handler (and an additional check on the existence of the intuit Object), so I shouldn't get a script error if things go wrong.
If the GET of Intuit's script times out (after 4000ms) or returns something that isn't script, I'll show a friendly error message to the user.
Has anyone else taken a different approach?
And is Intuit back online?
That's similar to how we've handled it. We had wrapped it in jQuery.getScript call, but apparently the .fail handler doesn't work with cross domain script tags. Our solution is as follows:
<script type="text/javascript>
var timeoutID;
timeoutID = window.setTimeout(function () {
$("#ippConnectToIntuit").replaceWith('<p class="error-message">There was a problem communicating with QuickBooks. The service may be down or in heavy use. Try again later.</p>');
}, 5000);
$.getScript("https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js")
.done(function () {
window.clearTimeout(timeoutID);
intuit.ipp.anywhere.setup({
menuProxy: '/path/to/our/menu/proxy',
grantUrl: '/path/to/our/grant/url'
});
});
</script>
<div id="ippConnectToIntuit"><ipp:connecttointuit></ipp:connecttointuit></div>
Hi I am trying to get json from a remote host using this piece of code Example at fiddle,
Here i want to add that i am using jquery cross domain ajax plugin
$("button").click(function() {
jQuery.ajax({
url: "http://50.116.19.49/rest/user.json",
type: 'GET',
success: function(result) {
$("div").html(result.responseText);
}
});
});
I am using jquery AJAX GET method. The problem is when i try to use POST instead of GET it stops working, Need help.!
Thanks
It's possible to limit request by method on server side.
So that doesn't mean If it works with GET than that also must work with POST. As I see your web service doesn't allow origin access for POST method.
Here is an example how it's allowed for different type of request in PHP
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET")
header("Access-Control-Allow-Origin: *");
echo "lan";
else {
echo "disabled";
}
?>
I have a form I wish to submit via ajax usind the jQuery $.post command.
The form looks like this:
<form action="/wine/merlot/reviews" class="new_review" id="new_review" method="post">
And the jquery call is:
$(document).ready(function() {
$('#new_review').submit(function() {
$.post($(this).attr('action'), $(this).serialize(), null, 'script');
return false;
});
});
I get the following error on the server:
ActionController::MethodNotAllowed (Only get, put, and delete requests are allowed.):
From what I can tell by digging in with firebugs console the problem is the post is posting to this url:
/wine/merlot instead of /wine/merlot/reviews
I can't for the life of me figure out why this is the case.
OK. It turns out I'm an idiot. I had another div on the page with the id "new_review" so I guess it was looking at the wrong element. Renamed and everything working now.
I could not get a form to submit via ajax using the jQuery $.post command with Rails 2.
I modified Ryan Bates' Railcast 136 to submit via a put instead. The kludge I used was to check the (params[:id] == 'update') in the update action to check for this ajax request.
episode-136/store/public/javascripts/application.js
jQuery.fn.blurWithAjax = function() {
this.blur(function() {
// GOOD .ajax javascript update action works even though create on Rails2 does not
jQuery.ajax({
type: "PUT",
url: "/reviews/update",
data: jQuery(this).serialize(),
dataType: "script",
callback: null
});
return false;
})
return this;
};
jQuery(document).ready(function() {
jQuery("#review_content").blurWithAjax();
});
You need to make the parallel changes also;
def create => def update
app/views/reviews/create.js.erb => app/views/reviews/update.js.erb
Not sure, but try /wine/merlot/reviews/ instead of /wine/merlot/reviews?