I use Select2 as an auto suggest. That means, I fetch options from a remote source via ajax. This works perfectly.
Now, the customer wants to have all options loaded before he starts typing. That kind of defeats the purpose of an auto suggest, but if he wants it that way, he shall have it.
Anyways, I would need to display the first 50 or 100 elements before the user starts typing and after the third typed character the Select2 input should fetch the options again.
I tried prepopulating the select with option values (for example "aa","bb" and "cc"), but it only displays the placeholder. Is it possible to send a request as soon as the user clicks on the select? That would be a possibility too, since the remote source could send back the first 50 results. If anyone could steer me in the right direction, I would be thankful :)
A quick workaround if anyone will have the same issue:
set the "minimumInputLength" to 0. This way a request will be sent as soon as the user opens the Select2 input element. The search parameter will of course be an empty string.
in the "processResults" function add a logic to allow pagination. The returned object needs a "pagination" property with a boolean member called "loadMore". You can read more about that here: https://stackoverflow.com/a/29022107/430997
This way you just enabled infinite scrolling. Of course you need support for paginated results on the serverside too.
Optionally you can fetch sources from different locations. The "url" parameter of the ajax option can be a function. If you want to call different endpoints based on the number of characters (mostly to check, if the number of characters is 0), you can check for it inside the url function and return the appropriate endpoint.
This is just a workaround and only simulates initial values. If anyone has a real answer to my question, please post it :)
Related
On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.
When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.
We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".
We added a web config cache setting:
<caching>
<outputCacheSettings>
<outputCacheProfiles>
<add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" />
</outputCacheProfiles>
</outputCacheSettings>
</caching>
and added the attribute to the controller action
[OutputCache(CacheProfile = "CacheProfileNone")]
public ActionResult Index(QueryViewModel model)
{...}
but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.
We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.
Any suggestions are welcome! Thanks!
I'm guessing (because you provided no code), but this doesn't work the way you think:
From javascript we pushes the form filter values to the url to
maintain the browser history.
You need to investigate the History API replaceState() method.
Reference here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
Have been working on a smaller project with php here and got lost. I'll explain in two parts.
Part 1: I have index.php and a getitem.php. Index contains a form with multiple select objects with no options (at start) with the exception of one. After selecting an item from the one with options available I make a query via getitem.php&[parameters_here]. The php then echoes options with values and texts.
This form then guides you to fill every field this way. These options are added on the go with object.innerhtml. Everything fine.
The problem kicks in when you hit the refresh button. Select items lose their options (with the exception of the one). How to keep these settings on refresh? Keeping them in a _SESSION? Checking the session for every single select item seems too brute force.
Part 2: Would fixing this help me out with a library like this; to see the dynamic options with images? I believe these two parts are connected.
Thanks.
About Part 1:
The key point is refreshing the page. First let us consider the case what is happening now - you are probably keeping the options selected using $_POST. After the selection and reloading is done it shows the response of POST action [as your data is being posted into the same page - guessing from your scenario]. Now when somebody reloads the browser the POST request becomes empty. So all the selections are lost.
There can be lots of ways/tricks for this.
$_SESSION can be one of them / $_COOKIE can be one of them / through some JS you can use browser local storage, etc.
The main concept will be the fact to keep the values somewhere where a browser refresh doesn't effect. So though $_SESSION seems brut force to you -- it is a logical option.
About Part 2:
I think these two parts are not connected. As long as you are using regular select options for showing your options - they are not connected -- as your part two deals with styling your option values not how the work.
I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.
I'm a student stuyding the bioinformatics.
I'm trying to make a crawler where I can put the lists of queries and get the results automatically.
The site I'm interested in is the GEO DataSet site.
www.ncbi.nlm.nih.gov/gds/
If I wish to send a query like 'lung cancer', I can use the following address.
http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer.
And there are 549 pages showing up.
I can get the results of the first page, but I don't know how to move to the next page.
I mean, how can I move to the next page by changing the URL?
The Next button is linked as "www.ncbi.nlm.nih.gov/gds/?term=lung+cancer#" and I don't think it's the actual URL that button is linked to.
I'm new to the JavaScript, but I heard the hash sign (#) is processed in the JavaScript
I wonder if there is something I can do like
"http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer&page=2"
so that I can move to the second page.
If you use any debugger tool (Firebug for Firefox, WebDeveloper for Chrome) you should be able to monitor the network traffic. If you do that, you'll see, that by clicking the next button a form is submitted, sending data via post method. However, when concatenating the post data to a get string you can also get to the next page. The following url lets you access to second page of the result set (warning: really, really long!):
http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer?term=lung+cancer&EntrezSystem2.PEntrez.Gds.Entrez_PageController.PreviousPageName=results&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPresentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sSort=none&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FFormat=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FileFormat=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastPresentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Presentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.PageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastPageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Sort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FileSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Format=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastFormat=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.cPage=1&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.CurrPage=2&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_ResultsController.ResultCount=10973&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_ResultsController.RunLastQuery=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.cPage=1&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPresentation2=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPageSize2=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sSort2=none&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FFormat2=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FSort2=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Filters.CurrFilter=all&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Filters.LastFilter=all&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.Taxport.TxView=list&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.Taxport.TxListSize=5&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.RelatedDataLinks.rdDatabase=rddbto&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.RelatedDataLinks.DbName=gds&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Discovery_SearchDetails.SearchDetailsTerm=%22lung+neoplasms%22%5BMeSH+Terms%5D+OR+lung+cancer%5BAll+Fields%5D&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.HistoryDisplay.Cmd=PageChanged&EntrezSystem2.PEntrez.DbConnector.Db=gds&EntrezSystem2.PEntrez.DbConnector.LastDb=gds&EntrezSystem2.PEntrez.DbConnector.Term=lung+cancer&EntrezSystem2.PEntrez.DbConnector.LastTabCmd=&EntrezSystem2.PEntrez.DbConnector.LastQueryKey=1&EntrezSystem2.PEntrez.DbConnector.IdsFromResult=&EntrezSystem2.PEntrez.DbConnector.LastIdsFromResult=&EntrezSystem2.PEntrez.DbConnector.LinkName=&EntrezSystem2.PEntrez.DbConnector.LinkReadableName=&EntrezSystem2.PEntrez.DbConnector.LinkSrcDb=&EntrezSystem2.PEntrez.DbConnector.Cmd=PageChanged&EntrezSystem2.PEntrez.DbConnector.TabCmd=&EntrezSystem2.PEntrez.DbConnector.QueryKey=&p%24a=EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.Page&p%24l=EntrezSystem2&p%24st=gds
This complete GET string contains all search parameters like items per page, search terms, display and way more. You should be able to figure out which parameter is used for the offset (cPage and CurrPage are your friends) and then alter it to your needs.
EDIT: Btw, to find javascript events bound to an HTML element, you can use the bookmarklet found at http://www.sprymedia.co.uk/article/Visual+Event+2
I'm trying to get a value from combobox inside a formPanel to pass it to a protocol url (of openlayers.protocol.http). This is the url, based on http://jsbin.com/ireqed/2/edit, that I want to get (in the case I'd choose "cars" in the combobox and enter "cool" in textfield):
http://www.mop.org/fs/cars?format=GeoJSON&comments__ilike=cool&queryable=comments
after testing, I finally can get the URL I want after choosing one value in combobox and entering a word in textfield (as above).
To send this new URL in the protocol in formPanel, I use an autoLoad call in the handler function of my search button, I think this is sending the url but it's not catched by the protocol itself (ie. XMLHttpRequest.js) but for ExtJS. So, the GeoJSON output is displayed in the formPanel. I attached three PNGs to show this: , , .
In firebug, once 'search' button is pressed two URLs are called, the first one is the URL I want to replace in the url of the protocol, but it goes to ext-base.js, which is the wrong place. The second one, I actually don't know why is sent, goes to XMLHttpRequest.js which is the right place, but it shouldn't be sent.
So, before the url must be sent in the first place, I need to change it, how could I do it? btw it seems to me it is replacing an inexistent url which belongs to ExtJS, pls help, thanks
UPDATE #1:
getting closer... because adding OpenLayers.loadURL(myurl, {}, null, function(response){}); in the handler function sents the url to XMLHttpRequest.js (right place), but just immediately another url (from the formpanel) is sent to the same place and this covers the right one, is there a way to add some timing to the openlayers.loadurl function? I understand this function works asynchronously (that's why is faster and gets submitted first than the second one), is there a way to just overwrite the second one?
The solution was to take the protocol outside the formPanel and use only "protocol.options.url = newUrl;", a complete explanation is here