Bootstrap popover not showing jQuery text input changes made before loading

Question

I have a bootstrap 2 site that I want a simple form to appear within a popover.

The form is showing correctly, but if I change the .val of any text inputs before loading the popover, the changed text doesn't appear.

$('#txtOne').val('My New Text');
$('#txtTwo').val('My New Text');

$('.popover-markup>.trigger').popover({
    html: true,
    title: function () {
    return $(this).parent().find('.head').html();
},
content: function () {
    return $(this).parent().find('.content').html();
}
});

http://jsfiddle.net/dzr521qs/196/

The text input within the popover should contain "My New Text", however it still shows the default text of "My Default Text"

What am I doing wrong?

Answer 1

jQuerys $(element).val() does not work on invisible elements, i.e having display:none.

But you can always set the value of the invisible <input> using attr() :

$('#txtTwo').attr("value", "my all new text");

now it works -> http://jsfiddle.net/k7dunxn4/