I am trying to use a core-xhr to call a URL and set the response to a variable, like this
this.$.xhr.request({url:"<theURL>", method:'POST', body: "<xmldata>", callback : this.processXML});
[ .. ]
processXML : function(response) {
this.data = response; //its basically window.data = response
console.log(this);
}
As specified in my comment, this is not referring to the polymer element in question rather it points to window.
Please advice the correct way to do this.
Looks like I already knew the answer.
this.$.xhr.request({url:"<theURL>", method:'POST', body: "<xmldata>", callback : this.processXML.bind(this)});
Using bind(this) will bind this to any function being called.
More at: How To Access Polymer Custom Element From Callback
Related
I have done a service that gets a json file from the server with the translated values of the labels of my webapp. Seems to work fine:
mobilityApp.service('serveiTraduccions', function($resource) {
this.getTranslation = function($scope) {
var languageFilePath = 'traduccions/traduccio_en.json';
$resource(languageFilePath).get(function (data) {
$scope.translation = data;
});
};
});
What I am trying to do is acces that "$scope.translation" from my controler, I tried all and nothing worked. The object is saved in my $scope as you can see:
how can I get the values of the "registroBtnRegistro", "registroErrorRegistro" etc ?
Thanks in advance !
I tried:
console.log($scope.translation); -> undefined
console.log($scope['translation']); -> undefined
console.log($scope.translation.registroBtnRegistro); -> TypeError:
Cannot read property 'registroBtnRegistro' of undefined
console.log($scope.translation['registroBtnRegistro']); -> TypeError:
Cannot read property 'registroBtnRegistro' of undefined
Maybe you're trying to access these values from another $scope that not inherits the scope where you've created your translation model.
Try to assign this model directly to $rootScope, so you can access it from every scope:
mobilityApp.service('serveiTraduccions', function($resource, $rootScope) {
this.getTranslation = function() {
var languageFilePath = 'traduccions/traduccio_en.json';
$resource(languageFilePath).get(function (data) {
$rootScope.translation = data;
});
};
});
this answer is a blind attempt because your original post lacks basic information like the call from the controller.
we can refine it until we make it work.
First, you should be returning something from your method:
mobilityApp.service('serveiTraduccions', function($resource) {
this.getTranslation = function() {
var languageFilePath = 'traduccions/traduccio_en.json';
return $resource(languageFilePath);
};
});
You are using $resource but you might as well use basic $http.get(). at least it doesn't look like a restful api to me.
In any case, because it's an asynchronous request, it will not return the list of translated strings, but a resource "class" that allows methods like get, delete or the more general query():
from the docs: default methods are
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
sidenote: injecting $scope in a service doesn't make much sense to me: services are used to encapsulate common logic accross components. However, you can pass a scope instance as a parameter.
Then, the controller that uses this should have the service injected and use a callback to get the results when they have arrived (asynchronous operation!):
TraduccioCtrl ... {
$scope.translation = {}; // avoid undefined when the view just loads
ServeiTraduccions.getTranslation.query(function (response) {
$scope.translation = response; // and angular's two-way data binding will probably do the rest
});
}
The Angular docs about ng-resource have a working example. Other questions in SO have addressed this already too, like Using AngularJS $resource to get data
Good day! I need to render a model's attributes to JSON so I can pass them into a template.
Model:
var UserInfo = Backbone.Model.extend({
url: appConfig.baseURL + "users/",
});
Template:
<script type="text/html" class="template" id="profile-form">
<h2 class="ui-li-heading"><%= username %></h2>
<p class="ui-li-desc"><strong><%= phone %></strong></p>
</script>
View:
var ProfilePageView = Backbone.View.extend({
events: {
'click #edit': "edit"
},
initialize: function () {
this.template = $.tpl['profile-form'];
var user = new UserInfo()
user.fetch({
data: $.param({email: localStorage.getItem('user_email')}),
type: 'POST'
});
console.log(user) //returns correct object with attrs
console.log(user.toJSON()) //returns empty object
},
render: function (eventName) {
$(this.el).html(this.template());
},
edit: function () {
window.workspace.navigate('#account/edit', { trigger: true});
}
});
When i put in console something like this, user.toJSON() returns correct data
var user = new UserInfo();
user.fetch({
data: $.param({email: localStorage.getItem('user_email')}),
type: 'POST'
});
But when i put it to my view, its returns Object {}.
Where is a mistake or tell me how can differently pass to the template data received from the server in json format? Thanks!
You appear to have two problems. fetch is asyncronous, so you need to use a callback to use the information. But first, an explanation about toJSON. .toJSON() doesn't actually return a JSON string, it returns an object that is what you want JSON to stringify. This allows you to modify the toJSON method to customize what attributes will be taken from your model or collection and added to the JSON string representation of your model. Here is a quotation from the Backbone.js docs:
toJSON collection.toJSON([options])
Return a shallow copy of the model's attributes for JSON
stringification. This can be used for persistence, serialization, or
for augmentation before being sent to the server. The name of this
method is a bit confusing, as it doesn't actually return a JSON string
— but I'm afraid that it's the way that the JavaScript API for
JSON.stringify works.
So you should replace this line in your code
console.log(user.toJSON())
with this one
console.log(JSON.stringify(user))
The object that you saw was returned by toJSON will then be turned into JSON.
Now, even after you do that, it won't work properly, because you will execute the console.log before you get the data for your model from fetch. fetch is asynchronous, so you need to call any code you want to be executed after the fetch is done in the success callback:
user.fetch({
data: $.param({email: localStorage.getItem('user_email')}),
type: 'POST',
success: function(){
console.log(user);
console.log(JSON.stringify(user));
}
});
I am needing the scope of $scope.press to fall within the scope of ReleaseCtrl, wondering the best way to refactor the syntax to do so... I know it's a scope inheritance issue because when I try to post the same console.log($scope.press) below the close of the query function, I get an undefined response as opposed to the array, which properly shows up within the bounds of the "Release" query function.
app.service('Releases', function ($resource) {
return $resource('http://127.0.0.1:3000/json', {}, {
'query': {method: 'GET', isArray: true}
});
});
app.controller("ReleaseCtrl", function (Releases, $scope){
Releases.query(function(data, $scope){
$scope.press = data;
console.log($scope.press);
for(var i=0;i<$scope.press.length;i++) {
console.log($scope.press[i].name)
}
});
$scope.loadRelease = function() {
console.log("Loading Press Release");
}
})
I imagined the Releases.query function could find its way to replace the function directly above it, but, Releases of course is undefined at that point because it has not yet been passed / injected.
I think this is fairly simple to fix, but I do not know exactly the best way to go about it.
Best regards,
Sean
Here is what I ended up doing:
app.service('Releases', function ($resource) {
return $resource('http://127.0.0.1:3000/json', {}, {
'query': {method: 'GET', isArray: true}
});
});
app.factory ('release', function (Releases){
return Releases.query();
})
app.controller("ReleaseCtrl", function (release, $scope){
$scope.press = release;
console.log($scope.press);
$scope.loadRelease = function() {
console.log("Loading Press Release");
}
})
After looking around, I believed injecting with service was better practice than what I was doing earlier, so I just refactored it that way. I think re-writing what is in the service within the factory is even better. Will update when I get there.
A thing to note: Whatever you query must have more than one result. Otherwise it comes back as an object, not an array, and it does not work correctly. Maybe somebody can explain why?
Since you are passing $scope as a parameter to the function you pass to .query, and because .query does not call the callback with any arguments, $scope is probably undefined.
You need to use the following syntax for accessing your resources:
var data = Releases.query(function () {
$scope.press = data;
// ... Further operations with data.
});
See usage note in the docs
Can some one help or explain to me how this works please?
i have in my view:
<script type="text/javascript">
var jqxhr = $.getJSON("<%= Url.Action("GetTrainingModulePoints" , "Home") %>", function (json) {
console.log(json);
});
</script>
GetTrainingModulePoints should return 4 rows each containing a value for interactiontype and a value for points
in the console log i just get [object object]?
how can i see what is in the variable json?
http://imageshack.us/photo/my-images/542/firebug.png/
thanks
Look at the Network tab in FireBug or similar javascript debugging tool. There you will see the AJAX request and all you have to do is expand the request and look at the response.
Here's for example how that might look like in FireBug for a sample AJAX request:
And if you click on the JSON tab you will see the output formatted as a JSON object where you could expand/collapse the properties.
If for some very weird reason you cannot use a javascript debugging tool in your web browser (I don't know even know how you could be developing a web application, but ...) you could use the JSON.stringify method that's built into modern browsers:
var jqxhr = $.getJSON("<%= Url.Action("GetTrainingModulePoints" , "Home") %>", function (json) {
alert(JSON.stringify(json));
});
And if you are not using a modern browser which doesn't have the JSON.stringify method natively built-in you could still reference the json2.js script to your page.
UPDATE:
OK, it seems that your confusion comes from the fact that you are getting {"success":true} whereas you were expecting to get the rows from your stored procedure. I know this because I answered your previous question.
Here's how your controller action look like:
[HttpGet]
public JsonResult GetTrainingModulePoints()
{
var currentUser = ZincService.GetUserForId(CurrentUser.UserId);
ZincService.TrainingService.GetTrainingModulePoints(currentUser.UserId);
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}
As you can see in this controller action you are always returning success = true. If you want to return the results from your stored procedure you could do this:
[HttpGet]
public JsonResult GetTrainingModulePoints()
{
var currentUser = ZincService.GetUserForId(CurrentUser.UserId);
var modulePoints = ZincService.TrainingService.GetTrainingModulePoints(currentUser.UserId);
return Json(
new {
success = true,
modulePoints = modulePoints
},
JsonRequestBehavior.AllowGet
);
}
Here I assume that your TrainingService.GetTrainingModulePoints method is actually returning some object. If this is not the case you will have to explain what those methods are doing and how do you expect to get the output.
Currently, the following code works as intended but if I add an echo such as "LANG: en" anywhere in the code (let's say in the bootstrap), the following code won't work anymore and I get this ajax request response :
<br/>LANG : en{"response":true,"id":13}
(the ajax response contains the echo + json array ) and therefore I'm not able to print the id (it will print : undefined when i will try to access to data.id).
My question is : How can I print my debug info and still manage to perform ajax requests ?
Here is my code in the controller :
public function init()
{
$this->_helper->ajaxContext->addActionContext('retrievecategories', 'json')->initContext();
}
public function retrievecategoriesAction()
{
$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
if ($this->getRequest()->isXmlHttpRequest()) {
if (isset($_POST['id']))
$id = $_POST['id'];
$id+=1;
echo json_encode(array('response' => true, 'id' => $id));
}
}
My js code :
jQuery(function(){
var obj = {"id":12};
jQuery.ajax({
url: '/search/retrievecategories?json',
type: 'post',
data: obj,
dataType: 'json',
success: function(data){
var id = data.id;
alert(id);
},
error: function(data){
var id = data.id;
alert(id);
}
});
});
I hope I was clear enough. Thank you for your time !
If you echo anything but the JSON object, the JQuery parser will fail because the response is no longer a valid JSON. you could make a custom parser which interprets the response text and takes away the debug info leaving the JSON object, or you can include the debug info in the array you encode.
json_encode(array('data'=>'data','debug'=>'debug info'))
Then you detect if the debug field is present and after a console.log() or alert() you delete it form the object.
I would strongly recommend that you read about firePHP. It uses the same console that Firebug uses to display debug information from your php code. It is really simple to use with the Zend_Log.