I have sweetalert2 with browserify and I want to add multiselect dropdown select2 in sweetalert2 but it is not working
Swal.fire({
title: "Multiselect",
position: 'center-end',
closeOnEsc: false,
confirmButtonText: 'submit',
html: "<select class='js-example-basic-multiple' name='states[]' multiple='multiple'> <option value='AL'>Alabama</option> <option value='WY'>Wyoming</option> </select>",
preConfirm: () => {
console.log("popup didopen");
const login = Swal.getPopup().querySelector('#title').value;
});
Related
I want the placeholder to be shown always whether the option is added, selected, or removed. Currently, the placeholder shows after removing the options or after adding the new options. But when the option is selected from the dropdown the placeholder will disappear. This may be the original functionality of the seelct2 plugin. Is there any way to keep the placeholder always visible?
$("select.add-tags").select2({
tags: true,
dropdownParent: $(".select-tags"),
placeholder: "Start typing the tag name..."
});
if ($("select.add-tags").select2("data").length) {
$("select.add-tags")
.next()
.find(".select2-search.select2-search--inline .select2-search__field")
.attr("placeholder", "Placeholder on default");
$("select.add-tags")
.next()
.find(".select2-search.select2-search--inline .select2-search__field")
.css("width", "200px");
}
$("select.add-tags").on("select2:select", function (evt) {
// console.log($(this).val());
console.log("select2 : select");
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
if (
$(".select2-search.select2-search--inline .select2-search__field").is(
":focus"
)
) {
console.log("tag input fpcused");
$(".select2-search.select2-search--inline").removeAttr("style");
$(
".select2-search.select2-search--inline .select2-search__field"
).removeAttr("style");
$(".select2-search.select2-search--inline .select2-search__field").attr(
"placeholder",
"Placeholder on select"
);
$(".select2-search.select2-search--inline .select2-search__field").css(
"width",
"200px"
);
}
});
$("select.add-tags").on("select2:unselect", function () {
console.log($(this).val());
console.log("select2 : unselect");
if ($("select.add-tags").val().length == 0) {
$(".select2-search.select2-search--inline .select2-search__field").attr(
"placeholder",
"Start typing the tag name..."
);
$(".select2-search.select2-search--inline .select2-search__field").css(
"width",
"100%"
);
$(".select2-search.select2-search--.select2-search__field").css(
"width",
"100%"
);
} else {
$(".select2-search.select2-search--inline .select2-search__field").attr(
"placeholder",
"Add another tag"
);
$(".select2-search.select2-search--inline .select2-search__field").css(
"width",
"200px"
);
$(".select2-search.select2-search--inline").removeAttr("style");
}
});
select {
width: 300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="container select-tags">
<select class="add-tags error" multiple="multiple">
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue" selected>Blue</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
</select>
</div>
Codepen: https://codepen.io/jagruti23/pen/bGggJZR
Halo, i'm new to javascript, i'm using select2, i take the options from desproducts.php which return json containing product list. The product list is shown, but the filter function doesn't work, here is the image
here is my code :
$('.select2-show-search').select2({
minimumResultsForSearch: '',
allowClear: true,
ajax: {
url: 'desproducts.php',
dataType: 'json',
processResults: function (data) {
return {
results: data
};
},
}
});
i have found a sloution, i take the options directly from database using this code :
<select class="form-control select2-show-search">
<option value=""></option>
<?php foreach ($desproducts as $desproduct): ?>
<option value="<?= $desproduct["desProductID"] ?>" harga="<?=
$desproduct["desProductPrice"] ?>"><?= $desproduct["desProductName"] ?>
</option>
<?php endforeach; ?>
</select>
and this is the code in javascript
$('.select2-show-search').select2({
minimumResultsForSearch: '',
allowClear: true,
});
I'm trying to get values pre-selected in a multi-select Rails 4 form that uses select2.
The entry looks like:
- bol_selected = segments.map { |bol| seg = Bol.find_by(id: bol.to_i); [seg.bl_number, seg.id] }
= f.select :bol, options_for_select(bol_selected, bol_selected), {}, multiple: true, size: 10, id: 'bol-multiple', class: 'form-control'
It is my understanding that options_for_select takes a list of options and values as its first parameter and the pre-selected options as its second parameter, which is exactly what I have above.
I am trying this along with the following js code:
$('#bol-multiple').select2({
theme: 'bootstrap',
allowClear: true,
dropdownParent: $('#bol-multiple').parent(),
minimumInputLength: 1,
ajax: {
url: '/autocomplete/bols.json',
dataType: 'json',
delay: 250,
data: function(term, page) {
return {
q: term
};
}
}
});
The HTML this generates is as follows:
<select multiple="" id="bol-multiple" class="form-control select2-hidden-accessible" name="cargo[bol_segments][]" tabindex="-1" aria-hidden="true"
<option value="25285">ZZMUM58</option>
</select>
as per some other SO threads I've also tried adding
data: [{id: 123, text: 'Some text'}]
to the above JavaScript but this doesn't seem to pre-select any entries, it only pre-populates multi-select dropdown with some values.
Just to make it clear - the AJAX call works fine and selecting multiple values also works fine. All I'm trying to do now is get certain values pre-selected in the input field.
Thanks in advance!
I am using filamentgroup JQuery selectmenu widget. The widget is initialized in page's head section. When the page is loaded for the first time Jquery loads widget successfully but after ajax call (form submit using POST) selectmenu widget stops working (not initializing). I had same problem using input text fields for submitting form on enter key press but then I used delegate method to attach an event handler to selected elements. And it worked. So my question is: how can I reinitialize selectmenu after AJAX call. Maybe I can use same delegate method for initialization. I googled but didn't found any JQuery events that initializes widgets. Here is the code snippet
<head>
<script type="text/javascript">
$(document).ready(function()
{
$('select').selectmenu
({
width: 70,
style: 'dropdown',
menuWidth: 100,
maxHeight: 400,
change: function()
{
$(this).parents('form').submit();
}
});
$('body').delegate('.submit', 'keydown', function(e)
{
if (e.keyCode == 13)
{
$(this).parents('form').submit();
return false;
}
});
$('#regFormID').submit(function()
{
$.ajax(
{
type: 'POST',
url: 'index.php',
data: $(this).serialize(),
error: function(xml, status, error)
{
$('#dataFilterID').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
},
success: function(data, textStatus, jqXHR)
{
$('#dataTableID').html($(data).find('#dataFilterID').html());
}
});
return false;
}
});
</script>
</head>
<body>
<div id="#dataFilterID">
<form id="regFormID" class="reg-form" name="regForm" method="POST" action="">
<select class="select" id="Filter-dbPage-count" name="Filter-dbPage-count">
<option selected="selected" value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
</select>
<input type="text" value="" class="submit " id="Filter-dbField-1" name="Filter-dbField-1">
<input type="text" value="" class="submit " id="Filter-dbField-2" name="Filter-dbField-2">
<input type="text" value="" class="submit " id="Filter-dbField-3" name="Filter-dbField-3">
</form>
</div>
</body>
rebind in the success callback
success: function(data, textStatus, jqXHR)
{
$('#dataTableID').html($(data).find('#dataFilterID').html());
$('select').selectmenu
({
width: 70,
style: 'dropdown',
menuWidth: 100,
maxHeight: 400,
change: function()
{
$("select").parents('form').submit();
}
});
}
my code is:
<script type="text/javascript">
$(document).ready(function () {
alert("dd");
//Attach cascading behavior to the orderID select element.
$("#orderID").CascadingDropDown("#customerID", '/Home/AsyncOrders',
{
promptText: '-- Pick an Order--',
onLoading: function () {
$(this).css("background-color", "#ff3");
},
onLoaded: function () {
$(this).animate({ backgroundColor: '#ffffff' }, 300);
}
});
//Attach cascading behavior to the orderDetails select element.
$("#orderDetails").CascadingDropDown("#orderID", '/Sales/AsyncOrderDetails',
{
promptText: '-- Pick an Order Detail --',
onLoading: function () {
$(this).css("background-color", "#ff3");
},
onLoaded: function () {
$(this).animate({ backgroundColor: '#ffffff' }, 300);
}
});
//When an order detail is selected, fetch the details using ajax
//and display inside a div tag.
$('#orderDetails').change(function () {
if ($(this).val() != '') {
$.post('/Sales/OrderDetails', $(this).serialize(), function (data) {
$('#orderDetailsContainer').html(data).effect("highlight", {}, 3000);
});
}
});
});
</script>
<div id="searchFilter">
Custom text in select lists, lists highlight when loading.<br />
<%:Html.DropDownList("customerID", Model, "-- Select Customer --")%>
<%-- <%:Html.DropDownList("cites", ViewData["xml"] as SelectList , "-- Select Customer --")%>--%>
<select id="orderID" name="orderID">
</select>
<select id="orderDetails" name="orderDetails">
</select>
</div>
<div id="orderDetailsContainer">
</div>
and when write it in page(aspx) very god run
but when use Partial View (ascx) do not run code ?
Make sure you do it either like this
<% Html.RenderPartial("YourUserControl"); %>
or (note the colon (:) )
<%: Html.Partial("YourUserControl"); %>
Or your partial view will not be written to the document