I'm new to web development stuff and have been looking at some ember, I wanted to try running this with Spring boot. I got spring boot working and was able to run the sample blog example created with ember.
Now I want to some data read from the spring server, for example I can go to http://localhost:8080/greeting?name=User and get the following displayed onto the page
{"id":12,"content":"Hello, User!"}
What I want to do is get ember to read make that call instead of me manually adding it in the url and getting ember to then display that data.
So in ember my app.js looks like this
App.IndexRoute = Ember.Route.extend({
model: function() {
return $.getJSON("http://localhost:8080/greeting?name=User");
}
});
This I believe makes the call. I was trying to re-display the data onto the onto the index.html like this:
<script type="text/x-handlebars" data-template-name="index">
<Not sure what to put here>
</script>
I may be missing something obvious or not getting something. I apologize if thats the case. Any help will be welcome
The model hook in your route should resolve to {"id":12,"content":"Hello, User!"}. Once that is resolved, Ember will populate the model property of the corresponding controller (in this case, IndexController, which is auto-generated if you don't provide one).
As the index template you are using is backed by that controller, you can refer to any of its properties, including model:
<script type="text/x-handlebars" data-template-name="index">
{{model.content}}
</script>
I hope you can make it work!
Related
Context to this post is I'm a java developer attempting to teach myself Ember. It isn't going well. I realize this question is pretty vague so I apologize, I'm not even sure what I should be asking...
I need to pull data into a model, i.e. via some sort of query, from a heroku json endpoint. In the application.js file, I have the following:
import DS from ‘ember-data’;
export default DS.JSONAPIAdapter.extend({
host: 'https://cag-brain.herokuapp.com'
});
Ideally I would like to pull this data into a user model, then display that data on a page as a sort of proof of concept. This unfortunately gets me nothing. Nor am I even sure I'm going about this correctly. Should I be doing something different than attempting to use Host Customization? Any guidance would be much appreciated!
There are different things involved for retrieving records via ember-data.
First of all you should define your models:
// app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string')
});
You should retrieve records in a model hook of a route.
// app\routes\posts.js
import Route from '#ember/routing/route';
export default Route.extend({
model() {
return this.get('store').findAll('post');
}
});
Then you should configure your api host and maybe a namespace. You included that step in your question:
// app/adapters/application.js
import DS from ‘ember-data’;
export default DS.JSONAPIAdapter.extend({
host: 'https://cag-brain.herokuapp.com'
});
If your api does not implement JSON Api specification you need to customize your serializer and adapter. Ember-data ships with a RESTAdapter/RestSerializer additionally to the default adapter and serializer which implements JSON Api spec. There is also one abstract adapter and serializer If you need to start from scratch. Before that I would definitely have a look if there is any community adapter/serializer fitting your needs.
To decouple api and client development and to speed up tests I would recommend ember-cli-mirage which allows you to mock your api.
I am newbie at spring and generally webdev. I am writing small application in spring boot, where on hompage I display actual weatherstatus. Data is storage with help of JpaRepository and HSQLDB.
Each minute I recive data, parse, and add it to repository. The logic is done.
How to force client's browser to refresh, when I get new, actual Data?
With HTML:
To add this kind of feature without using any Ajax feature, you can use the following meta:
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
https://www.w3.org/TR/WCAG20-TECHS/H76.html
With Javascript:
If you can add Javascript in the project, my advice is to create a endpoint to check periodically with JQuery or Fetch:
http://api.jquery.com/jquery.ajax/
https://www.npmjs.com/package/fetch
Juan Antonio
If you are using REST calls then it will be very easy for you.
<script>
$(document).ready(function(){
setInterval(getWeather(),2000);
//Here get weather is a method and 2000 is numbers of milliseconds after which you want to update weather data
});
function getWeather(){
$.ajax({
type : 'GET'
url : 'Your url here'
success : function(data){
//set received data to your container
}
});
}
</script>
I'm new at Laravel and I can't figure how to handle controllers (and ajax).
I have a button in a sidebar, and I want to show a page when it's clicked.
I have a view (which is the page i want to display in ajax) located in views/logs/system.blade.php
and a controller located in controllers/LogsController which has the following code -
class LogsController extends BaseController {
public function getLogs() {
return View::make('logs/system');
}
}
my routes.php has the code -
Route::get('/', 'HomeController#showWelcome'); // Works fine
Route::get('logs', 'LogsController#getLogs');
First things - how can I access the view I'm gettings in getLogs in a URL (localhost/mysite/public/logs doesn't work...)
Second - how can I access it in an ajax call?
I tried
$.get('logs', function(data) {
console.log(data);
});
but it doesn't work either. It gets 500 Internal Server Error....
Help please!
You should be able to go to: localhost/mysite/public/logs
if not, enable mod_rewrite in your apache and in your apache httpd.conf, set:
AllowOverride All
Most probably the server error 500 (in both cases) is caused by the fact that you have a mistake in the View::make() call. To utilize a view in subfolder you have to use the dot notation.
So correct the code
class LogsController extends BaseController {
public function getLogs() {
return View::make('logs.system');
}
}
and you should be good to go, the url should load fine, both in browser and in Ajax.
If you still have problems, check the Laravel Logs (probably path/to/app/storage/logs/...) as well as Apache Error Log (probably /var/log/apache2/error.log). I assume you are using Unix/Linux operating system.
The rewrite module was on.
I solved it by going to localhost/mysite/public/index.php/logs, this is the URL that it expects, maybe something in the .htaccess file is wrong.
I have been developing a Firefox extension using the Addon SDK and need to load some data that is stored in the same package, as a separate file: "data.json". It needs to be loaded from a page script, i.e. "loader.js" which is included in the "panel.html" using the script src tags.
The structure is like this:
+data
panel.html
panel.js
loader.js
data.json
...
+lib
main.js
...
panel.html has:
<script type="text/javascript" src="loader.js"></script>
Initially we stored the data simply into a js file as "data.js" and included from the "panel.html" using script src tags and it worked without any problems. However when we submitted the add-on to the Mozilla Addon site, this was addressed as one of the issues to fix, saying that we need to use a non-executable format, such as a JSON file to make it more safe.
Now the problem seems like "loader.js" is not allowed to make a AJAX request to "data.json". (Using the JQuery $.ajax() call returns with no success, giving the error code 0) So the solution I have been thinking of is to load "data.json" from "main.js" using the SDK's request() function and somehow pass it to the "loader.js", the page script. But that seems to be complicated since, as far as I understand, the data needs to be first sent to a content script, and then from there to the page script. And this needs to be happen when the page script is loading! I am confused about this since I am not sure if I am missing a much more practical solution, or is it really something complicated what I am trying to do, simply loading local JSON data in the package into a local page script?
Here's an example on the Add-on Builder that explores and approach to this.
First off, you can load the json file from data and parse it using self.data.load:
let data = require('self').data;
let taps_data = JSON.parse(data.load('taps.json'));
This loads synchronously, so it isn't something you want to do often, in the example it would only happen when the add-on firsst becomes active in a browsing session.
Next, you would use content scripts and message passing to pass the data in to the panel.
In the main.js script:
panel.on('show', function() {
if (!loaded)
panel.port.emit('taps-data', taps_data);
});
In the content script:
self.port.on('taps-data', function(data) {
$('#list').html('');
data.forEach(function(item) {
$('#list').append('<div>'+ item.name +'</div>');
});
self.port.emit('taps-loaded');
});
I do a bit of extra work to make sure I'm only emitting the data once. The data, FYI, is saved from the live beer keg data api from my local pub.
Using Ajax in Django is a open Issue. I have tried to understand it by reading blogs and forums, but it didn't work for me. I am posting a very simple question related to it.
Method defined in views.py: (just a sample)
def widget_data(request):
####
extra_context = {
'data': username
'part': company
}
return direct_to_template(request,'test/widgets.html',
extra_context)
I want to load extra_context to rendered template using Ajax.
Following things will happen in widget.html template i.e.
When a moderator will type a URL at the address bar to open a page it will load two widgets i.e. one for loading all the registered username and other one for their company name . user are continuously registering to the sites and adding company name to their profile. When a new user will registered to the site both widget should load automatically using Ajax.
I have no idea about the topic of Ajax.
How to do this?
How should i even start this?
I have read these following links :
Tutorial 1
Tutorial 2
I know that the answer will be too long and too messy but any help will be appreciative.
If you use jQuery you can do the following
$.get('/url/of/widget_data/view', success(data, textStatus, jqXHR) {
$('#idofdivtoupdate').html(data);
});
That would probably be the easiest way to do it.