Render a view in the outlet after ajax response - javascript

In my home page i have an oulet watchListView i just want to replace the outlet with the view i am getting after clicking the link "/watch_lists".
This is the code for application Layout/template
<div id='main-outlet'>
{{outlet}}
<div class="watch-list-rght"><i class="icon-eye-open"></i> </div>
</div>
{{outlet watchListView}}
This is the code in application route
this.resource('watchList', { path: '/watch_lists' });
This is the code in WatchList router
Discourse.WatchListRoute = Discourse.Route.extend({
redirect: function() { Discourse.redirectIfLoginRequired(this); },
renderTemplate: function() {
this.render('watch_lists', { into: 'application', outlet: 'watchListView' });
}
});
I Just want to add view created after the ajax call in the application template
Can anyone point me out where i am wrong.

Your view is loading into the outlet as soon as you move into this route, it just has no data until populated by the ajax call. Put logging in the renderTemplate function and you'll see this.
I would make the ajax call in your route's setupController method, populating the controller with the results of that call so you can display those results in your view. See the documentation on this method for more info.
In the AJAX callback, you should be populating the controller with the results of that call and have handlebars in the template pointing to the data you want to display. It will load automatically when the Ajax call comes back and populates the controller:
setupController:function(controller){
someObj.AjaxCall(function(data){
controller.set('data',data);
}
}
You can watch controller properties in your watchList template with {{controller.data.property}} or {{{controller.data.htmlProperty}}} to render html.
If this is not helpful enough, post a jsfiddle that illustrates what you're currently doing.

Related

Call cakephp 2 controller function without rendering view (autoRender false not working)

I am trying to submit a hidden form whenever a page is loaded, for which I have created a function in my controller. My problem is that I don't want to leave the current view, but I can not redirect to the view I want to stay in either because that would create a constant loop of loading the page, calling my function when loading has finished and then redirecting again. Therefore, I wanted to call this function without redirecting to the previous view but without rendering a new view either, for which I was using the following:
$this->autoRender = false;
$this->layout = false;
$this->render(false);
Nevertheless, these lines do not seem to be working for me, as the action keeps being redirected to this function trying to render a non existing view instead of staying in the previous one. Due to this, I'd like to know if there is another alternative for being able to call one function in my controller but staying at the page I am at (not by redirecting because of the looping aspect). In case it helps, I am adding the code I have for this action:
This is the part of the view I want to stay rendered where I have the functionality related to the hidden form
<?= $this->Form->create('Save data', array('url'=>'/exportations/save_data/'.$id, 'enctype' => 'multipart/form-data', 'method' => 'post', 'id' => 'data'))?>
<input type="hidden" id="svgGraph" />
<div class="" id="cont" style="display:none;"></div>
<?=$this->Form->end()?>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var chart = Highcharts.chart( // code to create graph
);
var svg = chart.getSVG();
$("#svg1").val(svg1);
});
$(document).ready(function () {
document.getElementById('data').submit();
});
</script>
This is my current controller '/exportations/save_data/' function:
public function save_data(){
$this->autoRender = false;
$this->layout = false;
$this->render(false);
if($this->request->is('post')) {
$data = $this->request->data;
$exportation = $this->Exportation->save($data);
}
return;
}
Currently, with this code, the data s succesfully stored, but the user ends up with an empty view, as the controller tries to render the save_data view.
If there is only 1 (or a few) actions that load this form, you can handle this within the action.
In controller action that renders form initially, check for post and data, do what you need to, then complete the rest of the action and finish rendering the view. You don't have to redirect on post.
This way on save success you can set a request data param, which can be reflected in the view, and if set, the JS doesn't "re-fire" the form.
The AJAX idea from #Greg Schmidt in terms of UX is a better solution, I would choose that over my suggestion any day. I only propose this if you don't want to use AJAX

Ionic: $state.go() changes URL but not the view

I'm totally new to Ionic and JavaScript and I'm having a few problems when changing views in my project.
I've created the project using the tabs starter, and everything works when moving withing the default tabs and even when adding new ones. At certain parts of the code, I need to move to a tab view so I'm using the $state.go() function and it works fine. However, I've added a new view with its template, controller, and state and I need to load it when clicking a button. So I use $state.go() again, but the URL in the explorer changes but not the view, it stays in the previous one. It doesn't work either when I type the URL in the browser, so maybe the problem is in the state definition, but I'm pretty sure it is ok.
State
.state('tab.file_explorer', {
url: '/file_explorer',
views: {
'tab-file_explorer': {
templateUrl: 'templates/tab-file_explorer.html',
controller: 'file_explorerCtrl'
}
}
})
Controller
It is in the controller of another view where the button is located (the button works fine, I've tested it). The file_explorerCtrl controller is empty at the moment.
.controller('load_csvCtrl', function($scope, $state) {
$scope.loadCsv = function(){
$state.go('tab.file_explorer');
}
}
This redirects to the URL http://localhost:8100/#/tab/file_explorer, with no console output or 404 errors. I've also tried using $location.path() and $window.location.assign() but it also fails to load the template.
I'd appreciate any help.
Can you check if your index.html has <ion-nav-view></ion-nav-view> tag
You're using named views. your <ion-nav-view> should match the name:
<ion-nav-view name="tab-file_explorer"></ion-nav-view>
Check the docs here:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Set cache-view="false" in View.
Example:
<ion-view cache-view="false">
<!-- View Content goes here -->
</ion-view>

AngularJS execute code when changing pages that use same controller

I have a PhoneGap app, that has multiple html pages.
I use one controller, called AppController, that loads the data for the startup screen and default pages.
I added a new page to the navigation bar, which, when clicked & opened should load up data from the server with a php call, so it should only make a php call, when the page is shown.
This page uses the same controller as the rest of the app.
I am really new to AngularJS, so I might've programmed it in a bad way, but the rest of the data for the home page is loaded in the appController like this
myApp.controller('AppController', function ($scope, $timeout, sharedProperties) {
$scope.items= {};
$scope.items[item1] = {....} //LOADING UP the items collection
}
How can I hook up an "onload" event or something, that would only fire when the page is shown?
There are so many ways you could do that, one of them:
// inside your controller
angular.element(document).ready(function () {
// your code
});
another one:
<div ng-controller="myCtrl" ng-init="someinitfunc()"></div>
How about using ng-init() directive on your next page ?

EmberJs - Bubble up action from modal

I have a couple of nested routes. In one of them it's possible to open a modal (which is attached to another outlet called modal).
When the user enters the text and clicks Ok, it's sent an action ('valueUpdated') to the MyrouteChildController. However, I also need to bubble this event up to MyrouteController, but it's not working. I tried returning true in the action handler and also manually calling #send.
If I call the MyrouteChildController's action from its own template it works.
http://emberjs.jsbin.com/lotinaw/edit?html,js,output
Any help would be appreciated.
Not only you can inject services in components and controllers in Ember by using Ember.inject.service() but you might also inject controllers and send actions to them using Ember.inject.controller() and then proceed with
export default Ember.Component.extend({
mycontroller: Ember.inject.controller('mycontroller'),
funcUsingControllerToSendAction(args){
let mycontroller = this.get('mycontroller');
mycontroller.send('myaction',args);
}
});
This would allow you to send action with arguments to the other controller context.

How to build a data widget the angular way

I have a widget which comprises of a side bar and the content area. The sidebar has a tree component with several tree items. When a tree item is clicked,it fetches its own data and injects the data into the content div.
I am using ajax get to fetch the data from the server and inserting into the content.
While going through angular,i found this method http which makes http requests to a specified server.
In my data widget,i am using jquery and html5 and no angular.The widget works but i am curious how angular js would have approached the building of the same widget.
What are some concepts from angular js that i could have used to come up with the same widget?.
Here's a real basic concept of how I would create a widget:
The widget would be composed of controller, service, and template:
Controller
handles click events
triggers updates in the UI
Service
makes the actual REST calls to retrieve the data
the tree/tabs on the sidebar of your app would be linked to click events in the controller:
markup
<a ng-click="getContent(tabNumber)">tab label</a>
and here's where you display the tab content:
<div class="content-area">{{ contentArea }}</div>
controller
this function gets executed on click from the view:
...
$scope.getContent = function(tab) {
TabService.getContent(tab)
.then(function(response) {
// update the view
$scope.contentArea = response.data.content;
});
}
service
the service is then called from the controller's function:
app.service('TabService', function($http) {
return {
getContent: function(tab) {
return $http.get(....);
}
}
});
Here's a real basic working example of those pieces:
http://plnkr.co/edit/Tr5OIdwh1QLqOJFfr3xZ?p=preview

Categories

Resources