The problem is I need to get the data using axios into select box option .
so it looks like this.
<optgroup label="group1">
<option v-for="aa11 in aa11" :value="aa11.value" :key="aa11.code">{{aa11.value}}</option>
</optgroup>
<optgroup label="group2">
<option v-for="aa12 in aa12" :value="aa12.value" :key="aa12.code">{{aa12.value}}</option>
</optgroup>
and the data is set like this.
data(){
return{
aa11:[],
aa12:[]
}
}
and on js
axios.get('URL')
.then(response=>{
if(response.data.upjongapi[0].aa11 != null){
for(let i=0; i<response.data.upjongapi[0].aa11.length; i++){
this.aa11.push({"code":response.data.upjongapi[0].aa11[i].code,"value":response.data.upjongapi[0].aa11[i].value});
}
}
So, it mounts on the DOM, I can see in on chrome dev tool.
but I want to use bootstrap-select which I downloaded and customize.
(I import it instead of npm install.)
The problem is on bootstrap-select DOM which is dropdown ul, in li it doesn't show.
sometimes it shows, so I can't figure out when it shows or when it doesn't show.
(seems like it depends on the luck =( )
this is the problem capture pic. the options that are in yellow circle should be on select box!!
I want to see all the options, and it all mounted on DOM, but i dont' think it mounted on bootstrap-select dropdown.
What can I do?
To future readers,
updated() {
$(this.$el).find('.selectpicker').selectpicker('refresh');
}
this worked like a charm =)
and here is the page i read
https://github.com/vuejs/Discussion/issues/397
Related
I am using Angular/Material Autocomplete. While loading data to the Autocomplete getting serious performance issues,like the rendering takes around 30 seconds and it takes more than 10 seconds to become stable,data is loaded from the server, and the data received from the server is quite fast. To Over Come that issue i used cdkVirtualScroll, after scrolling down to end and clicking again the text box it's loading empty popup after scroll its loading values.
html
<mat-form-field>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (opened)="panelOpened()">
<cdk-virtual-scroll-viewport itemSize="48" style="height: 240px" minBufferPx="96" maxBufferPx="144">
<mat-option *cdkVirtualFor="let option of options" [value]="option">
{{option}}
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-autocomplete>
</mat-form-field>
TS
export class AppComponent {
options: string[] = [];
#ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;
constructor() {
for (let i = 0; i < 10000; i++) {
this.options.push("#"+i);
}
}
panelOpened() {
if (this.viewport) {
this.viewport.checkViewportSize();
}
}
}
Check the ex: https://stackblitz.com/edit/angular-7vcohv?file=src%2Fapp%2Fapp.component.html
I'm not sure how many options the mat-autocomplete is targeted to support, but my suggestions to improve the performance are:
Fill the autocomplete only after the user typed at least 2 characters.
Implement a server-side search and fill the auto-complete options after you got smaller amount of options.
If you think this is an issue with the mat-autocomplete component, you can open an issue in the #angular/material repository.
I believe the core problem is that you are using viewChild to reference the viewPort but there are multiple viewports. The AutoComplete setup in the html had similar issues with the setup.
The below StackBlitz seems to be working. I would think the way you had it would work though if you only had one auto complete on the screen.
https://stackblitz.com/edit/angular-rzqjz8?file=src%2Fapp%2Fapp.component.ts
This bug occurs not just in my code, but also on the Materialize documentation site, so I will use their code as an example:
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
This works fine with mouse events. But on my android mobile phone screen, it is impossible to select the option I want. I either get another option or none. The feature is initialized as instructed, with
$(document).ready(function(){
$('select').formSelect();
});
You can find the example in the Materialize documentation at https://materializecss.com/select.html and confirm that it does not work. The same occurs on dropdowns, as can be seen at https://materializecss.com/dropdown.html.
I see that materialize renders the select block shown above, but the materialize js function generates an additional div with class "select-wrapper" containing a ul, which then functions as the actual dropdown. The select block itself seems to serve no function. Could it be that the ul element is opaque to mouse events, but not to the emulated mouse events on touch screens, and that this is causing the problem? But this train of thought led me to no solution.
I also followed the suggestion to add <meta name="viewport" content="width=device-width"> , but this does not help.
How can I get this to work? Any help will be appreciated!
Yes, JRSeabird, it works but It only solved the problem on DOMContentLoaded. If you want it to capture every event, try this
$(document).click(function(){
$('li[id^="select-options"]').on('touchend', function (e) {
e.stopPropagation();
});
});
After hours of trying, I found the answer: Stop propagation on touchend event, specifically
$('li[id^="select-options"]').on('touchend', function (e) {
e.stopPropagation();
});
Thanks for your attention and have a nice day.
You should add the "browser-default" class to the select elements.
Of course this will loose the usual materializecss look and feed on that select element Also on other devices.
A possible workaround would be to add that class selectively only when the user browser is safari.
I'm using data-menu-top on this page because everything is fixed and uses Skrollr to animate the different sections into view. The reason everything is fixed is so that I could do full-page SVGs that cover the height of the page (if you think there's a better way to do this, I would love to be enlightened).
Here's a link to the project development page: http://pman.mindevo.com
The button that appears on the first section has data-menu-top="10300", and this works great on Chrome, but when I try to view it in Firefox (33.0) the link doesn't do anything at all.
I am initializing using this code:
<script type="text/javascript">
setTimeout(function() {
var s = skrollr.init({
});
skrollr.menu.init(s, {
easing: 'quadratic',
duration: function(currentTop, targetTop) {
return 1500;
}
});
}, 1000);
</script>
Am I properly using data-menu-top? Is this a bug I'm not aware of using fixed layouts that are hidden using height?
Do I need to change the layout somehow to accomplish what I want and have it work in Firefox?
So the problem with Firefox was the way that it handles <button> linking. Here's the way the button was in the HTML:
<button class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</button>
In Firefox it wasn't doing anything upon clicking, and got me thinking perhaps I'm using "button" HTML element incorrectly. Anyways, changing it to a div like so:
<div class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</div>
That allowed Firefox to utilize Skrollr-menu to scroll to where I needed it to.
There might be a better way to do the layout on this, I'm still experimenting.
I was testing my application in IE10 and found a strange behavior for select box.
The option selected is highlighted and options above/below are displayed above/below the selected one.
This happens only in IE10.
<!DOCTYPE html>
<html>
<body>
<select>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
</body>
</html>
How to fix this??
Thanks in Advance.
This is the default behavior of select tag in IE10. That is a pretty good look.
If you watch carefully, the option is opened based on the position allotted.
I have figured a work around using jQuery,
var position = $("select").on('change', function () {
position.find('option:selected').prependTo(position);
});
How it works:
Whenever you change an option, the selected option will be prepended(in simple moved) to the first position.
I have create a JSFiddle to show how it works, check it in IE.
If you're not interested in this feature, then you have look for some plugins.
My most favorite plugins are:
Chosen
Select2
Hope you can understand.
Thanks to #Praveen, solution helped me a lot. I made few changes as per my need which I am posting below
var arr = ['1','2','3','4','5','6','7','8','9','10'];
var selText = "";
function setDropdown() {
var str = "";
$.each( arr, function( index, value ){
if (selText !== value) {
str += "<option value="+value+">"+value+"</option>";
}
});
$("select").empty().append($(str));
}
setDropdown();
var position = $("select").on('change', function () {
var $el = position.find('option:selected');
selText = $el.text();
setDropdown();
$el.prependTo(position);
});
Suggestions are welcome.
I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.