We Keep Coding

Content added to DevExtreme dxPopup not working unless Popup has been shown already

I am using a DevExtreme Popup that will show whenever a user selects an option from a SelectBox. The Popup will identify placeholder values inside the selected value and present the user options to replace them with.
When the SelectBox value changes, I look for placeholders and append a dxSelectBox for each placeholder to a div valuesList inside the popup.
var matches = selectedValue.match(templateRegex);
if (matches.length > 0) {
matches.forEach(function (m) {
var newDiv = $("<div/>");
newDiv.dxSelectBox();
newDiv.appendTo("#valuesList");
});
$("#myPopup").dxPopup("instance").show();
}
The problem is the first time this runs, it doesn't append anything to the Popup content. Using the debugger I confirm that the code does run, but nothing gets added. The popup shows with no content. However, if I select the value again in the SelectBox, it runs and the popup gets new content appended to it as it should, as well as all subsequent changes. It's only the first time that doesn't work.
I confirmed this by adding this to the JavaScript:
$(document).ready(function () {
$("#myValuePopup").dxPopup("instance").show();
$("#myValuePopup").dxPopup("instance").hide();
});
With that added, content is correctly appending the first time I select a new value from the SelectBox, confirming that it only works if the Popup has already been shown. This seems to be a sloppy solution though, and it requires adding a bunch of checks to the onHidden event handler for the Popup since some variables it uses aren't initialized yet, so I'd rather not have to resort to it.
Is there another way to pre-initialize the dxPopup? I couldn't find anything going through the documentation. And the Popup's _initialized property is true even before being shown the first time.
Update:
The dxPopup is created using Razor inside my View:
#(Html.DevExtreme().Popup()
.ID("myPopup")
.OnHidden("myPopupClosed")
.ContentTemplate(
#<text>
<div id="valuesList">
</div>
</text>
)
)

jQuery clone misunderstanding

I'm not understanding this cloning process... this is what's happening, there are four pictures, three clicks, first photo is the initial state.
In the third picture there are two boxes, that's fine, but rather than each box having one project name input and add task button, there are two in the first box, and normal in the second box. Click the button again and it becomes 3:2:1, next click it would be 4:3:2:1, etc... I don't want that. I just want boxes to be added with one piece per box.
code
function addProject() {
$(project).clone().appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(".project");
$(addTaskButton).clone().appendTo(".project");
}

Your problem is your appendTo it appends the element to all elements in the set of matched elements so everything with the class "project". for more information on it try looking at the jquery appendTo documentation. to fix it try something like this
function addProject() {
var newProject=$(project).clone();
newProject.appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(newProject);
$(addTaskButton).clone().appendTo(newProject);
}
using the return value of $(project).clone() allows you to grab only the new project rather than all of the projects that currently exist

Adding HTML element after the dataset is brought in

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')

Get Updated HTML String After Clone with jQuery

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/

How can I put masked date input in a dynamically created text field?

I am using jquery date input plugin from here
I call the function inside the html page like this
jQuery(function($){
$("#date").mask("99/99/9999");
});
It works fine in every fields where we just have to specify the id of the element.
I have a table which creates table rows of html elements dynamically, I want the date input plugin to apply date mask in the text box having mfd date.
Since the id keeps changing dynamically as the row length is being added one by one to the id to make the id unique.
How can i use the masked date input inside the dom table ?

You could do the work inside your insSpec function, where you have both the ID and the markup at your disposal.
Without using the ID:
$(f).find('input[name^="mfd_date"]').mask('99/99/9999');
Using the ID:
$(f).find('#mfd_date'+rl).mask('99/99/9999');
And since that cell really only has one input, you only need to look for the input
$(f).find('input').mask('99/99/9999');
Or you could emit an event after the new row has been created and attach the mask to the last row in the table always, or even pass the last row as data to the event listeners.

It is a good idea to use a permanent class. If you use ajax, maybe you need to use callback function to wait for a code loaded before you apply the mask. You can also use a bordering div or span tag around your input tag with the permanent id. If you have constant amount of input in form you can use
$('table input[type=text]').eq(n)
,where n in eq(n) is item number in the sequence of inputs