I have a simple ember application. The application file structure is as follows (I will only show the relevant ones),
app/
-> components //subdirectory of app/
-> controllers
-> routes
-> templates
index.html // auto generated file
.
.
.
under my templates directory I have two files application.hbs and page1.hbs
// app/templates/application.hbs
<body>
<h2 id="title">Welcome to Ember</h2>
<button onClick={{action 'ajaxCall'}}>Press Me</button>
</body>
// app/templates/page1.hbs
<body>
<h2 id="title">Welcome to Ember</h2>
<button onClick={{action 'ajaxCall'}}>Press Me</button>
</body>
So, when a user clicks a button the 'ajaxCall' action is executed
// app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
ajaxCall: function() {
console.log("this is from ajaxCall function");
Ember.$.ajax({
url: "http://localhost:4200/page1",
dataType: 'text',
success: function(data) {
console.log("Extracted HTML SUCCESSFULLY");
console.log(data);
}
});
}
}
});
The ajax call appears to work, but instead of returning the html from page1.hbs (which is what I want), it returns the html from index.html. Is what I am trying to do here able to be accomplished? Any tips would help, thank you in advance. My goal is to build a single page application, without redirecting to a new page, instead load the html as needed.
Aucun commentaire:
Enregistrer un commentaire