In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.
If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')
Related
Right now I am using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/)
The multiselect option is exactly what I want to achieve, but I'd like if the selected elements appeared outside of the textbox instead of inline the others. Any quick solutions? Or should I be looking at a custom coded attempt?
A bit brute but might be effective. Add your own chosen().change() event handler (as per their docs) to the texbox and simply move the <li> elements from the textbox to wherever you like. So something along the lines of:
$("#form_field").chosen().change(
// detach from source and append to destination
);
I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers
Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});
I have initialised and rendered the bootstrap-editable in select/select2 mode.
Now i want to modify the drop down item list through an event.
Currently i am reinitialising the editable DOM element and calling editable over the same DOM element again.But it has no effect.
Is the above possible? If so How to achieve the above?
Admin
in your groups.php ... return json encoded data.. from a php array
I'm building an application which has a D&D editor and deal with layouts (based on bootstrap) and multiple widgets.
Each widget has various parameters which are editable with a modal after clicking on the corresponding widget edit link.
I pass in the html generating the form elements for these params, base64 encoded through a data attribute like this:
Edit
I grab that string, decode it and append it to the modal box which spits out the form. This all works perfectly fine. As a sidenote, before I was just spitting out the form elements in a hidden div within each widget container, then grabbing it from there. The result was 75K elements in dom with a very few number of widgets and a 3 second delay on any click event, plus a generally sluggish interface (as you can imagine).
Upon clicking the save button for the widget, I need to get the html of the form elements that were appended to the modal WITH the updated values, encode it and update the widget data attribute with the new string.
That part works fine, but what doesn't is upon clicking the save button, it clones the modal form elements. That object which contains the originally appended form markup has the correct, updated values for each form element.
For example:
var tab_general = $('#modal-widget-CSS-Params-tab_general');
var test_update_value = tab_general.find('input[name="widget-videofakeout[1371898762][content]"]').val();
console.log(test_update_value);
The result is the proper updated value, so I know the it has the proper data that I want inside.
But if I create a new dom element with the by cloning this object and attempt to use jQuery's html method to get the new, updated html string of said clone, like so:
console.log($('<div>').append(tab_general.clone(true, true)).remove().html());
All I get is the original appended html with the original input values.
So my question is, is there any way to get the html string of a cloned object with the updated input values? Or am I going about this all wrong?
Here's a very basic example of what I'm trying to do, but as per the first comment below, it seems I'm totally off-base: http://jsfiddle.net/6LyMK/2/
My application is in ASP.net MVC3.
I have a table of elements. An element can have child elements, but a child element cannot. In the table, if the element has children, they are listed in a ul. A user can select the items in the list to remove it from that parent. When this happens, the element is removed from the list, and a partial view is rendered that makes a new row in the table for that element since it is no longer a child. Elements that are not children and don't have children of their own are able to be combined with other elements by selecting the element you want to combine it with from a dropdown. My problem is that when you remove an element from a parent, the dropdown created for the table row in the partial view does not have the functionality needed.
I think that this may be due to the fact that my javascript function to combine elements is in the $(document).ready(function () {...}); and that dropdown is no there on page creation.
is there a way to add my $('.combineDropdown').change(function () {...}); to an element that has been created dynamically?
You need to use bind, on, delegate or one (depending on what you need). This needs to be done each time you add a new element
Why use jQuery at all for this? You can acheive the same result by outputting the dropdown with the onChange html attribute pointing to a javascript function to be executed.
Example:
<select onChange="myFunction(this)"><option>...</option></select>