I have a parent component that contains a table, and a child component that contains a bootstrap modal.
When a row in the table is clicked the modal should pop up with many functions and filtered select-drop-boxes that matches the clicked row.
From my understanding, these three are my options:
A. Opening the modal with a function inside the child component (the modal) via #Viewchild. When closed, another function in the child component should clear the properties and fields in the modal.
pros: The DOM will not have to recreate the child component each time a row is clicked.
cons: If the modal is not needed it will be created unnecessarily. + I have to reset the fields on close.
B. Use *ngIf on the child component (the modal). When a row is clicked, the if statement becomes true and in the ngOnInit the modal will call a method to pop up the modal.
pros: No need to reset the fields, everything will be set in the ngOnInit.
cons: will be created each time a row is clicked.
C. use a message service between the parent and the child that will trigger show/hide on the modal.
cons: a service needs to be built for this.
I would like to understand what is considered a good practice and what's a bad practice in these approaches. Or alternative ways to achieve this. I'm working on a big project and need to do this a lot.
Related
I must adapt to application to wcag focus requirements.
My application works on jsf/primefaces and I have problem with focus on many elements.
For example unexpanded filters contains ui-helper-hidden-accessible class (which is invisible until I click filter to expand) and I cant focus on unexpanded filter name to expand it by keyboard because (I think) ui-helper-hidden-accessible which size is 1x1px receive focus.
I want to span element inside filter div or div with ui-selectcheckboxmenu-trigger class will receive focus instead of unexpanded ui-helper-hidden-accessible.
Do You know how to do it?
Second example is primeface's menuItems - they also not receive focus. The only solution I know is to replace the elements to elements without ui-helper-hidden-accessible class, but unfortunately I can't use this soultion
<nf:author id="filter-selected-authors"
value="#{applicationsBean.dataModel.filter.selectedAuthors}"
converter="#{userConverter}"
completeMethod="#{applicationsBean.usersAutoComplete}"
componentsToUpdate=":datatableForm:applicationTable"
dataTableModel="#{applicationsBean.dataModel}"
oncompleteJs="dynamicScroll()"/>
When I click on a component inside the 5th row, component not hided by 1,2,3 and 4 rows. Only hide the component by rows after 5th one(6,7,8..)
Some flex property affecting in the component style.
Working fine in this state
Data behind the table list
Common problem in that component, already answered that here. I also used calendar in that list and this solution worked for me.
In one of my pages, I am using an example of editable html table from this link: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425, which works without any issues and when I click on a cell in the table, it changes it to text box.
However, I had to change the layout of my page where, I had to place the sample mentioned above within another html table (nested).
Now the problem is when I click on the cell, it does not identify the child table, which has the data and I want to click but it clicks on the cell of the parent table, which in this case is the parent table, and holds 2 different tables.
So, what I want you help with is:
Get a method to identify the cell of the child table when it is clicked
Or
Some way so align two tables on my page to be aligned side by side. Currently I am using the parent table to align my other 2 tables to sit side by side.
if the second option is easier to achieve then, I don't have to change much.
Any suggestions?
If you're using a parent table element to layout elements on your page, just know that this is a deprecated unsemantic practice, as table elements are for tabulating data. You should use the CSS float property, which is the convention, see CSS Floats 101 ยท An A List Apart Article and w3schools.com
Refactoring out that parent table should fix your problem. Otherwise you can fix it through modifying the selector in your JavaScript and by assigning the edittable td elements with a class (eg. edittable-cell) so you're not assigning event listeners to other tables' td elements unnecessarily and causing unwanted behaviour elsewhere.
JavaScript
// Instead of the 'td' selector
$("td").dblclick(function() {
// .. your code here
});
// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
// .. your code here
});
If you are semantically nesting tables of data and/or still have this issue, you can try preventing the event from bubbling up to its parent elements.
JavaScript
$(".edittable-cell").dblclick(function(event) {
event.stopPropagation();
// .. your code here
});
I have been thinking about this for a while but can not think of a good way to do it. But if I am given a select one radio button list is there a good way to grey out all of the non selected radio buttons if and only if there is a value selected?
Its more an general idea than an answer (although it should work)...
look at the generated code of selectonemenu in the show case SelectOneRadio , it creates divs , one div for radio and 1 for the label , you can use jquery selectors for tracking all the divs (radio) that are not selected (got ui-state-default class) and access their labels using jquery next() selector (to access the unselected radio labels) , that way you can access all the needed elements and add lower their opacity to 0.5 (for example)
I guess you can place the js code into a function that will be called by onsuccess of p:ajax that you will add to p:selectOneRadio or in jquery ready function(if you detect that there is a value selected already on page load)
I'd like to conditionally hide a tab in a TabNavigator. It seems that setting visible doesn't work properly (presumably because this is how the TabNavigator hides the tabs that aren't currently selected).
What's the right way to do this?
You can do this by making use of TabNavigator's getTabAt() method which returns the Button that makes up the visual tab. You can then set that Button's visible property. It's a little tricky to get this setup with a bindings, but it's doable.
You could also consider just disabling the tab instead, which you can do by setting enabled on the corresponding TabNavigator child (for which visible didn't work).
What do you mean by hide? If you actually mean remove, then just take your array that's bound to the data in the TabNavigator, and remove the applicable element from it.
If you want to just have them removed temporarily, create a component of your own that encapsulates the TabNavigator and has an array of removed tabs and an array of actual tabs. Then handle this as you see fit.
You might want to check out the flexlib project. They have a component called SuperTabNavigator that adds a lot of functionality to the base Flex TabNavigator, including hiding tabs (I think).
If you do have to create your own component, though, it's a bit more tricky. The thing to know is that "tabs" are actually specially styled buttons, contained within a TabBar component (the TabBar is then contained within the TabNavigator). What you'll have to do then, is subclass TabNavigator and have some property on your views (i.e. the canvases, etc. that are added to the TabNavigator) that is bound to the visible and includeInLayout properties of the TabBar buttons.
In essence, what you'll have is something like:
BindingUtils.bindProperty( tabButton, "visible", view, "someProperty" );
BindingUtils.bindProperty( tabButton, "includeInLayout", view, "someProperty" );
I don't know about TabNavigator, but in other containers, you can set the includeInLayout property to false and it will be ignored. You probably still need to combine it with visible.
var secondTab = tabNavigator.removeChildAt(0);