I am writing an app that uses a codeigniter backend custom REST service with a backbone front end. I am having trouble with creating a post(i.e. comment) in my db. I have read that enabling Backbone.emulateJSON() may be able to fix this. In summary I'm looking for where to include this line. A longer explanantion...
When I submit my form manually to create a new post the data is saved fine as expected. When I attempt the following in my postAddView...
save: function(e) {
e.preventDefault();
var that = this;
var postCollection = this.postCollection;
var newPost = {
message:"this is a post",
author_id:"22",
location:"New York"
}
postCollection.create(
newPost,
{
wait: true,
success: function(response){
console.log("successful" + response.toJSON);
},
error:function(err) {
console.log("this is the error "+ err.toJSON);
}
});
return this;
}
As as a result a new record is saved in my DB but no data is populated. Inspecting and comparing the networks in chrome shows that the ajax call from the backbone app submits it as 'request payload' vs. the form submission which is 'form data' (both are POSTS).
Based on my code above if anyone has any advice it would be much appreciated - however I'm also looking where to include backbone.emulateJSON() as many other posts have referenced this as a fix.
emulateJSON is not a function
Backbone.emulateJSON = true
http://backbonejs.org/#Sync-emulateJSON
Related
I'm using OData v4 to load data from my backend to my frontend (developed with SAP UI5) and I am using a form to display a detail page. When I click the "edit" button I'm able to edit the data. My implementation is similar to this example: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.layout.sample.Form354/code/Page.controller.js
When editing something, the data is directly edited at the model and, therefore, updated at the backend. However, I want to be able to choose if I want to save the changes or if I want to cancel the edit before it is updated at the backend.
I read on other questions that one can copy the ODataModel to a JSONModel and use that copy instead, by doing something like:
var oModel = this.getView().getModel();
var oModelJson = new sap.ui.model.json.JSONModel();
oModel.read("/Data", {
success: function(oData, response) {
oModelJson.setData(oData);
sap.ui.getCore().setModel(oModelJson, "oJSONModel");
alert("Success!");
},
error: function(response) {
alert("Error");
}
});
However, the read method seems not to be available for OData v4. the code of my controller where the data is loaded looks like following:
onInit: function() {
this.oModel = new ODataModel({
groupId : "$direct",
synchronizationMode : "None",
serviceUrl : '/odata/'
});
this.getView().setModel(this.oModel, 'oModel');
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("details").attachPatternMatched(this._onObjectMatched, this);
this._showFormFragment("display");
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/Data(" + oEvent.getParameter("arguments").dataPath + ")",
model: "oModel"
});
//I want to copy the data from the ODataModel to the JSONModel here
},
What's the best way to accomplish this? And how to do it with OData v4?
I suppose you want to resetChanges in case user cancels the save.
For V2 ODataModel, there is deferedGroup concept which you can use to resetChanges or submitChanges.
I have not much experience with V4. Though from the documentation, it is possible.
Please try to pass a updateGroupId in the constructor. Then you can choose resetChanges or submitBatch by group Id.
mParameters.updateGroupId? The group ID that is used for update requests. If no update group ID is specified, mParameters.groupId is used. Valid update group IDs are undefined, '$auto', '$direct' or an application group ID, which is a non-empty string consisting of alphanumeric characters from the basic Latin alphabet, including the underscore.
Thank you!
I am trying to create a dynamic meteor collection using a variable so a new meteor collection will be created everytime an form is submitted and an event is executed. See code below for what I am looking for though is does not work.
(Keep in mind I am still in the early production stages so I have not set up specific server or client side for debugging purposes. Also, disregard any grammatical or structure errors as i just typed this. just how to make it work)
Intended result:
Suppose user 1 meteor id is x533hf4j3i
Suppose user 2 meteor id is jf83jfu39d
OUTCOME: x533hf4j3ijf83jfu39d = new Mongo.Collection('x533hf4j3ijf83jfu39dmessages')
this sample code that DOES NOT WORK
Template.createChat.events({
'submit form': function(event){
event.preventDefault();
var messageRecipientVar = event.target.messageRecipient.value;
var currentUserId = Meteor.userId();
var recipientUserId = Meteor.users.findOne(messageRecipientVar)._id;
var chatCollectionNameVar = {$concat: [currentUserId, recipientUserId]}
var chatCollectionName = {$concat: [currentUserId, recipientUserId, "messages"]}
chatCollectionNameVar = new Mongo.Collection('chatCollectionName');
}
});
Don't do this. Asking how to create dynamic collections comes up periodically with new meteor developers, but it's never the right approach. #david-wheldon has a great description of why not to do this at the bottom of this page.
Just use one collection Messages, containing documents something like this:
{ _id: xxxxxx,
sender: 'x533hf4j3i',
recipient: 'jf83jfu39d',
message: 'Hi there!',
...
timestamp, etc
...
}
Then it depends on your app if a user can view messages they did not send/receive, and if you need filtering on this you would do it server side in a publish function.
Either way, on the Client if you just want the messages between two users you would query like this:
chatMessages = Messages.find(
{$or: [{ sender: 'x533hf4j3i', recipient: 'jf83jfu39d'},
{ sender: 'jf83jfu39d', recipient: 'x533hf4j3i'}
]}).fetch()
I am currently building a project using Ext JS 4.2 this is the first time I am using TreeGrids and TreeStores so it is very possible I am misunderstanding the structure somewhere. Currently the issue seems to be when I use setRootNode(JSON) it refreshes the tree but it only displays the root node and none of its children. Here is what it currently creates.
Using the developer tools in chrome this is what the object looks like before it is passed in.
Object {text: ".", Item Number: "P00001", original: "P00001", children: Array[2]}
Once it is passed in using setRootNode(Object) it only displays the root. However I have noticed that looking at the grid.tree.root property all the data is in there which makes me wonder why it is not being loaded into the treegrid.
Here is a snippet of my code that loads the necessary data. var grid refers to the tree panel component. store.load causes a jsp call that loads in meta data that dynamically creates the columns / fields for the treegrid and model which is functioning correctly.
onPanelAfterRender: function(){
var grid = Ext.getCmp('BOMGrid');
var store = Ext.getStore('BOMGridStore');
store.load();
//var me = Ext.getCmp('main-page');
grid.setLoading('Loading BOM...');
Ext.Ajax.request({
url : 'loadbom.jsp',
timeout: 300000,
params : {
},
success: function (response, opt) {
grid.setLoading(false);
var res = Ext.JSON.decode(response.responseText);
if (res.success) {
console.debug(res.results[0]);
grid.setRootNode(res.results[0]);
}
else {
console.debug("JSON failure");
Ext.Msg.alert('Error', 'Invalid part number');
}
},
failure: function(response,options){
console.debug("major failure");
grid.setLoading(false);
Ext.Msg.alert('Error', 'Connection failed<br>' + response.responseText);
}
});
}
If you need additional information or for me to clarify something please ask me I would appreciate any help that I could possibly get.
First off my programming knowledge is entirely on the front-end, but I'm experimenting with node, express, mongoose, and mongodb. I'm using someone else's template to try and build an app the right way, but I'm lost when connecting the dots. I have the following jade:
form(method='post', action="/post/comment/" + post.id)
textarea(name='text')
input(type='submit', value='Save')
Combined with this from the routes/posts.js file
app.post("/post/comment/:id", loggedIn, function (req, res, next) {
var id = req.param('id');
var text = req.param('text');
var author = req.session.user;
Comment.create({
post: id
, text: text
, author: author
}, function (err, comment) {
if (err) return next(err);
res.redirect("/post/" + id);
});
});
and this is models/comment.js :
var mongoose = require('mongoose');
var ObjectId = mongoose.Schema.Types.ObjectId;
var createdDate = require('../plugins/createdDate');
var schema = mongoose.Schema({
text: { type: String, trim: true, validate: validateText }
, post: { type: ObjectId, index: true }
, author: String
})
function validateText (str) {
return str.length < 250;
}
schema.plugin(createdDate);
module.exports = mongoose.model('Comment', schema);
Now this works fine, for submitting a comment and saving it in the DB. Problem is, is that I don't want to save a comment, but HTML after a function has manipulated it. So I tried:
var everything = $('.whatever').html();
$.post("/post/comment/:id", everything,
function(){
console.log('html saved!')
}
)
But I got a POST http://localhost:3000/post/comment/:id 500 (Internal Server Error) Now I'm aware that I probably don't have the id variable so I tried pasting in the number that is in the url, and that seemed to go through without error, but than didn't show up in the DB. I'm aware that this may not be a specific question, and that I may be going about this entirely wrong but any general direction would be much appreciated. Thanks.
You seem to have a number of problems here. Try taking a look at the following:
Your router is set to receive posts to "/post/comment/:id", but your post in the last code block is posting to "/post/comments/:id", where comments is plural. This will likely result in a 404. (Check the networks tab of your browser javascript console. It may be silently failing without you realizing it).
Your 500 error is likely coming from the fact that you directly posted ":id", instead of an actual identifier. Many node apps will have an app.param() block set up to validate these parameters, and your friend's template is likely breaking when it doesn't get a number it expects.
The data that you post must match the schema of the model you're saving it to. Any keys that aren't named in the schema will be stripped prior to saving, and in your case, if no keys match, it will just be a default comment instance, and won't save at all.
Hope that helps!
I've used the webOS Ares tool to create a relatively simple App. It displays an image and underneath the image are two labels. One is static, and the other label should be updated with new information by tapping the image.
When I tap the image, I wish to obtain a JSON object via a URL (http://jonathanstark.com/card/api/latest). The typcial JSON that is returned looks like this:
{"balance":{"amount":"0","amount_formatted":"$0.00","balance_id":"28087","created_at":"2011-08-09T12:17:02-0700","message":"My balance is $0.00 as of Aug 9th at 3:17pm EDT (America\/New_York)"}}
I want to parse the JSON's "amount_formatted" field and assign the result to the dynamic label (called cardBalance in main-chrome.js). I know that the JSON should return a single object, per the API.
If that goes well, I will create an additional label and convert/assign the "created_at" field to an additional label, but I want to walk before I run.
I'm having some trouble using AJAX to get the JSON, parse the JSON, and assign a string to one of the labels.
After I get this working, I plan to see if I can load this result on the application's load instead of first requiring the user to tap.
So far, this is my code in the main-assistant.js file. jCard is the image.
Code:
function MainAssistant(argFromPusher) {}
MainAssistant.prototype = {
setup: function() {
Ares.setupSceneAssistant(this);
},
cleanup: function() {
Ares.cleanupSceneAssistant(this);
},
giveCoffeeTap: function(inSender, event) {
window.location = "http://jonathanstark.com/card/#give-a-coffee";
},
jcardImageTap: function(inSender, event) {
//get "amount_formatted" in JSON from http://jonathanstark.com/card/api/latest
//and assign it to the "updatedBalance" label.
// I need to use Ajax.Request here.
Mojo.Log.info("Requesting latest card balance from Jonathan's Card");
var balanceRequest = new Ajax.Request("http://jonathanstark.com/card/api/latest", {
method: 'get',
evalJSON: 'false',
onSuccess: this.balanceRequestSuccess.bind(this),
onFailure: this.balanceRequestFailure.bind(this)
});
//After I can get the balance working, also get "created_at", parse it, and reformat it in the local time prefs.
},
//Test
balanceRequestSuccess: function(balanceResponse) {
//Chrome says that the page is returning X-JSON.
balanceJSON = balanceResponse.headerJSON;
var balanceAmtFromWeb = balanceJSON.getElementsByTagName("amount_formatted");
Mojo.Log.info(balanceAmtFromWeb[0]);
//The label I wish to update is named "updatedBalance" in main-chrome.js
updatedBalance.label = balanceAmtFromWeb[0];
},
balanceRequestFailure: function(balanceResponse) {
Mojo.Log.info("Failed to get the card balance: " + balanceResponse.getAllHeaders());
Mojo.Log.info(balanceResponse.responseText);
Mojo.Controller.errorDialog("Failed to load the latest card balance.");
},
//End test
btnGiveCoffeeTap: function(inSender, event) {
window.location = "http://jonathanstark.com/card/#give-a-coffee";
}
};
Here is a screenshot of the application running in the Chrome browser:
In the browser, I get some additional errors that weren't present in the Ares log viewer:
XMLHttpRequest cannot load http://jonathanstark.com/card/api/latest. Origin https://ares.palm.com is not allowed by Access-Control-Allow-Origin.
and
Refused to get unsafe header "X-JSON"
Any assistance is appreciated.
Ajax is the right tool for the job. Since webOS comes packaged with the Prototype library, try using it's Ajax.Request function to do the job. To see some examples of it, you can check out the source code to a webOS app I wrote, Plogger, that accesses Blogger on webOS using Ajax calls. In particular, the source for my post-list-assistant is probably the cleanest to look at to get the idea.
Ajax is pretty much the way you want to get data, even if it sometimes feels like overkill, since it's one of the few ways you can get asynchronous behavior in JavaScript. Otherwise you'd end up with code that hangs the interface while waiting on a response from a server (JavaScript is single threaded).