I have being playing around with materializecss on my joomla website. I have a T3 framework template ( I am pretty new to web development).
The problem I have is that whenever I use an item that requires js initialization it gets duplicated, one with the javascript style and one with the css one. For example this happens when using a select item or datepicker. I use the example code given here:
http://materializecss.com/forms.html
Another strange thing is that the styles are not fully applied, for example the input field its never applied.
thank you
EDITED:
javascript code:
$(document).ready(function() {
$('select').material_select();
});
css:
<label>Materialize Disabled</label>
<select disabled>
<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>
image:
http://i.stack.imgur.com/AV927.png
When I say that the style is partially applied I meant that it doesn't look as shown in the materializecss webpage, it looks like if it was disabled.
I had the same problem and this is how I was able to fix it, hope it works for you.
a) Put all the initialization for materialize elements in a function
function initializeMaterialize() {
// initialize materialize slider
$('.slider').slider();
// initialize materialize select
$('select').material_select();
// initialize materialize datepicker
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 20,
onSet: function(ele) { if(ele.select) { this.close(); } },
format: 'mm/dd/yyyy',
formatSubmit: 'yyyy-mm-dd'
});
}
b) Then call the function on `$(window).load(function(){});
$(window).load(function() {
initializeMaterialize();
});
This will make the call only once so you will get only one copy of each of the elements.
You'll get this duplicate on first DOM load or after?
Because i think you initialize same function .material_select() 2 or more times...
Related
I am using Bootstrap 4 and Select2 jQuery plugin in my webpage. It is working perfectly in my website. But when calling an another page contenting Select2 class of select input is not working.
Plugin Initiated at main page as -
<script type="text/javascript" language="javascript">
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
$('.select2-selection').css('border','0px')
$('.select2-container').children().css('border','0px')
//Initialize Select2 Elements
$('.select2bs4').select2({
theme: 'bootstrap4'
})
})
</script>
My Ajax page contain below input elements -
<select class="select2" style="width: 100%;" id="emp" name="emp">
<option value="">-- Select employee --</option>
<option value="E001">Employee 1</option>
<option value="E002">Employee 2</option>
</select>
I am unable to figure out the issue why it not working on Ajax Called page. Anybody please give answer? Thanks in advance.
In my opinion, you can call the select2 plugin function again after ajax called, I think.
Try it, maybe the mistake fixed.
Hope it helps. thanks
I want to show selectbox option using jquery when the page loads. I have used .simulate() and .trigger function but it's not working, so can you please suggest some solution for that.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="simulate.js"></script>
<script>
$(document).ready(function(){
$("#test").simulate('mousedown'); // not working
$("#test").trigger('click'); // not working
//$("#test").attr('size',3); // size is not as i need. i want to display option as any dropdown shows.
});
</script>
<select id="test">
<option value="0">select option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Please help me to out from this problem...
Try this...
$(document).ready(function(){
var myDropDown=$("#test");
var length = $('#test> option').length;
myDropDown.attr('size',length);
$("#test").click(function(){
myDropDown.attr('size',0);
});
});
I think it's not possible. There's a lot of jQuery plugins out there to enhance the native select's functionality, like the Selectmenu Widget of jQuery UI which has an "open" method:
http://api.jqueryui.com/selectmenu/#method-open
or for Twitter Bootstrap:
http://silviomoreto.github.io/bootstrap-select/methods/#selectpickershow
just to name some...
It's not possible to open a selectbox with JavaScript.
I tried and got disappointed. I finally changed the attribute size for the select box so it appears to be open:
$('#test').attr('size',3);
and then when you're finished
$('#test').attr('size',0);
Hope that helps :)
I have the following select/option
<select class="bs-select form-control">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
In my script section, I have this, which works fine. The styles are being applied
$(document).ready(function () {
$('.bs-select').selectpicker();
});
I have a button that does this:
$('.bs-select').append($('<option>', {
value: 0,
text: "test"
}));
However my select list isn't refreshed.
I tried adding
$('.bs-select').selectpicker();
after the append but it still doesn't work.
My select list gets refreshed if I remove the $('.bs-select').selectpicker() in $(document).ready
How can I get my list to refresh after adding an item?
Use refresh after adding new option
$('.bs-select').selectpicker('refresh');
I make use of Mobiscroll jQuery script for a prettier input by the users. On page load, the first option of the select list is shown as selected. What should I add to the existing code that on page entrance, the (for example) 3rd value is shown as the default?
I tried selecte="selected" but it does not work.
this is the jQuery script
$(function(){
$('#city').scroller({
preset: 'select',
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
});
});
and here is the options of the select box
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
</select>
You can easily set the value from jQuery by doing this:
var defaultValue = 3;
$("#city").val(defaultValue);
"3" here represents Boston from your drop down list, here's a fiddle for proof:
http://jsfiddle.net/6mj8n/5/
Using $('#city').val('3'); will put The third option 'Boston' as selected for example
In this case, I think the vanilla DOM method is what I'd go with:
$('#city')[0].options.selectedIndex = 3;
It should be mentioned that this and other solutions should be placed before you initialize mobiscroll. Working demo with mobiscroll: http://jsfiddle.net/DCaHK/1/
...On further thought, your first suggestion of adding selected to the option should have worked. Updated my demo to do exactly that. Autocomplete could prevent this from working properly in some browsers, so it's possible your issue is simply that you need to turn autocomplete off:
<form autocomplete="off">
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2" selected>Berlin</option>
<option value="3">Boston</option>
</select>
</form>
I'm new to JS and Mootools and I've been having a really funny error using getSelected() with Mootools 1.3.2. I've looked at other posts that have similar code, but I haven't been successful. I'm using getSelected to try and get the value of an option and for some reason, my browser simply isn't calling it.
Here's the HTML
<select id="id_method" name="method">
<option selected="selected" value="">---------</option>
<option value="Au">Auction (Best Price Wins)</option>
<option value="Fi">Fixed Price</option>
<option value="Fr">Free Item/Donation</option>
<option value="Mu">Multiple Items and Prices</option>
<option value="No">No Price Displayed</option>
<option value="Tr">Trade</option>
</select>
Here's the JS
window.addEvent('domready', function() {
...
$('id_method').addEvent('change', function() {
alert(this.getSelected().selection[0].value);
});
});
Here's my attempt at putting in in jsfiddle: http://jsfiddle.net/jNYud/
I know this is probably a really silly question, but I'd appreciate some help. Thanks!
The result of calling getSelected() returns an array, pure and simple. So you just need to look at the first element of that array. So replace your alert with this one:
alert(this.getSelected()[0].value);