Set value for dynamically created form elements in dynamic JQuery UI dialog using JQuery

Question

I'm trying to read data from a service (returns JSON object) and create an editable form in a dynamic JQuery UI dialog so the end user can use it to make changes and submit. The trouble is, when I get data from the server, I can't seem to set the data in the form. If I don't use a dialog, then everything works.

I created an associated JSFiddle in case it helps.

var dialog_box = $('<div></div>');
var animal = { kind : "Cat", has_whiskers : true };
var s = $('<select />', {
    "id":"s1"
}).append(
    $('<option />', 
        {
            value:"Dog", 
            text:"Dog"
        }
    ),
    $('<option />', 
        {
            value:"Cat", 
            text:"Cat"
        }
    ),
    $('<option />', 
        {
            value:"Bird", 
            text:"Bird"
        }
    )
);
s.appendTo(dialog_box);

// doesn't work
$('#s1 option:[value="'+ animal.kind +'"]').prop('selected', true);

var new_div = $('<div/>').html('<input type="checkbox" id="has_whiskers_checkbox" />');

new_div.appendTo(dialog_box);

(animal.has_whiskers) ? $("#has_whiskers_checkbox").prop("checked", true) : $("#has_whiskers_checkbox").prop("checked", false);

dialog_box.dialog({
     autoOpen: false,
     modal: true,
     buttons: {
         "OK": function() {
              console.log("OK Pressed");
              $( this ).dialog( "close" );
              $( this ).remove();
           }
        }
}).dialog('open');

The Alpha · Accepted Answer · 2012-04-11 22:52:28Z

2

$('#s1 option:[value="'+ animal.kind +'"]', dialog_box).prop('selected', true);

Example

answered Apr 11, 2012 at 22:52

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arcdegree Over a year ago

Thanks, just what I needed. Do you have supporting documentation from JQuery's website?

The Alpha Over a year ago

Welcome,and no but I've jQuery Novice to Ninja book and it helped me a lot.

Collectives™ on Stack Overflow

Set value for dynamically created form elements in dynamic JQuery UI dialog using JQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related