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.
Related
I have a performance issue when I open ionic 3 Modal.
I need to show a list in the modal and the length of list is 1000.
It takes few seconds to open the modal while they are rendered.
I thought about using InfiniteScroll in the modal, But I use Searchbarwhich means server-side should develop more APIs for that.
Since the data of list is quite static, I would like to make like :
Preload the modal page and hide by default.
Show the modal when it should be opened.
When the modal is closed, DO NOT destroy it, just hide.
But according to the ionic docs, I can't reuse modal.
So my question is : Is there a better way to make searchable 1000 list in ionic3?
Thanks.
EDIT : I have tried with localStorage to save json (about 100kb) and stop using XHR to reduce loading time. However I don't feel loading time gotten faster. I tested with just 100 list instead of 1000 and opening modal was a lot faster.
There are a several options:
If it is actually static, just place it in web storage and retrieve it when the use reloads the page.
If it's "quite" static, whatever that means, just place it in the DOM somewhere so it only has to load once per page load. When the user clicks the link to open the modal, store the data in a hidden field. It might even be a good idea to load it asynchronously as the page is loading, which could potentially completely eliminate any loading times at all from the user's perspective.
Use your own modal, and just hide/show it. Load it async.
Example of cache
jQuery AJAX Example
Ok I made it by using <ion-infinite-scroll (ionInfinite)="doInfinite($event)">.
First of all, when modal is opened, get list data from the server
and save in local storage
In the beginning just show 20 items out of 1000. So the rendering
would be a lot faster.
When user scrolls down, doInfinite will be executed.
In the doInfinite function, check what is the next index in order to show
the data. Like pagination logic. And get proper data and push to
the list array.
About <ion-searchbar>, when you get list data from either server
or local storage, save an original list data for the search (In my case, I just used this.originalData = myData like that.). By doing so, whenever user searches by typing, you can filter from 1000 array but no slow rendering issue.
Ok, so I'm in the process of expanding my knowledge and need a step in the right direction, not necessarily an answer.
I am wanting to create a script for my eCommerce site that lets users choose between grid and list view on product listings pages.
The grid view will be called using an included file called "incgridview.asp" - the list view file is called "inclistview.asp".
Upon the user choosing an option from the drop down specifying which type of view they want, the respective file should be called. So if they select grid view, I need to load the incgridview.asp (list view will be loaded by default).
Once the selection is made, I need it to switch the view without reloading the page, and store a cookie for 7 days that remembers their selection. Of course, they would still have the option to switch back to the other view.
So basically I am switching which file is included upon user selection of the drop down. Im thinking maybe I need to use ajax but not sure. Any help is greatly appreciated. Thanks!
EDIT
Ok, so this is what I am trying to use, on my file that actually includes the grid pages. It is throwing up this error:
Microsoft VBScript runtime error '800a01b6'
Object doesn't support this property or method: '[object]'
/productsviewtest.asp, line 59
Dim listgridcookie
listgridcookie = Response.Cookies("atdviewcookie")("viewoption")
Select Case listgridcookie
Case "list"
print"list view"
Case "grid"
print "grid view"
Case Else
Response.Cookies ("atdviewcookie")("viewoption") = "grid"
Response.Cookies ("atdviewcookie").Expires = DATE + 7
Response.Redirect(Request.RawUrl)
End Select
here is a steps on your page load:
1) Check if cookies exists and what values are there, if it does not exists - create one with default value.
2) Based on value from cookies show div which has been loaded with data from proper include file.
3) When/if selection changes create/re-write cookies with expiration time you desire.
All what you need to build is JavaScript based switch to show one element and hide another.
If you like to use AJAX or JQuery - you can do it this way but for my taste it take away challenges of creating something you can be proud of.
This is based on your " page must not be reloaded upon changing selection" statement.
I want to enable a pair of cascading dropdown lists within a form in an ASP.NET MVC3 / Razor2 application. Ideally the solution will meet the following goals:
Child list populated simply by changing the selection of the parent list
Both dropdown lists contained within the form as they need to post information on submit
Uses Ajax to avoid whole page round-trip
Uses Ajax Html helper for easy integration
Works even if javascript is not enabled
So, from a user point of view, when an item in the parent dropdown is selected, the contents of the child dropdown is refreshed to display items related to it.
Can anyone please suggest the best way to do this?
EDIT.
No takers ... suggests to me that there may be conflicting requirements in the above list of goals. The closest I got to the above was this article, which met all the goals except that it doesn't work nested within an Html form.
So, I will restate the problem in a different way: how can I make an AJAX call from a dropdown list within an Html form so that I can populated another dropdown list with related items?
Took some time to find a reasonable solution to this, although so far I still don't have a no-jquery fallback. This article shows you how to use AjaxHelper extensions to create your own Ajax-enabled controls. Works a treat, and very reusable.
I'm trying to make something like this:
an html form with 5 button (each one with a differn value). if you click one of this button will be dispayed an text input (with a default value depending to the clicked button value, so the buttons call an ajax/javscript function to generate the default value) and a submit button.
I'm unable to create this type of form. have any suggestion for me ? Thx in advance.
I wouldn't use CakePHP's AJAX features, just write it yourself. Cake's features are useful in limited situations (e.g. pagination) but as soon as you need flexibility, it becomes a limiting factor. I believe the JsHelper is actually being removed in future versions.
To get this done without Cake, take a look at http://jsfiddle.net/mjxWg/8/. It's not a complete working example (e.g. there is no <form> tag), but it should show you enough to get started on your own.
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.