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/
Related
I got ten elements and I store them by querySelectorAll or getElementsByClassName(which return live HTML collections). Imagine they're all having the same class name, I got a PHP function to filter them, so currently, only three of them are generated by PHP once the page is loaded, as I init the filter function, the other elements then only being generated.
But the variable is still storing the initial dom elements which are the three elements originally shown before the filter. Now how do I update the variable so that they include the new elements that are newly generated like after the filter button is clicked?
I have a piece of code that grabs the value from a summernote input area and places it into another element (#intro_one) within an iframe on my page.
var intro1 = $('#intro-summernote').code();
previewContent.find('#intro_one').html(intro1);
This works fine, however i am also trying to insert the same value within another element.
previewContent.find('#intro_one_mobile').html(intro1);
This one does not work. I have tested populating the "#intro_one_mobile" with dummy data and it inserts correctly, when trying to reuse (insert) the summercode value into more than 1 element, it doesn't work.
Any input here would be great, thanks
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
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')
lets say i've a form and in this form i would like to duplicate properties elements. now every property element is a div which contains some input elements. every time the user click on a button "add properties" i would like it to create another instance of this properties element
the question is where should i store these pre-made and yet to be shown to the user elements, in a way it would be easy to later modify it?
i'm using JS with jquery.
Will at least one property element already exist on the page?
If so, simply select it, clone it and store it for later use.
var el = $('.your-element').html().clone();
Then later you can make copies of it.
If your element doesn't exist on the page yet. You can still put it on the page in a div that isn't displayed and do the same strategy as above. Or use a "template" format such as jQuery templates.
I store them in a hidden template div at the bottom of the form like so:
<div id="field_template" style="display:none;">
<input type="text" name="prop_tpl" id="prop_tpl">
</div>
When the time comes to display it, I duplicate it in jQuery and set the name and id properties to prop_1 or prop_2 etc based on a counter of added fields.