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
Related
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')
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/
I am loading the jstree using li and ul tags . Now I want to remember the selections which users has made , and want to store it in some json to make use of it later.
For example jstree is loaded with some values after that , I want to reload the same tree with the values which are not selected then tree becomes shorter and will show only those values which are not selected , then again user switches back to the full view by clicking some button , now here I want to assure that the values selected by user when in shorter view are also present in full view.
My way of remembering the selections is something like , go on and store the id's of your nodes if you want to use in future and just hide the id's which you want to hide using style , display:none.
I hope this helps.
I want to display the selected item info which is selected From the drop down in, the same html page without dong any action.How to know which item is selected and how to assign that selected value in a variable in html.
You can use jQuery's onchange event handler to detect when choice is changed and also get the value. There is good example on the .change() api page.
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>