I am having an issue with cloning a div with a select2 drop down.
When the first one is shown on the initial page load, the select2 works fine. When I click the button to clone it, the next select2 doesn't. It's like it's disabled and doesn't work.
My code is as follows;
<div class="input-main white_bg cloneneedsanalysis">
<div class="action-input clone-needs-analysis">
<div class="action-input-white-shorter">
<div class="inner-sub-title-less-padding">
<p>Audience Analysis</p>
</div>
<div class="col-md-12">
<div class="form-group">
<select class="select2 select2-multiple need_analysis_selector" multiple="multiple" data-placeholder="Choose ..." name="needs_analysis[]">
<option value="">-- Choose Audience Categories --</option>
<option value="536"> Finance - - Cash collection</option>
<option value="537">IT - - Comms IT</option>
<option value="538">Strategy - - Strategy team 1</option>
</select>
</div>
</div>
</div>
<div class="action-input-plus-needs-analysis">
<a href="#" class="clone_needs_analysis_button">
<img src="http://www.test.com/assets/images/plus.jpg"></a>
</div>
<div class="action-input-remove-needs-analysis">
<a href="#" class="remove_needs_anaylsis_button">
<img src="http://www.test.com/assets/images/minus.jpg"></a>
</div>
</div>
</div>
$(document).on('click', '.clone_needs_analysis_button', function(e) {
e.preventDefault();
$(this).closest('.clone-needs-analysis').clone().insertAfter('.cloneneedsanalysis:last');
$(this).closest('.action-input-plus').hide();
$(this).closest('.action-input-remove').removeClass('hidden');
$('.select2').select2();
});
Use $(this).closest('.clone-needs-analysis').clone(true, true) instead of $(this).closest('.clone-needs-analysis').clone().
You need to specify the true, true parameters to tell JQuery to also clone the attached events.
Check the documentation here
Related
I have a dropdown list that has a nice select using bootstrap 3.4.1.
The issue that i have is that: the drop down remain open after select and never close unless i click outside the list.
HTML code:
<div id="countrysd" class="row option-box">
<div class="option-box-header">
<h3 style="color:#164680">Number <span style="color:#C32952">of Users</span> </h3>
<p>Select the users country and move the range slider to set how many users </p>
</div>
<div class="col-md-6 col-sm-6">
<input type="hidden" id="option100Title" name="option100Title" value="Select" />
<input type="hidden" id="option100Price" name="option100Price" value="0" />
<select id="countryList" class="wide price-list" name="countryList" onchange="showChange()">
<option value="">Select</option>
<option value="egypt">Egypt User</option>
<option value="uae">UAE User</option>
<option value="usa">USA User</option>
</select>
</div>
</div>
JavaScript code that casuing the issue
!function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("<div></div>").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html('<span class="current"></span><ul class="list"></ul>'));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("<li></li>").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery);
Please let me know if there is a solution for this
My issue was sorted when I removed onchange="showChange()".
After upgrading from v0.100.2 to v1.0.0, the mouse scroll only work intermittently in Chrome. Other browsers work fine.
Specifically, if you mouse wheel scroll with the mouse cursor on the top-left area of the dropdown, it will work. But if you mouse wheel scroll with the cursor elsewhere, it will not work.
Another observation is if you click one dropdown before clicking and mouse wheel scrolling another dropdown, it will work, so presumably it has something to do with the dropdown close event.
This is the html structure:
<div id="filters" class="modal" style="overflow-y: visible;">
<div class="modal-content">
<h4>Filters</h4>
<div class="row">
<div>
<div class="input-field col s6">
<select data-group="List">
<option selected="selected" value="0">1</option>
<option value="9">2</option>
<option value="13">3</option>
<option value="12">4</option>
<option value="8">5</option>
<option value="11">6</option>
<option value="19">7</option>
</select>
<label for="List">Label</label>
</div>
<div class="input-field col s6">
<select data-group="ListAgain">
<option selected="selected" value="0">one</option>
<option value="26">two</option>
<option value="25">three</option>
<option value="24">four</option>
<option value="29">five</option>
<option value="23">six</option>
<option value="27">seven</option>
<option value="30">eight</option>
<option value="22">nine</option>
<option value="28">ten</option>
<option value="21">eleven</option>
<option value="31">twelve</option>
<option value="0">---</option>
<option value="10015">13</option>
<option value="10019">14</option>
<option value="10021">15</option>
<option value="10012">16</option>
<option value="10018">17</option>
<option value="10011">18</option>
<option value="10016">19</option>
<option value="10014">20</option>
<option value="10020">21</option>
<option value="10013">22</option>
<option value="10017">23</option>
</select>
<label for="ListAgain">Label Again</label>
</div>
</div>
</div>
</div>
</div>
<div class="col right">
<div class="right">
<a id="show-filters" href="#filters" class="btn-floating modal-trigger" title="Filters">
<i class="material-icons">filter_list</i>
</a>
</div>
</div>
https://codepen.io/frostless/pen/bQPLqK (not always work v1.0.0)
https://codepen.io/frostless/pen/aKQEXO (always work v0.100.2)
The issue reported in https://github.com/Dogfalo/materialize/issues/2592
The solution which I found is adding backface-visibility:hidden for .dropdown-content class. It looks like some browsers can't handle transformations and scrollbars properly.
Found a temporary solution:
It seems like if a select element with class "browser-default" is in the document when the init method is called, the bug would be gone.
So we can append a out-of-document-flow, hidden select element to the body like this:
$(document).ready(function () {
$('body').append('<select class="browser-default" style="position:absolute;visibility:hidden"></select>'); //this is the hack
M.AutoInit();
})
I know this is not a ultimate solution, but it seems to temporarily fix the bug.
A better solution would need to be done at the low-level of Materialize source code.
I want to reveal a link when a certain dropdown option is selected in a html5 form.
On page load I want to remove the link with id "pension-faq-icon" and only display it if the user selects <option value="<%= User::LENDER_TYPE_PENSION_INDIVIDUAL %>" id="select-ind-pension">Individual Pension Account</option>
Html:
<div class="seven columns">
<div class="select-holder icon icon_select">
<select name="user[user_subtype]" id="user_lender_type">
<option value="">Select type</option>
<option value="<%= User::LENDER_TYPE_INDIVIDUAL %>" id="select-ind">Individual Lender</option>
<option value="<%= User::LENDER_TYPE_PENSION_INDIVIDUAL %>" id="select-ind-pension">Individual Pension Account</option>
<!--<option value="sme" id="select-sme">Investment Business</option>-->
</select>
</div>
<p class="icon icon_info form-help-pension-faq show" id="pension-faq-icon">Need help? Read Our Pensions FAQ</p>
</div>
js file:
var user_type = $("#user_user_type").val();
var option_type = $("#select").val();
if(user_type == 'lender') {
$('#pension-faq-icon').addClass('display-none');
}
if (option_type == 'individual_pension_lender'){
//$('#pension-faq-icon').removeClass('display-none');
console.log(option_type);
}
Right now the code above is successfully not displaying the line with the id "pension-faq-icon". How can I add it again if the user selects the specific dropdown option mentioned above?
To make this work you need to attach a change event handler to the select which runs whenever the user selects an option. At the moment your logic only executes when the page loads.
Also note that you can simplify the process by providing a boolean to toggle() which specifies whether to hide or show the relevant element. Try this:
$('#user_lender_type').change(function() {
$('#pension-faq-icon').toggle($(this).val() == 'individual_pension_lender');
});
#pension-faq-icon {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="seven columns">
<div class="select-holder icon icon_select">
<select name="user[user_subtype]" id="user_lender_type">
<option value="">Select type</option>
<option value="lender" id="select-ind">Individual Lender</option>
<option value="individual_pension_lender" id="select-ind-pension">Individual Pension Account</option>
</select>
</div>
<p class="icon icon_info form-help-pension-faq show" id="pension-faq-icon">
Need help?
Read Our Pensions FAQ
</p>
</div>
I am trying to build an app that let people choose a license and the price is different for different licenses. I want a real-time price update on the page of the product. Here is the reference that I took for the below code: https://stackoverflow.com/a/6740218
Code:
<script type="text/javaScript">
var price = {"3":"11","2":"500","1":"1000"};
$(function() {
$('select[name=dropdown_price_change]').change(function() {
document.getElementById('price_disp').innerHTML = price[$(this).val()];
});
// Trigger on dom ready
$('select[name=dropdown_price_change]').change();
});
</script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>
Thanks in advance. ;)
innerHtml should be innerHTML and frankly, you should probably be using textContent instead of innerHTML in this case anyway since the values of the select don't contain any HTML.
Also, you shouldn't trigger the change function on document ready because the user will never get to see and use the dropdown list that way.
Lastly, add a "dummy" choice to the list as the default choice so that the user must change the value if they want to select "Personal License" from the list. Without this, the change event won't trigger because that was the default choice in the first place.
var price = {"3":"11","2":"500","1":"1000"};
$(function(){
$('select[name=dropdown_price_change]').change(function(){
document.getElementById('price_disp').textContent = price[$(this).val()];
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="">-- Select an Option --</option>
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>
i have created dynamic drop down
loading second drop down using first selected value
now what i need is i need to display the following css(tic icon) next to first drop down
code
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
the CSS is added in JSfiddleand full Jsfiddle
i need like this when second drop down is loaded i need output like this
You can make it like this http://jsfiddle.net/4yL0871f/2/
The CODE
$(function () {
$("#text-one").change(function () {
$("#checkmark").css({display: 'inline-block'});
$("#text-two").show();
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
});
HTML
<div id="page-wrap">
<h1>Pulls from text files</h1>
<div class="select-wrap">
<select id="text-one">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
</div>
<select id="text-two" style="display :none">
<option>Please choose from above</option>
</select>
</div>