How to do pagination in select box based on scroll - html

HTML
<select class="form-control choice requiredField" id-available name="SelectData" ng-model="box.box_id" title="Select">
<option value="" disabled selected>{{'_SELECT_BEACON_' | i18n}}</option>
<option value="{{y.box_id}}" ng-repeat="y in dataList" class="nms">{{y.beacon_code}}</option>
</select>
ANGULARJS
boxService.listUnassignedDevice(function(res) {
$scope.dataList = res;
}, function(error) {
});
Here I have large data in "dataList"(10000>). So I need to list data in select box after mouse scroll down. First I have to show 100 data, when mouse scroll down, I need to show next 100 data from API.

you can use ngInfiniteScroll directive and add script tag then add module 'infinite-scroll'and then Use the directive by specifying an infinite-scroll attribute on an element.
<div infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"></div>
ngInfiniteScroll will call myPagingFunction() any time the bottom of
the element approaches the bottom of the browser window. See the API
documentation for more information about what attributes are available
for use, and take a look at the demos to see ngInfiniteScroll in
action.

Related

Extend div outside bounds of iFrame?

Is it possible to extend content beyond the bounds of an iframe?
In my case, I was formerly rendering a native <select> control inside of an iframe. As a native control, when it rendered, the dropdown was able to occupy space outside of the iframe. I recently converted the dropdown to use select2, which rebuilds the dropdown using various <span> elements.
The problem is now it gets cutoff within the <iframe>:
I've tried setting the overflow to visible, but that doesn't work:
iframe {
overflow: visible
}
Here's a Test Case on Plunker
JavaScript:
$("#OpenSelect2").click(function(){
OpenPagePopup("select2.html", "Select 2", 150, 400);
});
//Open Diagnosis Control for editting
function OpenPagePopup(location, title, ht, wt) {
$('<div>')
.append($('<iframe/>', {
'class': "fullFrame",
'src': location
}))
.dialog({
autoOpen: true,
modal: true,
height: ht,
width: wt,
title: title
});
}
index.html:
<button id="OpenSelect2">Open Modal with Select2</button>
select2.html:
<select class="select2">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
<script >
$('.select2').select2();
</script>
Possible Workaround:
DON'T USE IFRAMES! Yeah, I know, I know, but this is the situation I find myself maintaining.
No. There is no way to extend content outside of an iframe. Think of it as another browser window entirely.
The reason that the options will extend below the iframe is that form elements follow their own rules. They differ from browser to browser, and for some of the elements you can't change the styling. When you use select2 it turns the form into a regular element (not a default form element), so you can manipulate the style. Unfortunately, this also makes it confine to the iframe.
Consider that a browser can also do this (but it doesn't mean you can):
Being that the short answer is no, it's worth pointing out that it's not always necessary to load external content via an iframe. If, for example, you're working in PHP, you can simply call file_get_contents($filename) to simply plonk the desired content onto the current page.
This will clearly be limited to relatively straightforward HTML, but it certainly has its uses.

Chrome bug on select element dropdown when many options are hidden

I'm looking for a workaround for a rendering bug in Chrome. It shows up when a select element has about 90%+ hidden option elements. In Chrome, the dropdown height becomes too short to use. This does not appear to happen on other browsers. View example on jsFiddle.
HTML Example
Note: Some options were removed to keep the code brief.
The bug does not show up unless all options are present.
100 Options, 90% Hidden:<br>
<select>
<option value="">Select an Option</option>
<option value="0" style="display: none">Option 0</option>
<option value="1" style="display: none">Option 1</option>
<option value="2" style="display: none">Option 2</option>
<option value="3" style="display: none">Option 3</option>
<!-- Options removed for brevity. -->
<option value="86" style="display: none">Option 86</option>
<option value="87" style="display: none">Option 87</option>
<option value="88" style="display: none">Option 88</option>
<option value="89" style="display: none">Option 89</option>
<option value="90">Option 90</option>
<option value="91">Option 91</option>
<option value="92">Option 92</option>
<option value="93">Option 93</option>
<option value="94">Option 94</option>
<option value="95">Option 95</option>
<option value="96">Option 96</option>
<option value="97">Option 97</option>
<option value="98">Option 98</option>
<option value="99">Option 99</option>
</select>
Browsers Tested:
Chrome 27 & 28 (Fail)
Firefox 21 (Pass)
IE 9 (Pass)
Opera 12 (Pass)
Safari 5.1 (Pass)
View Example on jsFiddle
Alternate Example Link
Update: I did some reading on the subject, and apparently options are not supposed to be hidden within a select. You can disable options, but they will not disappear. If you don't want an option to be in the select at all, you're supposed to remove the node entirely. The ability to hide options doesn't appear to work completely cross-browser, and in most you can continue to select the "hidden" options by using the arrow keys. I need to toggle options on and off, which makes this inconvenient to my particular situation, but this appears to be the only method that will work thus far.
Adding this might be considered a workaround:
$(document).ready(function () {
$('#ph2').mouseenter(function () {
var html = '';
$(this).find('option').each(function () {
if ($(this).css('display') !== 'none') {
html = html + '<option>' + $(this).text() + '</option>';
}
});
$(this).html(html);
})
});
Here's the jsFiddle; I'm using jquery just for simplicity. In this case, I'm just redoing the HTML on mouseenter. It's not ideal but it could get you going further. Also, note that you have ph2 set up as a div in your HTML; I think you should set it as a select element from the start and on the fiddle you can see the change I made to the html. But overall, until the bug is fixed, I think something like this is going to be as close as you'll get to having a working option.
The problem is already active on all major browser (Edge, Chrome, Opera,....) but Firefox.
The problem arises as soon as the number of hidden items is greater than 1000.
Be careful, because with just 100 items, all browser seem to work
The problem also disappears if the active items (not hidden, not disabled) are at the top of the list.
More exactly, when you click on the "select" input field, the browser open a list with a number of rows that is equal to the number of active items included in the first 1000 item.
For example, if you build a list of items with first x items active, then y items "inactive" (where y if greater than 1000) and then again z items active, you will see a list wide x rows with x+z items.
By the way, a workaround to the problem could be the sorting of the items list
This behaviour has been verified on Chrome, Opera, Edge
As a workaround for this bug I can propose the following solution:
To hide an option 'convert' it to some other tag and hide it with .hide().
To show an option 'convert' it back to option and show it with .show().
For 'conversion' we need something like this: https://stackoverflow.com/a/9468280.
Example:
// some `replaceTagName` implementation here
// hiding options
$('.option-selector').replaceTagName('span').hide();
// showing options
$('.option-selector').replaceTagName('option').show();
A bit heavy but working :)
I had this problem and this is what I did:
var originalSelect = $("#the_select").clone();
function hideSomeOptions(){
$('#the_select .hide_me').remove();
}
function restoreAllOptions(){
$("#the_select").replaceWith(originalSelect[0]);
}
The target select input has the ID "the_select" and the options or optgroups that need to be toggled have the "hide_me" class.
I found that the order of the hidden/visible options make a difference. It is like chrome stops counting for the height for the drop down at the first hidden option. One way around is to move the shown options to the top of the select. If you are using jquery something like this.
var select = "select#MySelect";
$(select).children("option").hide(); //hide all options
$(select).children("Selector for items to show").each(function(idx, elm) {
$(elm).parent().prepend(elm); //move item to the top of parent
});
$(select).children("Selector for items to show").show(); //show selected options
I ran into the same problem (Chrome 40) and found that the following workaround works well for me.
var originalOptions = [];
$(document).ready(function(){
originalOptions = $("yourSelect").children("option");
$("someElement").someEvent(function(){
$("yourSelect").children("option").remove();
$(originalOptions).each(function(){
if(/*criteria here*/){$("yourSelect").append($(this));}
});
});
});
The best fix is to add at the end on the last
<option></option> in your Select Element. Add this code:
<optgroup></optgroup>
This will add a blank group element, and for now is the best Easy and fast FIX to this rare BUG.
Thanks!

Using page anchors in <Select> dropdown list in html

I have a static HTML page that contains a lot of tables. I would like to use the html tag <select> to create a simple dropdown menu which jumps to a specific table further down the page.
What command sets the user selection to jump down the page and what anchor code is required to give that selection a target.
I believe you just need to use JavaScript to make it so when you click/change value on the select box it takes you to the link specified in the value of that select option.
<select name="dropdpown" size="1" id="select-anchor">
<option value="#link">foo</option>
<option value="#link">bar</option>
</select>
And using jQuery library for the JavaScript functionality simplifies things (and will other JS related features of your web project)
$(document).ready(function () {
$('#select-anchor').change( function () {
var targetPosition = $($(this).val()).offset().top;
$('html,body').animate({ scrollTop: targetPosition}, 'slow');
});
});
Here's a jsFiddle of it in action.
You can't do that without JavaScript. Nor you should.
I, as a user, expect to select a value from a dropdown list. Select one item between others. Not act as navigation.
One can argue that it's OK if done for a mobile browser, but that's still bad UX.
This is how it can go to a link on select:
<select onchange="window.location.href=this.value" >
<option value="search.php?perpage=10">10</option>
<option value="search.php?perpage=20">20</option>
<option value="search.php?perpage=50">50</option>
<option value="search.php?perpage=100">100</option>
</select>

When using HTML <select> tag, changed 'selected' value not displayed in Firefox

Hello (this is a copy of my post on the Seaside mailing list; first try at stackoverflow),
How do I get the rendered display of a drop-down select list to show an updated selection from another session, in Firefox? (I'm using 3.6.13)
This problem does not appear in Chrome, IE or Opera.
Here is the scenario: I have a domain object with an attribute displayed in a drop-down list. Some other session updates the attribute. I refresh my display, but the rendered selection does not change. Using Firebug, the generated html shows the updated selection. This may be basic HTML knowledge, but should the displayed value not update to show the changed 'selected' option? Or is the value intended to be set only on the initial page display and then only by a user action?
Example: I have a demo Seaside component with a class variable #testStateListSelection which is selected to 'one' in a Seaside session. If I change the value to 'three' in another Seaside session, the displayed value stays as 'one' in the original session after rendering again, even though the "selected" in the generated HTML shows "three".
renderSelectionListOn: html
html form: [
html select
list: #('one' 'two' 'three' 'four' 'five');
selected: self class testStateListSelection;
callback: [:value | self class testStateListSelection: value].
html break.
html submitButton
callback: [Transcript cr; show: self class testStateListSelection];
with: 'Save']
...the displayed value shows 'one', even though the HTML is...
<select name="1">
<option value="1">one</option>
<option value="2">two</option>
<option value="3" selected="selected">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
How do I get the drop-down selected value to show 'three'?
BTW: all I know about HTML & browser behaviour I've learned from coding Seaside, so I may have a skewed perspective ;-)
Thanks for any help.
The problem is that, when you refresh your page, your browser is remembering which option was previously selected. This feature is designed to make it harder to lose your form data during long forms and is discussed a bit on the Mozillazine forums
Instead of refreshing the page. if you load the page "fresh" by going to the address bar and pressing return, you'll get the page loaded from the server again - with the updated select
Another cause of the problem might be that your browser tries to autocomplete the form for you based on your last submission. Make sure you have disabled this feature in the preferences of your web browser. You can also try to tell the form-tag with an unofficial attribute not to autocomplete:
html form noAutocomplete; with: [ ...
Whenever the page is refreshed the accessor self class testStateListSelection is run.
In fact the code you provide works perfectly for me. Are you sure that the accessors work as expected?
testStateListSelection
^ testStateListSelection " <-- forgetting the return is a common problem "
testStateListSelection: aString
testStateListSelection := aString
If using javascript to refresh the page...
window.location.reload();
...will NOT re-render the select elements. They will retain their dynamic values regardless of what the new source HTML says.
To force the select elements to re-render, use...
window.location.reload(true);

Lock HTML select element, allow value to be sent on submit

I have a select box (for a customer field) on a complex order form, when the user starts to add lines to the order they should not be allowed to change the customer select box (unless all lines are deleted).
My immediate thought was that I could use the disabled attribute, but when the box is disabled the selected value is no longer passed to the target.
When the problem arose a while ago one of the other developers worked around this by looping through all the options and disabling all but the selected option, and sure enough the value was passed to the target and we've been using since. But now I'm looking for a proper solution, I don't want to loop through all the options because are data is expanding and it's starting to introduce performance issues.
I'd prefer not to enable this / all the elements when the submit button is hit.
How can I lock the input, whilst maintaining the selected option and passing that value to the target script? I would prefer a non-JavaScript solution if possible, but if needed we are running jQuery 1.4.2 so that could be used.
Edit
I've tried to use the readonly attribute with little success, here's the jQuery code I'm using:
$('.abc').each(function(element) {
$(this).attr('readonly','readonly');
});
When inspecting the element with Firebug the readonly attribute had been set, but I can still change the value in the select box?!
This works:
$('.abc :not(:selected)').attr('disabled','disabled');
jQuery will still be looping through the elements behind the scenes, but I seriously doubt you will have performance issues unless your select has thousands of elements (in which case your usability issues will far out weigh the performance issues). The original code must have been doing something wrong.
This works fine
<select disabled="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">thre</option>
</select>
Add a hidden field to your form and onsubmit take the value from the select and place it in the hidden field's value
As per the HTML spec, readonly is not supported by the select tag
The element does not accept readonly attribute. Readonly is a wrapper that fix this.
Try this:
https://github.com/haggen/readonly
"select" does not have a readonly attribute. It has only disabled attribute.
http://www.w3schools.com/TAGS/att_select_disabled.asp
So your best best is:
$('.abc').each(function(element) {
$(this).attr('disabled','disabled');
});
HTH
I'd have an idea, that was functional to me:
In my case, when a user selects an option (an account) in a drop-down on a form of an accounting system, e.g., some kind of "expense", that I know that may not be "credited", just "debited", another drop-down that selects the accounting operation (Debit/Credit), changes these drop-down to "Debit".
Then, I "lock" (using "disabled=true") these last "drop-down" in the "debit" option.
The problem that occurred to me these moment, was similar of yours: after disabling the drop-down element, I couldn't receive it in the target, anymore.
So, what I've done:
1 - Changed the option in the second drop-down list, as I said:
document.getElementById("operation").value = "D";
`
2 - Disabled that dropdown:
document.getElementById("operation").disabled = true;
Then, the "cat salt":
3a- Added to the "FORM" element, an "onsubmit"
onsubmit = "validForm()"
3b - On my [java-script] file I added the ["valid-Form"] function:
function validForm()
{
document.getElementById("operation").disabled = false;
}
Voilá!
A simple way to disable any Select is to just disable mouse interaction.
For example:
<select id="complaint_status" name="complaint_status" class="disabledSelect" value="Pending">
<option value="Pending" selected>Pending</option>
<option value="Complete">Complete</option></select>
css
.disabledbutton {
pointer-events: none;
opacity: 0.4;}
The value of Select will be SUBMITted.
Hope it works!!