I hope you are all well!
A question for an app that uses Backbone.js and node.js.
I'm in a situation where I want to create a model, and then automatically go to a different uri that is constructed using the newly created model :
MessageView = Backbone.View.extend({
events : {
'click #button' : 'go here'
}
go here : function(model) {
var message = new Message({model : model)};
var id = message.get('id');
// go to uri '/messages/id'
Now I have set up my app using Express, and so I would like to have a real GET request to the server here invoking the data from the newly created model. So I would like to load the page and not just change the view.
One way to do this (I think) would be to just have
window.location = 'messages/'+id;
as the last line above, but I seem to have the impression this is not good practice for Backbone in general.
Otherwise, could just create the message model inside of the render method, and then write its id directly into the href of the button when the view is rendered, but this also seems messy :
render : function() {
var message = new Message({model : model)};
var id = message.get('id');
$('a #button').attr('href', '/messages/'+id);
}
Any ideas on how I could set this up in a more elegant way? Thanks in advance!
Are you sure you want to actually change the browser page to a new window location? Doing that will cause all your javascript and everything else to have to reload. if you need to invoke a GET to the server to get the information for that model id, you just need to call fetch on a model with an id attribute.
From the little code you have here, this may be more along the lines of what you're trying to do:
MessageView = Backbone.View.extend({
events : {
'click #button' : 'go_here'
},
go_here : function(model) {
//myID is the id of your message you want to get from the server
//I'll leave it up to you on how you get the id of what you
//want from that button
//I'll also assume that you have a router setup somewhere
//to handle navigation
MyApp.MyRouter.navigate("messages/"+id, {trigger: true});
}
});
Then, in your router you'd have a route setup to watch for that:
routes: {
"messages/:id" : "showMessage"
}
And in your showMessage function:
showMessage: function(id) {
var message = new Message({id: id});
message.fetch({success: function(model) {
//render view of for the message to be shown
var messageView = new MessageView({model: model});
messageView.render();
});
}
When you create the view this way, it will be created with a model that already has all the data for your message in its attributes.
Related
I am using sailsJS with ejs engine and i want to redirect the user back to the input page with messages ( validation errors ... ) .
i used to use this easily with laravel in PHP ( return redirect('dashboard')->with('status', 'Profile updated!'); )
i.e : i need to redirect the user back saying that this site dont exist
find : function(req,res){
var id = req.param(íd');
Site.find(id).where({isDeleted : null })
.exec(function(err,siteFound){
if(err) console.log(err);
if(siteFound) {
return res.view('site/show', {
site : siteFound
});
} else {
return res.redirect('/site');
}
})
},
i searched in sails documentation but found nothing. how can this be performed in SailsJS ?
thanks
UPDATE : i found what i needed exactly by installing sails-hook-flash . the feature i needed is called flash messages.
Thank you for your help !
Blockquote
I can't quite tell if you want a true browser redirect. A browser redirect means sending a message back to the browser that says "use this other url instead", and then it gets fresh data (meaning new req and res objects) from your app. If this is what you want, I'd say the only real options for passing data are query strings, like:
return res.redirect('/site?message=notfound');
Then in your recieving controller action for site you can access this via req.param('message').
However, if you just want to return the appropriate content now without getting the browser to redirect, you can just call whatever view or controller action you like:
if(siteFound) {
return res.view('site/show', {
site : siteFound
});
} else {
// uncomment one of the options:
// ONE: return another view
// return res.view('site/notfound, {requested: id});
// TWO: pass to another controller action in same controller
// req.options.message = 'not found';
// return module.exports.someOtherAction(req, res);
// THREE: pass to a controller action in another controller
// req.options.message = 'not found';
// var OtherController = require('./OtherController');
// return OtherController.someOtherAction(req, res);
}
Any of those three options will keep you at the user's requested url ("/site/abc123" or whatever), but display the content you specify.
res.notfound("my message string"); should do it right?
You can work with res.json() if it is an ajax request expecting a custom response.
Read the docs about the res object HERE and the custom notfound response HERE.
I an new to NetSuite, and I am having a problem. I have created a button on a form through a user event script.
The button calls a client script, which executes a saved search. The search result should be displayed to the user.
Everything is located in one file:
function userEventBeforeLoad_AddSearchButton(type, form, request){
if(type == 'view' || type == 'edit'){
form.setScript('customscript_tvg_project_search_button');
var projectid = nlapiGetFieldValue('companyname');
form.addButton("custpage_search", "KHM Search", "performSearch('" + projectid + "')");
}
}
function performSearch(projectid) {
console.log('test in client');
alert('projectid = ' + projectid);
var obj = nlapiLoadSearch(null, 'customsearch_project_cost_detail_sublist');
obj.setRedirectURLToSearchResults();
}
I created a user event script record for userEventBeforeLoad_AddSearchButton(). and a client script record for performSearch().
In the code above, the button is created and the alert is being displayed. But no redirect is happening.
When I look at the result in Firebug it looks like this:
{"result":"\/app\/common\/search\/searchresults.nl?api=T","id":5}
Any ideas why the redirect is not happening, and what to do?
Edit: My code above was stripped down to simplify. The reason I am passing projectid over is that I actually need to filter the search result, suing the following two lines:
var searchFilter = new nlobjSearchFilter('job', null, 'anyof', projectid);
obj.addFilter(searchFilter)
Although the documentation does state that, "This method is supported in afterSubmit user event scripts, Suitelets, and client scripts", it seems from this NS User Group post by a Netsuite Employee in reply to someone who experienced the same issue as you, that the API does not actually perform the redirection client side:
Redirection works on server side. Use window.location.assign(url) to
navigate via script in client-side.
Testing this, I can see that setRedirectURLToSearchResults does appear to correctly "load the search into the session", so adding this line afterwards should fix your problem.
window.location = '/app/common/search/searchresults.nl?api=T';
setRedirectURLToSearchResults is not working for me either, but since you are using clientscript you might want to try this:
function performSearch(projectid) {
console.log('test in client');
alert('projectid = ' + projectid);
var searchid = 'customsearch_project_cost_detail_sublist';
location = '/app/common/search/searchresults.nl?searchid=' + searchid;
}
I have a checkbox that when pressed call a function that does a GET request. Based on the selection I want to display extra checkboxes on the same page. At the moment this is the code I have so far:
Client side
function selectedHouse(house)
{
if(house.checked){
$.get('/', {data: house.value});
}
}
Server side
var routing = function (nav, houses) {
router.route('/')
.get(function (req, res) {
var rooms = [];
rooms = getRooms(req.query.data);
console.log(rooms);
res.render('index', {
title: 'Independent cleaner',
nav: nav,
houses: houses,
roomsForHouse: rooms
});
});
return router;
};
The first time the page loads, it loads with the correct title, nav and houses. When the function is executed on client side, I get back the related rooms for the house and I'm trying to populate the roomsForHouse variable which I'm displaying on the view.
The problem is that the view doesn't render the roomsForHouse variable. So the GET request is called once the page loads and a second time when the function executes. Can this be achieved?
It's a bit more complex. You'll need to use ajax for this. EJS is server side templates (as you are using them) so you'll want to use jQuery to make the call and update your already rendered page.
Server
Your server will need a route that delivers JSON data. Right now you are rendering the entire page. So:
app.get('/rooms/:id', function (req, res) {
// Get the house info from database using the id as req.params.id
...
// Return the data
res.json({
rooms: 2
...
});
});
Client
Using jQuery make a call to your json route once the user selects the house.
function selectedHouse(house)
{
if(house.checked){
// Pass some identifier to use for your database
$.ajax({
type: 'GET',
url: '/rooms/' + house.id,
success: function(data) {
// Update the element - easiet is to use EJS to make sure each house has an id/class with the id in it
// Given an ID of 2 this says find the div with class house_2 and updates its div with class room to the number of rooms
$('.house_' + house.id + ' .rooms').text(data.rooms);
});
}
}
This is more of pseudo code then anything but should put you on the right track.
res.render can't rerender view, for refresh page in second time you need use javascript to replace html. This is not good solution
$.get("/",function(html){
document.open();
document.write(html);
document.close();
});
For better you should use another router to render DOM you want to change
new at this.
I have 2 div's;
When I use one to post new value into the server, the post action works fine.
How do ensure this post updates the scope in the other div? (to update the div with the new entry using ng-repeat)
The HTTP.post action seems to be working as the data appears on refresh.
I have tried $scope.apply() but it doesn't appear to be working.
// this is the controller to get the data from the server
app.controller('projectsController',
function projectsController($scope, projectsFactory){
$scope.projects = projectsFactory.query();
});
and the factory to get the data from server
app.factory('projectsFactory',
function($resource,localStorage, $rootScope, $http){
return $resource('/api/project:id', {id: '#id'});
});
This is the controller to take the user input and post to back to the server
app.controller('projectEditController', function($scope, projectEdit){
$scope.projectEdit = projectEdit;
});
And the service to post the data to the server
app.service('projectEdit',
function projectEdit(localStorage,$rootScope, $http) {
var self = this;
self.add = function(newProject,projects) {
newProject = angular.copy(newProject);
var newProject = (JSON.stringify(newProject));
return $http.post('/api/project', newProject )
.then(function(response) {
newProject.id = response.data.id;
});
};
Which seems to be fine as it posts the data to the Sever fine.
What I am trying to figure out is how to get the
"$scope.projects = projectsFactory.query();" to update once the post operation is complete.
this will update the display in the HTML, which is the goal.
Hopefully this is an easy solve for a good developer, but I am stumped!
Thanks for your time.
Conor
Create 1 wrapper div, and set your controller to it with ng-controller.
Put your 2 divs in the wrapper div. Now the scope created by your controller is available in both divs, this is the easy way. When something updates data in that scope, and you have other things in the dom referencing that variable, then the dom will refresh like you want.
If you really want different controllers for each child div, that's fine, just be careful around inherited scopes. It really is much easier to just have one controller in a situation like this.
By the way, I saw that you mentioned scope.apply(). Be careful, apply() is a real javascript function, and NOT the one you want. You should call scope.$apply(), $apply is the angular function, and to avoid confusion, you could call scope.$digest instead.
Right now, I am doing some simple web scraping, for example get the current train arrival/departure information for one railway station. Here is the example link, http://www.thetrainline.com/Live/arrivals/chester, from this link you can visit the current arrival trains in the chester station.
I am using the node.js request module to do some simple web scraping,
app.get('/railway/arrival', function (req, res, next) {
console.log("/railway/arrival/ "+req.query["city"]);
var city = req.query["city"];
if(typeof city == undefined || city == undefined) { console.log("if it undefined"); city ="liverpool-james-street";}
getRailwayArrival(city,
function(err,data){
res.send(data);
}
);
});
function getRailwayArrival(station,callback){
request({
uri: "http://www.thetrainline.com/Live/arrivals/"+station,
}, function(error, response, body) {
var $ = cheerio.load(body);
var a = new Array();
$(".results-contents li a").each(function() {
var link = $(this);
//var href = link.attr("href");
var due = $(this).find('.due').text().replace(/(\r\n|\n|\r|\t)/gm,"");
var destination = $(this).find('.destination').text().replace(/(\r\n|\n|\r|\t)/gm,"");
var on_time = $(this).find('.on-time-yes .on-time').text().replace(/(\r\n|\n|\r|\t)/gm,"");
if(on_time == undefined) var on_time_no = $(this).find('.on-time-no').text().replace(/(\r\n|\n|\r|\t)/gm,"");
var platform = $(this).find('.platform').text().replace(/(\r\n|\n|\r|\t)/gm,"");
var obj = new Object();
obj.due = due;obj.destination = destination; obj.on_time = on_time; obj.platform = platform;
a.push(obj);
console.log("arrival ".green+due+" "+destination+" "+on_time+" "+platform+" "+on_time_no);
});
console.log("get station data "+a.length +" "+ $(".updated-time").text());
callback(null,a);
});
}
The code works by giving me a list of data, however these data are different from the data seen in the browser, though the data come from the same url. I don't know why it is like that. is it because that their server can distinguish the requests sent from server and browser, that if the request is from server, so they sent me the wrong data. How can I overcome this problem ?
thanks in advance.
They must have stored session per click event. Means if u visit that page first time, it will store session and validate that session for next action you perform. Say, u select some value from drop down list. for that click again new value of session is generated that will load data for ur selected combobox value. then u click on show list then that previous session value is validated and you get accurate data.
Now see, if you not catch that session value programatically and not pass as parameter with that request, you will get default loaded data or not get any thing. So, its chalenging for you to chatch that data.Use firebug for help.
Another issue here could be that the generated content occurs through JavaScript run on your machine. jsdom is a module which will provide such content but is not as lightweight.
Cheerio does not execute these scripts and as a result content may not be visible (as you're experiencing). This is an article I read a while back and caused me to have the same discovery, just open the article and search for "jsdom is more powerful" for a quick answer:
http://encosia.com/cheerio-faster-windows-friendly-alternative-jsdom/