I have a potentially long repeating list with lots of data associated with each reapeated list element. There is also a hidden panel that contains more data and interactive tools that can be used on each repeated element (comments, tags, etc.).
My question is: Is it more efficient to include a duplicate of this panel within each ng-repeat, already filled with the appropriate data, or have one panel outside of the ng-repeat scope, who's data get's fill after clicking the 'panel toggle' button?
Extra details: This is a responsive site, with an emphasis on mobile use, so we are trying to minimize data sent, and make the amount of Javascript short and sweet (so far it hasn't been a problem at all).
After typing it out, I think the best option would be to have one tools panel, and populate it depending on which 'panel toggle' button is clicked. Fewer DOM elements the better, right?
It also leave it open for lazy-loading of the extra details in the future.
Related
For example when implementing these collapsible items:
First approach that comes to my mind is to store a variable in the model expandedItems: List ItemId
to verify if an item is expanded you check if its id is in the list
to expand an item you add its id to the list
to collapse an item you remove its id from the list
There also are css-only solutions like this one https://jsfiddle.net/5hcwzf7s/2/
What would the advantages / disadvantages of css-only over the id list be?
I think storing the list in the model is common, easy to understand, and the usual way to do things like these.
I find a few downsides to the css solution:
is hard to read and understand
is fragile and hard to maintain
might not work on all browsers
uses href which makes the item id show up in the url when you click to expand
treats expanding as a url change, and when the user clicks back it unexpands the item instead of navigating to the previous page
only allows one item to be expanded at a time
On the other hand, I find no downsides to the expandedItems list approach. Performance might be a concern because we're operating on a list, but the user will have to be expanding thousands of items to make the list long enough to notice any difference. I don't think is polluting the model either, this kind of information is what the model should hold.
I think you want to put this all in your model. The css approach is perhaps a nice trick, but is not very scalable.
In particular you would end up putting state in the css file, and part of it even twice. Keep it all in your model, put the full content into the screen, and then just attach a class when contracted, which sets a max height and truncates the rest with elipsis
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
I have 2 dropdown in a view. First drop down is automatically populated when the view get's loaded with the list of options. when an item is selected I would like to populate the dropdown # 2.
What's the best way of doing this?
A couple ways of doing this. You can either do an AJAX call (responding to the selection of a value in dropdown #1). The downside to this is that it requires a round-trip call to the server, then updating the value of dropdown #2 with the result.
The other way is to pre-load all possible values for dropdown #2 when the page first loads, and just change it in the browser with JavaScript as soon as the value is changed (rather than making a call all the way back to the server to get the values).
Either way, you're modifying the DOM, most likely, so it'll be some kind of JavaScript solution. Whether you choose AJAX, or preload and change it immediately will probably depend on how it affects the original page load speed, how much data you want to load onto the client, etc. If it's a relatively small number of options possible in dropdown #2, then pre-loading might be your best bet.
Can we use an alternate function other than group to perform the same action. The scenario I am trying to workout using group is - I have multiple pages in a form and a summary button on the first page which on being clicked should show the summary of all pages.
The logic we tried was using group to club each individual pages by having a form variable which turns true when the summary button is clicked and we check this variables value in all pages and so when the summary button is clicked this condition satisfies and all the pages are displayed.
The Code Snippet
<Xforms:group id="page-1"
ref=".[instance('form')/current-page = '1'
or
instance('form')/summary = 'true']">
Using group fn drastically depreciates the performance. Is there any method to perform the same scenario. Kindly advise.
At this point, hidden groups and hidden cases work differently:
The controls in hidden groups are non-relevant.
The controls in hidden cases are relevant.
As a result, using a switch/case, the server has to do more work to maintain and update the state of controls in hidden cases, but switching to a another case is very fast: it is pretty much just a matter of changing a class in the HTML, as the values of all the controls are already there. With hidden groups, when "switching to another group", the values for the controls in that group are sent by the server to the browser. Updating the values can take a little bit of time, especially if you have a lot of controls, say in a repeat.
It is hard to give a recommendation without really running your code, but if the time taken to do a switch is mostly spent on the browser, you could investigate using the full update mechanism. If the time is mostly spent on the server, then I'd look into XPath analysis. (Note that both features are PE-only.)
I have a tree representation of pages in a CMS application. I understand how to persist the tree in the database. However, I don't have a good way to:
A) Reorder subpages under a particular parent page.
B) Provide a UI implementation that allows the user to change the order.
Any suggestions?
Changing the order itself will require you store some sort of ordering along with each page in the database. Just the current highest / lowest value +/- 1 would probably be a fine starting point. Once you've got that ordering in there, reordering becomes a case of swapping two values or changing the value for one page to be between two others (you could use floats I guess, but you may need to renumber if you split it too many times).
Anyway, once you've got that, you need a UI. I've seen a very simple 'swap this with the one above/below' approach which can be a simple web link or an AJAX call. You could also present all the page values to the user and ask them to renumber them as they see fit. If you want to get fancy, JavaScript drag and drop might be a good approach. I've used ExtJS and Mootools as frameworks in this kind of area. If you don't need all the Extjs widgets, I'd say well away from it in future, and look at something like the Mootools Dynamic Sortables demo.
A) I have a similar CMS app and I store an ordinal value with the page for a particular tree and sort on this value -- because lots of my pages appear in completely different sites I have to maintain the ordinal number against a page / tree combination.
B) I too would like a better way to do this. Currently they click on the node in the treeview and in the main page screen they can move the page around. I've tried drag and drop with java script and other solutions but my users could never work with it without lots of hand holding. I'll be interested in the responses to this one.