I am updating a form and i want to make an update request on the serverwith an id
my model is:
var CampaignEditModel = Backbone.Model.extend({
urlRoot:"http://localhost:3033/campaign/update/",
url : function(){
var url = this.urlRoot + this.id;
return url;
},
idAttribute: "_id",
defaults:{
"id":null ,
"Name" :""
}
});
render function is called here:
$contents.empty().append(new EditView({model:editCampaigns}).render({id:id}).el);
and render function is:
render: function(options){
this.$el.append( _.template(EditTemplate));
this.model.set({"id":options.id})
console.log(this.model.get("id"));
this._modelBinder.bind(this.model, this.el);
return this;
},
events: {
'click .saveCampaign ': 'save'
},
save:function(){
this.model.set({
"Name" :$('#edname').val(),
});
this.model.save(null, {success: function(data){
console.log("data:" + data);
require(['campaignroute'],function(routes){
var router = routes.pageRouter;
router.navigate('gridView', {trigger: true});
});
}});
return false;
}
the problem is even i have set an id in the model still when save method is called
the request go like this
http://localhost:3033/campaign/update/undefined
and console shows the eror:
Failed to load resource: the server responded with a status of 404 (Not Found)
how to solve this problem?
Instead of passing options to your custom render(options) function and setting the model id there, set the it directly on the editCampaigns model, before entering render(options):
editCampaigns.set('id', id);
$contents.empty().append(new EditView({model:editCampaigns}).render().el);
and remove the extra
this.model.set({"id":options.id})
from render(options) together with the options parameter. It should look like similar to this:
render: function(){
this.$el.append( _.template(EditTemplate));
console.log(this.model.get("id"));
this._modelBinder.bind(this.model, this.el);
return this;
}
Your model also has an extra url function:
url : function(){
var url = this.urlRoot + this.id;
return url;
}
you don't need this one since the models' id is automatically appended after urlRoot.
Unrelated to you problem I see you used
http://localhost:3033/campaign/update
to define your update URL. The HTTP method you use, already says what kind of action will be executed, this is the reason why you can (and should) write URLs without verbs. Just remove the extra /update.
Here is a quick summary about best-practices:
How to create REST URLs without verbs?
Double check that the request is a post request and not a put request. 'Failed to load resource' errors is usually related to a missing request handler.
Related
I'm trying to using Airtable, node.js, express.js and jquery to create a simple user authentication functionality but I'm fairly new at this and I'm running into a problem I can't seem to fix and the articles I've read I can't seem to grasp or adapt to my particular situation.
I have this Ajax call in my html doc:
$("#checkUser").submit(function(e) {
var studentID = $('input[name="student"]').val()
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data) {
$(window).attr("location", window.location.href + 'Dashboard?student=' + studentID);
},
error: function(data){
console.log("User not found. Try again");
}
});
});
This call sends the inputted username and data to the server which then processes it in the following way:
app.post('/checkUser', urlencodedParser, function(request,response){
var user = JSON.stringify(request.body);
user = JSON.parse(user);
base('RegisteredStudents').select({
filterByFormula: '{UserID} = ' + user.student,
view: "Grid view"
}).eachPage(function page(records, fetchNextPage) {
records.forEach(function(record) {
response.sendStatus(200);
});
fetchNextPage();
}, function done(error) {
response.sendStatus(404);
});
});
If the user exists in the database of Airtable, it should send '200' which the Ajax then reacts by redirecting accordingly to the user's profile. Otherwise, if the user does not exist, the server should respond with '404', which the Ajax call should react to by printing a statement in the console. While it does do these two things well, the server breaks down when, after a student puts in the wrong user ID and the Ajax prints the statement, the student tries to put once more a userID. I get the " Can't set headers after they are sent. " message. Please, how can I solve this?
Thank you!
You have two response.send..., you can only send data once. Either make sure only one runs with some conditional or add return before all response.send... so if any of them runs, the program will return and the other response.send.. will not run.
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 have a link on my site. When clicked it'll call a function that does a mongoose query.
I'd like the results of that query to be sent to the same page in a variable without reloading the page. How do I do that? Right now it is just rendering the page again with new query result data.
// List comments for specified chapter id.
commentController.list = function (req, res) {
var chapterId = req.params.chapterId;
var query = { chapterId: chapterId };
Chapter.find({ _id: chapterId }).then(function (chapter) {
var chapter = chapter;
Comment.find(query).then(function (data) {
console.log(chapter);
Chapter.find().then(function(chapters){
return res.render({'chapterlinks', commentList: data, user: req.user, chapterq: chapter, chapters:chapters });
})
});
})
};
You just need to make that request from your browser via AJAX:
https://www.w3schools.com/xml/ajax_intro.asp
This would be in the code for your client (browser), not the code for your server (nodejs).
UPDATE:
Here's a simple example, which uses jQuery to make things easier:
(1) create a function that performs and handles the ajax request
function getChapterLinks(chapterId) {
$.ajax({
url: "/chapterLinks/"+chapterId,
}).done(function(data) {
//here you should do something with data
console.log(data);
});
}
(2) bind that function to a DOM element's click event
$( "a#chapterLinks1" ).click(function() {
getChapterLinks(1);
});
(3) make sure that DOM element is somewhere in you html
<a id="chapterLinks1">Get ChapterLinks 1</a>
Now when this a#chapterLinks1 element is clicked, it will use AJAX to fetch the response of /chaptersLink/1 from your server without reloading the page.
references:
http://api.jquery.com/jquery.ajax/
http://api.jquery.com/jquery.click/
I am using Backbone.js in my node app. I am calling various ajax call from views, models and colllection. I have created my custom property e.g. "myName" in every view, model and collection and assigned with unique name for each. Now I want this "myName" property in ajax "beforeSend", So I should know from which view or model, this ajax is called. Is there any option to do this?
beforeSend callback of $.ajax() receives 2 arguments:
beforeSend
Type: Function( jqXHR jqXHR, PlainObject settings )
As you can see 2nd argument is settings which receives all options passed to fetch method of 'Backbone.Collection' or Backbone.Model:
Example:
Your ajax setup:
$.ajaxSetup({
beforeSend: function (xhr, options) {
console.log(options.testVar); // Will be "Hello" when collection fetched
}
});
Place when you doing fetch() or somehow interacting with server:
yourCustomCollectionOrModel.fetch({testVar: "Hello"}).done(function(){
// bla bla
})
So whenever yourCustomCollectionOrModel has fetched testVar will be passed to the beforeSend's options argument.
Note: Avoid globals if you can solve the issue in more preferred way.
You can go event better if you don't want to repeat the same any time you fetching collection or model.
Just rewrite the fetch() method, and add collection/model specific flag to the options.
Example
var TestCollection = Backbone.Collection.extend({
url: 'your/api/path',
fetch: function (options) {
options = options || {};
options.testVar = 'Hello';
return this.constructor.__super__.fetch.call(this, options);
}
});
Update:
Another and maybe the shortest way to achieve the same behavior, is to wrap Backbone.sync like this:
var oldSync = Backbone.sync;
Backbone.sync = function(method, model, options) {
options = options || {};
options.modelContext = model;
return oldSync.call(Backbone, method, model, options);
}
In this way you don't need to rewrite fetch, or manually pass options to fetch() method.
And the in beforeSend callback of $.ajax:
$.ajaxSetup({
beforeSend: function (xhr, options) {
console.log(options.modelContext); // this will be the model's or collection's instance
}
});
Hope this helps!
// for example
$.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader('viewName', yourGlobalVariable /* or session storage */);
}
});
before each ajax call (or model/collection fetch, save etc) store in yourGlobalVariable name of your view.
I have the following (simplified for example) angular directive which creates a dropzone
directives.directive('dropzone', ['dropZoneFactory', function(dropZoneFactory){
'use strict';
return {
restrict: 'C',
link : function(scope, element, attrs){
new Dropzone('#'+attrs.id, {url: attrs.url});
var myDropZone = Dropzone.forElement('#'+attrs.id);
myDropZone.on('sending', function(file, xhr, formData){
//this gets triggered
console.log('sending');
formData.userName='bob';
});
}
}
}]);
As you can see the the sending event handler I'm trying to send the username ("bob") along with the uploaded file. However, I can't seem to retrieve it in my route middleware as req.params comes back as an empty array (I've also tried req.body).
My node route
{
path: '/uploads',
httpMethod: 'POST',
middleware: [express.bodyParser({ keepExtensions: true, uploadDir: 'uploads'}),function(request,response){
// comes back as []
console.log(request.params);
//this sees the files fine
console.log(request.files);
response.end("upload complete");
}]
}
Here is what the docs say on the sending event
Called just before each file is sent. Gets the xhr object and the formData objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data.
EDIT
I dropped the programmatic approach for now. I have two forms submitting to the same endpoint, a regular one with just post and a dropzone one. Both work, so I don't think it's an issue with the endpoint rather with how I handle the 'sending' event.
//Receives the POST var just fine
form(action="http://127.0.0.1:3000/uploads", method="post", id="mydz")
input(type="hidden", name="additionaldata", value="1")
input(type="submit")
//With this one I can get the POST var
form(action="http://127.0.0.1:3000/uploads", method="post", id="mydz2", class="dropzone")
input(type="hidden", name="additionaldata", value="1")
OK, I've actually figured it out, thanks to Using Dropzone.js to upload after new user creation, send headers
The sending event:
myDropZone.on('sending', function(file, xhr, formData){
formData.append('userName', 'bob');
});
As opposed to formData.userName = 'bob' which doesn't work for some reason.
I would like to add to NicolasMoise's answer.
As a beginner in webdev I got stuck on how to obtain an instance of Dropzone. I wanted to retrieve an instance of Dropzone that had been generated by the autodiscovery feature. But it turns out that the easiest way to do this is to manually add a Dropzone instance after first telling Dropzone not to auto-discover.
<input id="pathInput"/>
<div id="uploadForm" class="dropzone"/>
<script>
$(document).ready(function(){
Dropzone.autoDiscover = false;
var dZone = new Dropzone("div#uploadForm", {url: "/api/uploads"});
dZone.on("sending", function(file, xhr, data){
data.append("uploadFolder", $("#pathInput")[0].value);
});
});
</script>
Serverside the data will be in request.body.uploadFolder
Nicolas answer is one possible solution to the problem. It is especially useful if you need to alter the file object prior to sending.
An alternative is to use the params option:
var myDropzone = new Dropzone("div#myId",
{ url: "/file/post", params: { 'param_1': 1 }});
cf. the documention
For those that are using thatisuday/ng-dropzone the callback methods are done as such:
<ng-dropzone class="dropzone" options="dzOptions" callbacks="dzCallbacks" methods="dzMethods"></ng-dropzone>
In a controller:
$scope.dzCallbacks = {
sending: function(file, xhr, form) {
console.log('custom sending', arguments);
form.append('a', 'b');
}
};