This is my JavaScript in index.php:
MyModel = Backbone.Model.extend({
defaults: {
myID: "",
myName: ""
},
urlRoot: 'testAjaxAdd',
sync: function(method, model, options) {
options = options || {};
options['data'] = {};
options.data["myID"] = model.get("myID");
options.data["myName"] = model.get("myName");
options.data = JSON.stringify(options.data);
return Backbone.sync.apply(this, arguments);
}
});
MyView = Backbone.View.extend({
el: '.page',
render: function(){
var template = _.template($('#add-owner-template').html(), {});
this.$el.html(template);
},
events: {
'submit .create-owner-form': 'saveOwner'
},
saveOwner: function(events) {
var myName= $('input#myName').val();
var owner = new MyModel({
'myID': "111",
'myName': myName
});
owner.save({},{
success: function(model, response, options) {
console.log('success');
console.log(response); // show $_POST from actionSaveOwner in Controller
console.log(model.toJSON()); // show model
console.log(model.get('myID')); // show owner dbcID
console.log(model.get('myName')); // show owner userID
console.log(JSON.stringify(options)); // show options
console.log(options.data["myID"]); // this is shown undefined in console
console.log(options.data["myName"]); // this is shown undefined in console
},
error: function(model, response, options) {
console.log('error');
console.log(response);
console.log(model.toJSON());
}
});
}
});
I have put the code below in very first line within my javascript codes:
Backbone.emulateHTTP = true;
This is my html part of the form, it also a javascript template:
<script type="text/template" id="add-owner-template">
<form class='create-owner-form'>
<label>Name</label>
<input type="text" name="myName" id="myName"/>
<button type="submit" class="btn createcontbutton">Create</button>
</form>
</script>
This is my very simple action in Controller to test out if my backbone works or not:
public function actionTestAjaxAdd()
{
header('Content-type: application/json');
echo CJSON::encode($_POST);
}
However, this is what I see from console in POST tab:
Parameters application/x-www-form-urlencoded Do not sort
{"myID":"111","myName":"i...
But, the $_POST in controller action is nothing when i display it back in console from response.
I finally solved this myself using file_get_contents("php://input") .
Related
Hello all and thanks in advance,
Short story, I am using a plugin to dynamically populate select options and am trying to do it via an ajax call but am struggling with getting the data into the select as the select gets created before the ajax can finish.
First, I have a plugin that sets up different selects. The options input can accept an array or object and creates the <option> html for the select. The createModal code is also setup to process a function supplied for the options input. Example below;
$('#modalAccounts').createModal({
{
component: 'select',
options: function () {
let dueDate = {};
for (let i = 1; i < 32; i++) {
dueDate[i] = i;
}
return dueDate;
}
}
});
What I am trying to do is provide an object to the options input via AJAX. I have a plugin called postFind which coordinates the ajax call. Items such as database, collection, etc. are passed to the ajax call. Functions that should be executed post the ajax call are pass through using the onSuccess option.
(function ($) {
$.extend({
postFind: function () {
var options = $.extend(true, {
onSuccess: function () {}
}, arguments[0] || {});
options.data['action'] = 'find';
$.ajax({
url: "../php/ajax.php",
type: "POST",
data: options.data,
statusCode: {
404: function () {
alert("Page not found");
}
},
success: function (result) {
var obj = $.parseJSON(result);
if (obj.success) {
if (typeof options.onSuccess === 'function') {
options.onSuccess.call(this, obj);
}
}
},
error: function (xhr, text, err) {
console.log(err);
}
});
}
});
}(jQuery));
The plugin works fine as when I look at the output it is the data I expect. Below is an example of the initial attempt.
$('#modalAccounts').createModal({
{
component: 'select',
options: function () {
$.postFind({
data: {
database: 'dashboard',
collections: {
accountTypes: {
where: {status: true}
}
}
},
onSuccess: function (options) {
let dataArray = {};
$.each(options, function (key, val) {
dataArray[val._id.$oid] = val.type;
});
return dataArray;
}
})
}
}
});
In differnt iterations of attempting things I have been able to get the data back to the options but still not as a in the select.
After doing some poking around it looks like the createModal script in executing and creating the select before the AJAX call can return options. In looking at things it appears I need some sort of promise of sorts that returns the options but (1) I am not sure what that looks like and (2) I am not sure where the promise goes (in the plugin, in the createModal, etc.)
Any help you can provide would be great!
Update: Small mistake when posted, need to pass the results back to the original call: options.onSuccess.call(this, obj);
I believe to use variables inside your success callback they have to be defined properties inside your ajax call. Then to access the properties use this inside the callback. Like:
$.ajax({
url: "../php/ajax.php",
type: "POST",
data: options.data,
myOptions: options,
statusCode: {
404: function () {
alert("Page not found");
}
},
success: function (result) {
var obj = $.parseJSON(result);
if (obj.success) {
if (typeof this.myOptions.onSuccess === 'function') {
this.myOptions.onSuccess.call(this);
}
}
},
error: function (xhr, text, err) {
console.log(err);
}
});
It's not clear to me where the problem is without access to a functional example. I would start with a simplified version of what you want to do that demonstrates the proper functionality. My guess is the callbacks aren't setup exactly correctly; I would want to see the network call stack before making a more definitive statement. A few well-placed console.log() statements would probably give you a better idea of how the code is executing.
I wrote and tested the following code that removes most of the complexity from your snippets. It works by populating the select element on page load.
The HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select data-src='test.php' data-id='id' data-name='name'></select>
</body>
</html>
<html>
<script>
$('select[data-src]').each(function() {
var $select = $(this);
$select.append('<option></option>');
$.ajax({
url: $select.attr('data-src'),
data: {'v0': 'Alligator', 'v1': 'Crocodile'}
}).then(function(options) {
options.map(function(option) {
var $option = $('<option>');
$option
.val (option[$select.attr('data-id')])
.text(option[$select.attr('data-name')]);
$select.append($option);
});
});
});
</script>
And the PHP file:
<?php
header("Content-Type: application/json; charset=UTF-8");
echo json_encode([
[ 'id' => 0, 'name' => 'Test User 0' ],
[ 'id' => 3, 'name' => $_GET['v0'] ],
[ 'id' => 4, 'name' => $_GET['v1'] ]
]);
Here's a fiddle that also demonstrates the behavior.
I try to post json with a form using slim.
If I use a rest api, it works. I set this as the body :
{
"url": "http://link.com"
}
Posting to 'api/generate' :
<?php
use Shorty\Models\Link;
use Shorty\Presenters\ErrorPresenter;
use Shorty\Presenters\LinkPresenter;
$app->post('/api/generate', function () use ($app) {
$payload = json_decode($app->request->getBody());
if(/*empty($payload) ||*/ !isset($payload->url) || empty(trim($payload->url))){
$app->response->setStatus(400);
return $app->response->write(
new ErrorPresenter('1000', 'A URL is required.')
);
}
if(!filter_var($payload->url, FILTER_VALIDATE_URL)){
$app->response->status(400);
return $app->response->write(
new ErrorPresenter('1001', 'A valid URL is required.')
);
}
$app->response->setStatus(201);
$link = Link::where('url', $payload->url)->first();
if($link){
return $app->response->write(
new LinkPresenter($link)
);
}
$newLink = Link::create([
'url' => $payload->url
]);
$newLink->update([
'code' => $newLink->generateShortCode($newLink->id)
]);
return $app->response->write(
new LinkPresenter($newLink)
);
});
It returns what is expected :
{"url":"http:\/\/link.com","generated":{"url":"http:\/\/localhost:200\/phpacademy\/shorty\/public\/a","code":"a"}}
But I want to send the json through a form. If use this :
<form id='userForm'>
<input type="text" name="url">
<input type="submit" value="Get link!">
</form>
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: 'POST',
url: 'api/generate',
data: $(this).serialize()
})
.done(function(data){
// show the response
$('#response').html(data);
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
It is not working.
I get {"error":{"code":"1000","message":"A URL is required."}}.
But I see that "url=http%3A%2F%2Flink.cok" have been posted.
I needed to send json, but json as "name:value", not the default "name: name, value: value". So I found that :
var data = { };
$.each($('form').serializeArray(), function() {
data[this.name] = this.value;
});
data = JSON.stringify(data);
I'm building a data object, with each properties as "name:value". Then parse the object into a string.
how can i submit a form and pass post data to angularjs? I know it must be trivial task but can not see my error.
That data will feed post variables in a PHP API that consume a webservice and return JSON and it is working when i do not use the search function.
I have month and origin to pass to a search function in the controller, and in the ApiAcp factory I have a resolve from the url: q.resolve(data);
When I do submit, the console log says: "cannot read url property of undefined", I can not see how to inject the Endpoint url into the search function properly, as the search without parameters works fine.
Here are the templates and the search button :
<form method="post" ng-controller="AcpSearchCtrl" ng-submit="searchAcp(data)">
<select name="month" ng-model="data.month">
<option value="01">January</option>
<option value="02">February</option>
...
</select>
<select name="origin" ng-model="data.origin">
<option value="99">OneState</option>
...
...
</select>
<input type="button" ng-click="search(data)" value="Search"/>
In the Controller i try to create a search function wich is not working says cannot read property url of undefined :
.controller('AcpSearchCtrl', function($scope, ApiAcp, $timeout, $http, ApiAcpEndpoint, $q) {
$scope.searchAcp = function(data ) {
$scope.month = data.month;
$scope.origin = data.origin;
var q = $q.defer();
$http.post(ApiAcpEndpoint.url, data)
.then(function(data) {
console.log(data);
console.log(' - data.month '+data.month);
console.log(' - data.origin '+data.origin);
q.resolve(data);
console.log(' q.promise '+q.promise);
var acp = {};
acp.dados = [ data ];
$scope.data = acp.dados;
console.log('data :'+$scope.data);
return q.promise;
});
}
})
In the Services.js i do post data and it works if i do not search by month or origin :
.factory('ApiAcp', function($http, $q, ApiAcpEndpoint) {
console.log('1. ApiAcpEndpoint url ', ApiAcpEndpoint.url)
var getApiData = function() {
var q = $q.defer();
$http.post(ApiAcpEndpoint.url)
.success(function(data) {
q.resolve(data);
})
.error(function(error){
console.log('Had an error'+error)
q.reject(error);
})
return q.promise;
}
return {
getApiData: getApiData
};
})
ApiAcpEndpoint should be injected in the controller definition/initialization, and not in $scope.search (same goes for $http)
.controller('AcpCtrl', function($scope, ApiAcp, $ionicLoading, $timeout, $http, ApiAcpEndpoint) {
$scope.data = null;
ApiAcp.getApiData()
.then(function(result) {
console.log(result);
$scope.headers = ['Desc','Real. month', 'Real. year/month', 'Plan. year/month', 'Real. year'];
var acp = {};
$scope.data = acp.dados;
console.log(' scope.data '+$scope.data);
})
$scope.search = function(data) {
$http.post(ApiAcpEndpoint.url,data)
.success(function(data){
console.log(' data from : '+data);
})
}
}
I have to code:
window.TicketCollection = Backbone.Collection.extend({
model:Tickets,
url:"/index.php/tickets/viewJSON"
});
window.TicketsView = Backbone.View.extend({
tagName:'div',
initialize: function () {
this.model.bind("reset", this.render, this);
},
render:function(eventName){
_.each(this.model.models, function(ticket){
$(this.el).append(new TicketListItemView({model:ticket}).render().el);
},this);
return this;
}
});
window.TicketListView = Backbone.View.extend({
tagName: "li",
template:_.template($('#tickets-list-item').html()),
render:function (eventName){
$(this.el).html(this.template(this.model.toJSON));
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes:{
"":"list"
},
list:function(){
window.alert("alright");
this.ticketList = new TicketCollection();
this.ticketLists = this.ticketList.get();
this.ticketListView = new TicketListView({model:this.ticketList});
$("#ticketListHolder").html(this.ticketListView.render().el);
},
});
var app = new AppRouter();
Backbone.history.start();
});
My php is as follows:
<?php header('Content-type: application/json');
echo json_encode(array("ticketID"=>"test", "ticketName"=>"1"));?>
The response from the php is:
[{"ticketID":"1","ticketName":"Fix the admin system"}]
HTML:
<div id="ticketListHolder">
#
</div>
<script type="text/template" id="tickets-list-item">
<div class="supTicket ticketHolder nobg">
<div class="issueType">
<span class="issueInfo"><%= ticketName %></span>
<span class="issueNum">[ #<%= ticketID %>] - <%= fullName %></span>
</div>
</div>
</script>
I get the error: Uncaught ReferenceError: ticketName is not defined, it appears that it's not parsing the json, instead reading it as one string block. Why is this error occuring, when my JSON is returning the correct data.
You don't use collection.fetch anywhere. Your router probably should look like this
var AppRouter = Backbone.Router.extend({
routes:{
"":"list"
},
list:function(){
window.alert("alright");
this.ticketList = new TicketCollection();
this.ticketListView = new TicketListView({
model:this.ticketList,
el:$("#ticketListHolder") // I directly assigned #ticketListHolder as the el
});
this.ticketList.fetch();
},
});
And a Fiddle with a mostly working version of your code http://jsfiddle.net/Cc9Ad/2/
Some points you should check:
your ListView and your ItemView were the other way round,
as Daniel Aranda said in his answer, try to use collections and models for their intended purpose,
this.model.toJSON should have been this.model.toJSON()
set defaults on your models, fullName is not defined and would break the templating engine if used in this state
The revised code
window.Tickets=Backbone.Model.extend({
defaults: {
fullName :"No full name"
}
});
window.TicketCollection = Backbone.Collection.extend({
model:Tickets,
url:"/index.php/tickets/viewJSON"
});
window.TicketsView = Backbone.View.extend({
tagName:'li',
template:_.template($('#tickets-list-item').html()),
initialize: function () {
},
render:function(eventName){
console.log
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
window.TicketListView = Backbone.View.extend({
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render:function (){
this.collection.each( function(ticket){
$(this.el).append(new TicketsView({model:ticket}).render().el);
},this);
return this;
}
});
var ticketList = new TicketCollection();
var ticketListView = new TicketListView({
collection:ticketList,
el:$("#ticketListHolder")
});
// ticketList.fetch();
ticketList.reset([
{"ticketID":"1","ticketName":"Fix the admin system"},
{"ticketID":"2","ticketName":"The ticket 2"}
]);
Model is not the same than collection.
You are trying to use a Collection as a Model.
Check this example:
http://danielarandaochoa.com/backboneexamples/blog/2012/02/22/real-world-usage-of-a-backbone-collection/
Also to fix your specific issue, pass to your template an object instead of a Backbone.Model
$(this.el).html(this.template(this.model.toJSON()));
You was missing the parenthesis.
But as I said, I recommend you to read the article explaining how to use the collections.
I use JSON.parse() function to parse the data sent by the PHP.
var a = $.ajax({
url:"/index.php/tickets/viewJSON",
async:false,
cache:false
}).responseText;
jsonData = JSON.parse(a);
then use _.each to loop jsonData then push each data to your model.
I've been trying for days to get this working and I just cannot figure out why when I have my view to destroy a model which belongs to a collection (which properly has a url attribute for the beginning fetch of models' data), only fires the destroy 'event' which is bubbled up to the collection for easy binding by my list view. But it does not ever send an actual DELETE request or any request to the server at all. Everywhere I look, I see everyone using either the collection's url attr, or urlRoot if the model is not connected to a collection. I've even tested before the actual this.model.destroy() to check the model < console.log(this.model.url());
I have not overwritten the destroy nor sync methods for backbone. Also each model does have an id attribute which is populated via the collection's fetch (from database records).
The destroy takes place in the list item view, and the collection's "destroy" event is bound in the list view. All that works well (the event handling), but the problem, again, is there's no request to the server.
I was hoping that backbone.js would do it automatically. That was what the documentation implies, as well as the numerous examples everywhere.
Much thanks to anyone who can give some useful input.
FYI: I'm developing on wampserver PHP 5.3.4.
ListItemView = BaseView.extend({
tagName: "li",
className: "shipment",
initialize: function (options) {
_.bindAll(this);
this.template = listItemTemplate;
this.templateEmpty = listItemTemplateEmpty;
},
events: {
'click .itemTag' : 'toggleData',
'click select option' : 'chkShipper',
'click .update' : 'update',
'click button.delete' : 'removeItem'
},
// ....
removeItem: function() {
debug.log('remove model');
var id = this.model.id;
debug.log(this.model.url());
var options = {
success: function(model, response) {
debug.log('remove success');
//debug.log(model);
debug.log(response);
// this.unbind();
// this.remove();
},
error: function(model, response) {
debug.log('remove error');
debug.log(response);
}
};
this.model.destroy(options);
//model.trigger('destroy', this.model, this.model.collection, options);
}
});
Collection = Backbone.Collection.extend({
model: Model,
url: '?dispatch=get&src=shipments',
url_put : '?dispatch=set&src=shipments',
name: 'Shipments',
initialize: function () {
_.bindAll(this);
this.deferred = new $.Deferred();
/*
this.fetch({
success: this.fetchSuccess,
error: this.fetchError
});
*/
},
fetchSuccess: function (collection, response) {
collection.deferred.resolve();
debug.log(response);
},
fetchError: function (collection, response) {
collection.deferred.reject();
debug.log(response);
throw new Error(this.name + " fetch failed");
},
save: function() {
var that = this;
var proxy = _.extend( new Backbone.Model(),
{
url: this.url_put,
toJSON: function() {
return that.toJSON();
}
});
var newJSON = proxy.toJSON()
proxy.save(
newJSON,
{
success: that.saveSuccess,
error: that.saveError
}
);
},
saveSuccess: function(model, response) {
debug.log('Save successful');
},
saveError: function(model, response) {
var responseText = response.responseText;
throw new Error(this.name + " save failed");
},
updateModels: function(newData) {
//this.reset(newData);
}
});
ListView = BaseView.extend({
tagName: "ul",
className: "shipments adminList",
_viewPointers: {},
initialize: function() {
_.bindAll(this);
var that = this;
this.collection;
this.collection = new collections.ShipmentModel();
this.collection.bind("add", this.addOne);
this.collection.fetch({
success: this.collection.fetchSuccess,
error: this.collection.fetchError
});
this.collection.bind("change", this.save);
this.collection.bind("add", this.addOne);
//this.collection.bind("remove", this.removeModel);
this.collection.bind("destroy", this.removeModel);
this.collection.bind("reset", this.render);
this.collection.deferred.done(function() {
//that.render();
that.options.container.removeClass('hide');
});
debug.log('view pointers');
// debug.log(this._viewPointers['c31']);
// debug.log(this._viewPointers[0]);
},
events: {
},
save: function() {
debug.log('shipments changed');
//this.collection.save();
var that = this;
var proxy = _.extend( new Backbone.Model(),
{
url: that.collection.url_put,
toJSON: function() {
return that.collection.toJSON();
}
});
var newJSON = proxy.toJSON()
proxy.save(
newJSON,
{
success: that.saveSuccess,
error: that.saveError
}
);
},
saveSuccess: function(model, response) {
debug.log('Save successful');
},
saveError: function(model, response) {
var responseText = response.responseText;
throw new Error(this.name + " save failed");
},
addOne: function(model) {
debug.log('added one');
this.renderItem(model);
/*
var view = new SB.Views.TicketSummary({
model: model
});
this._viewPointers[model.cid] = view;
*/
},
removeModel: function(model, response) {
// debug.log(model);
// debug.log('shipment removed from collection');
// remove from server
debug.info('Removing view for ' + model.cid);
debug.info(this._viewPointers[model.cid]);
// this._viewPointers[model.cid].unbind();
// this._viewPointers[model.cid].remove();
debug.info('item removed');
//this.render();
},
add: function() {
var nullModel = new this.collection.model({
"poNum" : null,
"shipper" : null,
"proNum" : null,
"link" : null
});
// var tmpl = emptyItemTmpl;
// debug.log(tmpl);
// this.$el.prepend(tmpl);
this.collection.unshift(nullModel);
this.renderInputItem(nullModel);
},
render: function () {
this.$el.html('');
debug.log('list view render');
var i, len = this.collection.length;
for (i=0; i < len; i++) {
this.renderItem(this.collection.models[i]);
};
$(this.container).find(this.className).remove();
this.$el.prependTo(this.options.container);
return this;
},
renderItem: function (model) {
var item = new listItemView({
"model": model
});
// item.bind('removeItem', this.removeModel);
// this._viewPointers[model.cid] = item;
this._viewPointers[model.cid] = item;
debug.log(this._viewPointers[model.cid]);
item.render().$el.appendTo(this.$el);
},
renderInputItem: function(model) {
var item = new listItemView({
"model": model
});
item.renderEmpty().$el.prependTo(this.$el);
}
});
P.S... Again, there is code that is referenced from elsewhere. But please note: the collection does have a url attribute set. And it does work for the initial fetch as well as when there's a change event fired for saving changes made to the models. But the destroy event in the list-item view, while it does trigger the "destroy" event successfully, it doesn't send the 'DELETE' HTTP request.
Do your models have an ID? If not, the HTTP request won't be sent. –
nikoshr May 14 at 18:03
Thanks so much! Nikoshr's little comment was exactly what I needed. I spent the last 5 hours messing with this. I just had to add an id to the defaults in my model.