Select2 loading more data on scroll end - jquery-select2

Does anyone know how can I achieve following:
I need select2 dropdown which would appear 50 records. On reaching bottom scroll it would load another 50 etc...
On their site i found http://ivaynberg.github.io/select2/#infinite but this involve "search", so I have to type at least 3 chars to search db using ajax... I dont need that, I need 50 records loaded immediatelly on load and visible inside select2 and rest per scrolling...
Does anyone know if this can be achieved with select2 and how (to post me example)... If not is there any another plugin which could allow me this?
Thanks!

Set property minimumInputLength:0 so it fetches the first records immediately, not after 3 characters.

Related

How do I get Grails g:select with multiple-selection with all selections when returning from the controller

I have a page that is a report from a database and I'm working on modifying how the filtering works. The intention is to allow the user to select possible values form a list that will be used to filter the resulting report. There are too many values to do this with checkboxes. I'm defining a multiple selection list box with this:
<g:select name="country" from="${countryDataList.KOUNTRY}" value="${params.country}" multiple="true" />
countryDataList is a List<> of objects with a name and a value which I create in the controller. I'm able to get the selected counties and process them without an issue.
But when the page returns from the controller with the filtered report, only the first selection in the list is selected. It doesn't re-select all of the items that the user selected. I am passing the params.country object back from the controller as
country:params.country
I saw some posts about this not working, but they are all from several years ago. Am I missing a vital step?
Ahh sorry, I was reading it on the phone initially and missed the point.
So what you want is a way of sending a multiple select box to a confirmation page. If I understand correctly?
Anyways how many objects in the select are we talking massive or a dozen couple of dozen or so ?
What I did was use check boxes and did a confirmation which shows the selection ticked in check boxes.. So this is the confirmation page that loads in https://github.com/vahidhedayati/mailinglist/blob/master/grails-app/views/mailingListEmail/confirmcontact.gsp
this page which is where multiple attachments selected from the schedule re-appear...
https://github.com/vahidhedayati/mailinglist/blob/master/grails-app/views/mailingListAttachments/_mailerAttachmentsDisplay.gsp.
Please note advice below is all conceptual stuff and there may be easier ways than this
Other than that You could create a taglib call on the confirmation page https://github.com/vahidhedayati/ajaxdependancyselection/blob/master/grails-app/taglib/ajaxdependancyselection/AutoCompleteTagLib.groovy#L55 which takes in your arrayList you could probably convert it to JSON pass it into the javascript that you load in within the taglib (on mine further down it loads this page in)
https://github.com/vahidhedayati/ajaxdependancyselection/blob/master/grails-app/views/autoComplete/_selectJs1.gsp#L23
and look to reselect them using javascript... as I say I haven't tested the last bit, the first bit i.e. checkbox works it is/has been in use.
Years later from you I just had the same problem. What I figured out is: it happens when params.country is an array instead of a Collection (i.e. an ArrayList).
A workaround for this if you want to stick to the array type is at the value attribute of the tag doing this: params.country?.findAll().

How to set an initial value for my object in ruby on rails

I am still pretty new to Rails and am working on a basic app and have run into a problem, which I can't seem to get around, sorry if this question has already been answered, but searching didn't yield me any results.
Basically I am creating an app that catalogues all of someones's clothes, Now the main page is the index page of everything they have logged, and each picture is linked to the show page where more information is revealed. I want to use AJAX to bring that show page to the side of the main index page. I am working off of another tutorial to figure this out but have run into a problem. On the initial load of my index page, I need to define a variable for that show page so that it can be rendered using a partial, but I can't use find(params[:id]) since the user hasn't selected anything yet. So my question is how do I set that initial value to either just the first item in the catalogue or not have anything appear, and then when someone does click the link, the sidebar shows the more detailed description of the piece of clothing.
Thanks for any help.
#object = params[:id] ? MyModel.find(params[:id]) : MyModel.first
But I think there's some problem with design of application.
You might have some luck working with the ruby gem 'PJAX'. Here is a screen cast showing you how to get that AJAX sidebar you want. Good luck
It sounds like you can just print the container element as normal, but leave it empty when the page is generated. Optionally, hide it via CSS. Then, when you load its content with AJAX, set it to visible or just populate it as normal.
Alternatively, if you really want to set it to the first item in the catalog (or in any ActiveRecord) you can use .first e.g. Products.first, and use that value to populate its initial contents.

Firefox 4 doesn't render partial pages

I have an ASP.NET MVC page which contains a table, where every row takes some time to load. So I'm calling Response.Flush() after every row is rendered.
IE9 behaves the way it should: displays rows one by one. FF4 on the other hand, displays the page only when it finished loading completely, even though I can see in FireBug's Network tab that the rows are being received one by one.
Is there something I could be doing wrong on the server-side? If not, is there something I can do to my Firefox, so that it displays the page the way I want?
I would try using AJAX to fill the table. Maybe a row per call, maybe whole set at once.
Consider closing your document with </html> and add the extra rows in script; <script> tags may (in practice) follow </html>. Not a real AJAX solution, not strictly correct, but potentially a lot easier on your serverside.
A similar, but more correct solution would be to insert the script just before the </body>.
See also When does reflow happen in a DOM environment?

What is a good way to implement a data report grid on my MVC3 page

Before I start work I would like to get some ideas. What I have is an MVC3 page that I currently use to display rows of data. There are many rows so I would like to filter them. Ideally at the top of my page I would like to have a select drop down box and a refresh button with rows of data appearing below when the refresh button is clicked.
I can imagine doing this with Ajax and then having the data from my controller populate new HTML text between a DIV.
Does this sound like the best approach? I am not looking for a person to write code for me. Just want to be sure my solution sounds like a good way to go.
thank you
i recommend this approach:
http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx
You can 'enchance' it with AJAX of course, but do not forget about users with disabled javascript. Make it work without client scripting, then enchance it, when its working.
I also think that you can simply create controller action, that is accepting parameters like pageNumber and amountOfItems. Then in your controls at page, you can just change values (number of page etc..) and use them in call for your controller action at form submit.

Struts2 & jquery - custom pagination - how to go to page2 without hitting the db again

thanks in advance for any input. I am using struts2 and jquery in this app.
I tried to use displaytag for pagination but my tables have images and there wasn't a way I could make displaytag work with images.
So now I have custom coded pagination which uses <s:subset> which works great so far except that I don't know how to make it go to another page.
Basically in <s:subset> I just want to change the start attribute and then refresh my JSP. My code evaluates the start attribute correctly with a given page number.
My s:subset tag is like below,
<s:subset source="pageableList.pagedList" count="pageableList.pageSize" start="pageableList.start" >
<s:iterator>
I think I want to use <s:url> to display my clickable page numbers but I'm having trouble there.
I have my page numbers in a list (which I evaluate in my action class right after my search completes), then in my JSP where I need to display the clickable page numbers, I iterate through the list, displaying the page numbers like below -
<s:iterator value="pageNumList" > | <a href='#'> <s:property/> </a> </s:iterator>
I guess I need to pass the clicked value of page number to the action class, then since the search results are in a list in the action class, without hitting the database again just display the results page with the new value of start attribute.
Any ideas how I might do that? I have been considering using a Decider attribute with <s:subset> but maybe there is a simpler way?
Thanks again for any input.
Regards,
veeCan
If you do not want to hit your DB again, cache the results of the initial query in RAM in your Action class (reference a static cache somewhere). Also, you don't have to go with a cache-all-or-nothing approach -- you can cache the first N pages and then when you near the end of the cache, fetch the rest. If you do it right, you can maintain minimum RAM footprint but preserve a snappy user experience that leverages user think time (depends on your app).

Resources