Once page load google tends graph is getting load under trendsBlock class. In below code once after calling next_fun() complete html code getting render with graph. I need to render inside of trendsBlock.
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1173_RC01/embed_loader.js"></script>
<div class="trendsBlock">
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"IN","time":"2016-10-02 2017-11-02"},{"keyword":"citi bank","geo":"IN","time":"2016-10-02 2017-11-02"}],"category":0,"property":""}, {"exploreQuery":"date=2016-10-02 2017-11-02,2016-10-02 2017-11-02&geo=IN&q=dbs%20bank,citi%20bank","guestPath":"https://trends.google.com:443/trends/embed/"});
</script>
</div>
<button onclick="next_fun()">Click to next trends</button>
<script type="text/javascript">
function next_fun(){
//innerHTML in to class trendsBlock
//?
}
</script>
</body>
</html>
The renderExploreWidgetTo method allows one to embed the charts to any HTML element.
You can look at the below sample code to understand.
function next_fun(){
var divElem = document.getElementById('sampDiv');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
}
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1328_RC04/embed_loader.js"> </script>
<div id='sampDiv'>
</div>
<button onclick="next_fun()">Click to next trends</button>
</body>
</html>
P.S: when I am running the above code in StackOverflow's internal compiler/browser it throws an error.
Error img!!
But works fine otherwise.
Related
In my web page Im using published map from Geoexplorer in iframe src.On button click I want to load another service in same iframe but its not working.
my html code in map.html is
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<button type="button" onclick="go()">Actual plant functional type</button>
</nav>
<section>
<iframe id="test" style="border: none;" height="494" width="1100" src="http://localhost:8080/geoexplorer/viewer/#maps/1"></iframe>
</section>
<script type="text/javascript">
function go() {
document.getElementById("test").src = "http://localhost:8080/geoexplorer/viewer/#maps/2";
}
</script>
</body>
</html>
I recently decided to try Ember.js.
I set up a small application, but I can't get something to work.
I have a file app.html
<!doctype>
<html>
<head>
...
</head>
<body>
<script type="text/x-handlebars">
...
</script>
</body>
</html>
Now, of course, this doesn't render anything. I include handlebars.js, ember.js, and app.js and now then everything renders properly.
The problem is that when I try to add something with curly braces, the output is blank. For example, if I set some variables in my JS files and want to display it in my app, like <h1>{{title}}</h1>, I get <h1></h1>. When I try to put {{input value="Username"}}, nothing gets displayed.
I get no error messages, except when I use closing tags. For example, this
{{#link-to "http://google.ca"}}Link{{/link-to}}
Will make my whole web page simply display
line 117: interleaved closing tag: link-to
I have no idea what is wrong. Even googling the error message doesn't help much.
Any hint?รง
UPDATE
This code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script type="text/javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Link
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
Renders a blank page with this error message:
line 36: interleaved closing tag: each
I'm not sure that's normal.
link-to is meant for ember routes only. (http://emberjs.com/guides/templates/links/)
In your case I would just write the html for the link in the template directly.
Here is a small sample ember.js app with the google.ca link, I have a feeling that your html may not be setup correctly with an outlet and a template:
http://emberjs.jsbin.com/qivunivabo/3/edit
I found the problem and this is really stupid.
My HTML files are delivered by a framework that uses Mustache as its template engine (server side) and therefore it renders all the {{something}} tags before sending the output to the broswer.
:/
I'm trying to create a simple TODO app based on the one in the Getting Started Ember.js tutorials, but with persistence to a backend.
I've had everything working until I wanted to look at wrapping my markup for rendering a todo in a view (called 'todo-element'), to enable drag & drop sorting.
Then, my view refused to render. I've simplified the markup for the view just to render the text 'Hello', to try to debug things. The instance of the view sets the tagName to 'li'. So I should be getting a list of lis with the text 'Hello' in them. However, all I get is a list of empty lis.
This is the markup:
<!DOCTYPE html>
<html>
<head>
<title>Todos</title>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todos">
<header>
<h1>The TODOs</h1>
{{input type="text" placeholder="Enter new TODO description here ..."
value=newDescription action="createTodo"}}
<button {{action "createTodo"}} id="add-todo">Add</button>
</header>
<ul id="todos">
{{#each itemController="todo"}}
{{todo-element}}
{{/each}}
</ul>
</section>
</script>
<script type="text/x-handlebars" data-template-name="todo-element">
<span>Hello</span>
</script>
<script type="text/javascript" src="javascripts/jquery"></script>
<script type="text/javascript" src="javascripts/handlebars-1.0.0.js"></script>
<script type="text/javascript" src="javascripts/ember.js"></script>
<script type="text/javascript" src="javascripts/ember-data.js"></script>
<script type="text/javascript" src="javascripts/todos/app.js"></script>
<script type="text/javascript" src="javascripts/todos/todo.js"></script>
<script type="text/javascript" src="javascripts/todos/router.js"></script>
<script type="text/javascript" src="javascripts/todos/todos_controller.js"></script>
<script type="text/javascript" src="javascripts/todos/todo_controller.js"></script>
<script type="text/javascript" src="javascripts/todos/todo_element_view.js"></script>
<script type="text/javascript" src="javascripts/todos/edit_todo_view.js"></script>
</body>
</html>
And this is the code for the view:
Todos.TodoElementView = Ember.View.extend( {
templateView : 'todo-element',
tagName : 'li'
} );
Ember.Handlebars.helper( 'todo-element', Todos.TodoElementView );
My best guess is that the 'todo-element' markup is not getting associated with the TodoElementView, as I get exactly the same empty list of lis if I change the 'todo-element' markup's data-template-name to something random.
If anybody could help me with where I'm going wrong here, I'd be very grateful.
Cheers,
Doug.
think you are little confused between ember components and ember views
1. A view is called with view helper {{view App.ViewName}}. Your code {{todo-element}} looks more like a component.
In your component you have a static tag span hello so I guess it's showing only hello. Put dynamic data in it using {{}}
I'd like to define a block helper that puts the text in the block into a tag. I used an example from http://handlebarsjs.com/block_helpers.html as a start but my code doesn't work. What do I have to change to get test as the output of this block helper?
app.js
App = Ember.Application.create();
Handlebars.registerHelper('link', function(options) {
var result = '' + options.fn(this) + '';
return Handlebars.SafeString(result);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<script type="text/x-handlebars">
<p>
{{#link}}
test
{{/link}}
</p>
</script>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/ember.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
Just a couple of details (EDITED):
You just need to create a new instance of Handlebars.SafeString before returning it. Please check #muistooshort's jsfiddle here with a working example of what you are trying to achieve.
Block helpers are a little bit more complex and used when is needed to invoke a section of a template with a different context. If it is not your case, you could use the syntax for regular Handlebars helpers. (I'll leave the following code here for future reference, although it's not relevant in this case)
Declare helper in app.js:
Ember.Handlebars.registerHelper('link', function(value) {
var result = '' + value + '';
return new Handlebars.SafeString(result);
});
In index.html replace your current template with:
<script type="text/x-handlebars">
<p>
{{link test}}
</p>
</script>
Hope this helps!
I am using Ember and my view is getting rendered at the very bottom of my HTML DOM, instead of inside my div element.
Here is my source code :
index.html :
<body>
<div id="test">
<script type="text/x-handlebars">
{{view Skills.RecommendedSkillsListView}}
</script>
</div>
<script type="text/x-handlebars" data-template-name="recommended_skills_list">
<a href="#" {{action "b"}}>DO A NEW THING</a>
</script>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
</body>
app.js :
Skills = Ember.Application.create({});
Skills.RecommendedSkillsListView = Ember.View.extend({
templateName: 'recommended_skills_list',
b: function(v) {
alert('new hello');
}
});
Skills.initialize();
The rendered document :
<body class="ember-application">
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Note: when using the same code with a previous version of ember (0.9.5) it works as expected
Ah, it looks like it is 'appending your view' to the body which you have given the 'application' template name which Ember will look for. Why not try putting a div inside the body and then referencing this in the Ember.Application.create();?
Ember.Router
Skills = Ember.Application.create({
rootElement: '#test'
});
View
<body>
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Let me know if I've missed the point ;)
You need to specify the element to render your application to using the rootElement (docs here, related question: Emberjs rootElement) property of your application:
Skills = Ember.Application.create({
rootElement: "#test"
});
Here is a working example: jsfiddle example
Rendered output from example:
<body>
<div id="test" class="ember-application">
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</div>
</body>