In my Ember app, I initially start at the root level (/) and I have multiple links (say Link1, Link2, Link3)
Now each of these links displays a common grid i.e. I use same route/controller/template JS, but re-render the grid, by setting some attributes dynamically on the controller
Thus in my application.js, I do
this.controllerFor('my-grid').set('attr1', params[0].value);
this.controllerFor('my-grid').set('attr2', params[1].value);
this.transitionTo('my-grid');
Is this the correct way to transition ?
I mean, specifically I need
this.transitionTo('my-grid');
to be called only once (say on click of link1 from root), since after then, clicks on link2, link3 would just need a change of attribute values on my same controller and should just re-render the grid (after server api call)
Please suggest if there is some condition that I can check for calling
this.transitionTo('my-grid');
In your application you can check ApplicationController.currentPath:
this.controllerFor('my-grid').setProperties({
attr1: params[0].value,
attr2: params[1].value
});
if (this.controllerFor('application').get('currentPath') !== 'my-grid') {
this.transitionTo('my-grid');
}
Related
I have home page that lists items, but also when I add an item I want to popToRoot(), to home page. Now, If I come to root from addItemPage, I want to show the button to save a list, to make a HTTP call..
Is it possible, I was thinking about passing the for example (fromAdd: true) to navCtrl and then based on that show the button(ngIf) ?
You can use any of the rootscope variables, navparams and service to set the value on the parent page and then access it in your ng-init function declared on you child page and show your button on the basis of that value by using ngIf expression.
Using UI-Router v1.0rc1, is it possible to transition to the current state, changing only one param, without reloading the state. Let me give you my use case:
On the left of the page I show the listings titles of a user. When clicking on a title the main content is changed to... the listing data obviously. When clicking on another title, the current 'listing' state is reloaded and fed with other data. In my listing template, I have a map. Each time a new listing must be displayed, the dom is destroyed and reloaded (with the same template) which kills the map and rebuilds it. I would prefer to only change the params (the listing id) of the listing state, detect it and change the content of the template (and reposition the map). The actual listing data is currently loaded in the resolves thanks to the id param.
Is it something feasible?
Try this:
$state.go('some.state', { param: 'x' }, {reload: false});
more about reload can be found here
I have a template where recipes are rendering through {{#each recipes}} and I'm using ReactiveVar to toggle the edit form of each recipe from hide to show. Everything works fine, but I want that when I press edit button in one recipe then all other recipe forms, which were opened before, will set to hide
Template.Recipe.onCreated(function(){
this.editMode = new ReactiveVar(false);
});
Template.Recipe.helpers({
editMode: function() {
return Template.instance().editMode.get();
}
});
Template.Recipe.events({
'click .fa-pencil': function(event, template) {
//Right here I guess should be something that switches all "editMode" to false
template.editMode.set(!template.editMode.get());
},
});
I think you need a different approach
a Session variable which has the Id of the current editing recipe and then helper on the template to see if the current recipe is the one being edited
add a property to the recipe whether its being edited or not, then update the collection when you change which one is edited
A common object with a reactive var, and much the same technique as the Session variable. If you have a parent template, then it could live there (this is probably the nicest option)
In order to achieve this functionality, you should think about how your templates communicate. One template shouldn't be able to set the state for it's siblings, which means you are thinking it wrong.
You should store that state somewhere global so all templates can see and react to it. That option would mean using Session (as Keith mentioned) or a route parameter (better option, in my opinion).
Another option is to use the parent to store that data, using events to communicate between parent and children. A child template can send and event to the parent who direct another event to each other child.
Hi I want to hide an adf component automatically.I have a selectOneChoice that contain some number (from 1 to 12).
Example when I select 2, it show's two field automatically without clicking any button..
i used this function to hide a declared componenet but just when i click a button..
function enableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("soc1");
nameInputText.setProperty("visible", true);
actionEvent.cancel();
}
i set the componement "soc1" visible = true than through the javascript function i change it..
SO the probleme here is how to read the number from the selectonechoise and how to set the component visible directly without clicking any button.
Actually Rendered won't do what you want. You want to use Visible property instead. Rendered causes the actual markup for the component not to be rendered on the page, so a Partial Refresh will not cause it to appear. Rendered is reserved, usually, to hide items that are secure. We set rendered property to false on the item(s), but then refresh the parent containing component - usually a layout manager - then it works. So either refresh the layout manager that contains the item or use Visible. I demonstrated this exact use case last week in class and it works as described.
Basicaly, you don't need javascript solution or any programming to achieve this.
You should set attributes rendered(this way component won't be rendered at the page at all) and partialTriggers that points to selectOneChoice component for components you want to show or hide. Also you have to set autoSubmit="true" for your selectOneChoice component.
<af:selectOneChoice id="soc1" autoSubmit="true" .../>
<af:panelGroupLayout id="plg1" partialTriggers="soc1">
<af:outputText id="ot1" rendered="#{bindings.lov.inputValue le 1}" inputValue="text1"/>
</af:panelGroupLayout>
Note: its not working code, just a sample
It will work following way, on valueChange event at selectOneChoice component value is submitted and partialRefresh fires for components that have it in partialTriggers specified. And rendered attribute will either render or remove component depending on it's EL expression. Components that should be managed wrapped into another component to make sure PPR reach it when they ain't rendered.
i have my main page and also two partial views. One partial view is a menu and the other is a telerik grid.
What i want to achieve is selecting a row in the grid and when i click a button in the menu i want the page to navigate to that action passing the selected row (id).
i want to refresh the entire page and not only the div with the grid.
I tried using document.location = "/Pedido/DetalhePedido/" + id; but i don't receive the id n the controller.
I also tried using $.get('#Url.Action("detalhePedido", "Pedido")', data, function (result) { }); usually i use this to refresh a div and i can't seem to make this work with the entire page (and it probably shouldn't ).
Wich methods do you usually use in your web apps to reproduce this sort of behaviour?
Because clicking on the row happens on the browser, you can't depend on anything from the controller or model unless it's already somewhere in your original model. I implement this by adding a hidden Id column to the grid and model it uses for rendering, then add client events and handlers to the grid and view. Check out the samples provided for the Grid under Client-Side Events for some of the different client events you can take advantage of.
On your grid, first add the Id column (hidden if you like):
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden(true);
}
Then add ClientEvents and wire up onRowSelect like so:
.ClientEvents(events =>
{
events.OnRowSelect("onRowSelected");
}
Then add a function to handle this event like so:
function onRowSelected(e) {
var id = e.row.cells[0].innerHTML;
window.location = "Something/Details/" + id;
}
UPDATE
Sounds like you are doing everything right on the client. The problem is likely elsewhere, in your Action or Bindings. But to be certain, take a look at what /Pedido/DetalhePedido/" + id actually is with an alert before venturing down that path. You should be able to take that and enter it directly into the url of your browser and hit your action as long as your action is correctly defined, accepting an int called id.
If its still a problem, you need to look at you action. Is it marked for Post? If it is Window.Location wont work because it's not a post. Is the argument it accepts named Id and of type int? If not, should it be? Have you changed your Routes, and if so does your Url match any routes defined?