Comments (19)
Nevermind, I've fixed it myself. So, in essence, the correct lines (for deleting the currently selected option) read like this:
var itemSelectorOption = $('#item-selector option:selected');
itemSelectorOption.remove();
itemSelector.selectpicker('refresh');
Thanks for your help, @silviomoreto! :)
from bootstrap-select.
itemSelector.trigger('changed.bs.select');
from bootstrap-select.
This may happen because of the query for the itemSelectorOption
was made outside the scope of the request action. try to move the line var itemSelectorOption = $('#item-selector option');
before the itemSelectorOption.eq(0).remove();
, so you will update the selector for the options
from bootstrap-select.
@Eagle3386 do not worry! the important thing is that you solved your problem! hope bootstrap-select helped you in your project
from bootstrap-select.
I will fix this to @kayzee
from bootstrap-select.
Thanks so much @silviomoreto! This one is a must for me (more than the other issue I posted). I am currently trying manually remove the ".ul .li" element from the boostrap-select group, but this is obviously a work-around hack. A proper refresh on delete (similar to the refresh on insert) would be awesome!
from bootstrap-select.
PS. Other than these 2 minor issues that I reported, I love this custom select that you created. I replaced every select2 and upgraded all of the standard selects throughout my whole project with your bootstrap-select!
from bootstrap-select.
Currently the select
is only updated when there is an insertion to the DOM. A temporary workaround is to append an empty option at the same time as the removal:
$('.remove').click(function() {
$(".selectpicker option").eq(0).remove();
$(".selectpicker").append('<option class="hidden"></option>');
});
.hidden {display: none;}
from bootstrap-select.
To fix this, cant we just listen for dom node removal as well...
change
this.$element.bind('DOMNodeInserted', $.proxy(this.reloadLi, this));
to
this.$element.bind('DOMNodeInserted DOMNodeRemoved', $.proxy(this.reloadLi, this));
m
from bootstrap-select.
We could add it in there. However, browser support for DOMNodeRemoved
can vary (IE cough IE) , so I would still think it would be better to always use/recommend the render
method any time you're modifying the select via javascript. We could possibly remove that line altogether, just to get people in the habit of using render
? This is how jQuery mobile handles the modification of form elements (with their refresh method), so I don't think people will think it's that big of an issue. Perhaps we could just update the documentation to make that more clear?
from bootstrap-select.
Just a comment about the render. I attempted to use render in IE8 after adding an element and the bootstrap list wouldn't update. I ended up calling reloadLi, which calls render() inside. Any reason why reloadLi works but render doesn't (in the wonderful world of IE that is. Chrome and Firefox work fine when adding new elements).
from bootstrap-select.
Yeah, its the same issue with IE 8 support for DOMNodeRemoved
the render
method doesn't actually re build the list, it just updates the state - selected values, disabled items etc etc.
Adding and removing elements requires a rebuild - reloadLi
It works on other browsers as they support the DOMNodeInserted
event, which the plugin listens for and triggers a reloadLi
.
So...
We should probably add a refresh
method, that will fire reloadLi
and render
.
This way, you can call render
(less overhead) if you are just manually changing values / states. Or refresh
if you modify the underlying structure.
from bootstrap-select.
That sounds like a good idea..if you guys don't beat me to it, I'll submit a pull request sometime next week.
from bootstrap-select.
As discussed in #31, we need to move the size logic into its own size
method which can be called at init
and refresh
m.
from bootstrap-select.
Hey everyone,
I'm working with the awesome Bootstrap Select, but experienced a weird behavior which you might be able to help me with. It's within a Bootstrap modal dialog where the first paragraph holds the item selector and whenever that selector is changed, the selected option's detail data (manufacturer, color, etc.) is loaded via AJAX.
The relevant JavaScript code:
$(document).ready(function () {
var deleteItem = $('#delete-item');
var itemManufacturer = $('#item-manufacturer');
var itemSelector = $('#item-selector');
var itemSelectorOption = $('#item-selector option'); // also tried: $('#item-selector option:selected');
// ... code left out for terse reasons ...
deleteItem.click(function () {
var itemID = itemSelector.val();
$.ajax({
// ... code left out for terse reasons ...
}).done(function (response) {
if (response > 0) {
itemSelectorOption.eq(0).remove();
itemSelector.append('<option class="hidden"></option>');
itemSelector.selectpicker('refresh');
itemManufacturer.selectpicker('deselectAll');
// ... several more lines, resetting other input fields ...
}
// ... else left out for terse reasons as well ...
});
});
});
As you can see, I've tried to incorporate the solution suggested by @caseyjhol in #52 (comment), but didn't have any luck after the first removal. Also, since I use the title
attribute, .eq(0)
gives me that "placeholder" text, but even .eq(1).
only removes the option the first time I click the delete button.
Now, the HTML "template":
<select id="item-selector" class="selectpicker show-menu-arrow show-tick" data-id="' . $item["itemID"] . '" data-width="479px" title="Please select an item">
{PHP code which loops the following line for each item}
<option value="' . $item["ItemID"] . '">' . $item["ItemConcatName"] . '</option>
{PHP code which loops the above line for each item}
</select>
So, my problem is: the deleteItem
button only works the first time it's clicked. Each consecutive click resets the other input fields, but not itemSelector
.
What am I doing wrong and how can I fix that? And is there maybe a better approach to resetting itemManufacturer
than by using .selectpicker('deselectAll')
? Because it's a dropdown menu where only one item can be selected at a time.
Would it be possible to enhance Bootstrap Select in order to offer add/delete methods?
Regards,
Martin
from bootstrap-select.
Well, that makes the delete button working and the select
menu resetting its text to the title
attribute's value. But unfortunately, no entry is removed from the dropdown menu this way.
from bootstrap-select.
Sorry, but I have to come back one more time: how to raise the changed.bs.select event manually?
Because prior to deleting the currently selected option, I set the next sibling as being selected by calling:
var itemSelectorOption = $('#item-selector option:selected');
itemSelector.selectpicker('val', itemSelectorOption.next().val());
itemSelectorOption.remove();
itemSelector.selectpicker('refresh');
But this doesn't raise the changed event which therefore prevents the itemManufacturerSelector from being changed appropriately (i. e. new item means new manufacturer).
from bootstrap-select.
Well, I overlooked that "Option" suffix and for about 2 hours, I've triggered itemSelectorOption instead of itemSelector. I'm so sorry, @caseyjhol. I want to curl up and die. -.-
But thanks a bunch for pointing me into the right direction! 👍
from bootstrap-select.
It does tremendously! :)
However, as an improvement, I'd like to suggest a better approach for the default text by implementing support for a placeholder value - much like native HTML5 input
elements already offer.
Currently, the title
attribute is somewhat used for that. But this gave me many headaches, because I'm in a scenario where I do need both, as placeholder (e. g. when a selected option is removed or simply deselected) and at the same time as the default value (e. g. when the page gets loaded or the modal dialog received the content after being rendered by PHP and transfered via AJAX).
As a feature request, I'd like to ask for native AJAX support of the data source, as, to put it simple, Ajax-Bootstrap-Select sucks. Right now, I have to use this code to achieve AJAX loading:
itemManufacturer.selectpicker()
.on('loaded.bs.select', function (event, clickedIndex, newValue, oldValue) {
$.getJSON('/path/to/item-manufacturers.php', function (response) {
itemManufacturer.html('');
$.each(response, function (key, value) {
itemManufacturer.append('<option value="' + value.ID + '">' + value.Name + '</option>');
});
}).done(function () {
itemManufacturer.selectpicker('refresh');
itemManufacturer.selectpicker('val', itemManufacturer.data('initial-manufacturer'));
});
});
So, it would be really awesome, to just give the JSON-url as a settings property and also have a placeholder option. :)
from bootstrap-select.
Related Issues (20)
- bootstrap 5.2.3 and bootstrap-select beta3 programmatically issue HOT 4
- v1.14.0-beta3 file without "dist" directory HOT 1
- Layout/colors and form floating (bootstrap 5)
- Overlayproblem
- Missing empty line at the end of bootstrap-select.js
- it works very well (bootstrap-select-v1.14.0-beta3-updated and bootstrap 5.3.0) HOT 18
- Opening dropdown does not scroll to selected option first time, but does second time HOT 4
- Select with icon HOT 4
- Button onclick not working in latest version, worked fine in 1.12.4
- [email protected] not working with Bootstrap 5.3.2 HOT 4
- data-selected-text-format after render or refresh
- ADA improvements for Select/deselect all options
- Name of Ukrainian language file is wrong.
- Select does not display in dropdown-menu HOT 1
- is there any feature like select all HOT 1
- Unable to have noneSelectedText with HTML with latest version
- doneButtonText not in i18n files and no longer adjustable via Javascript defaults
- SweetAlert2 - bootstrap select dropdown appears behind/cutoff parent div border HOT 1
- Error when have a class attribute for optgroup tag
- wrong preview for > in <select class="form-control mobileSelect"> in Safari
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.