jQuery dialog input not working

Question

I'm creating a dialog, below, to receive a name to publish something under. On the third line I initialize the input field to the last name used. The problem is, if I enter a new value and click Publish, when the Publish function reads the value of the field it always gets this preset value again,rather than the new value entered. Does anyone see a problem? Thanks.

DEMO

publish_dialog$ = $('<div></div>').appendTo('body')
    .html("<div><h6>Publish as . . .</h6><input id='publish_name' type='text'></div>");
$('input#publish_name').val(g.last_publish_name);
publish_dialog$.dialog({
    modal: true, title: 'Publish as . . .', zIndex: 10000, autoOpen: true,
    width: 'auto', resizable: false,
    buttons: {
        Publish: function () {
            g.last_publish_name = $("#publish_name").val();  // get value entered
            publishPage(g.last_publish_name);
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
});

@franchez Your fiddle doesn't load jQuery UI, so there's no dialog. — Barmar
– Barmar, Commented Feb 11, 2014 at 13:12
@Barmar Yes I forgot it, can you please edit author post with your fiddle ? Will be quicker. — franchez
– franchez, Commented Feb 11, 2014 at 13:13

Community · Accepted Answer · 2017-05-23 12:00:29Z

2

jQuery dialogs are insane. They basically copy your html to another container and append that to the body. So if you use ids for your input elements, you can get very unpredictable behavior. I've had to dance a lot with it in the .net world. But if you don't need ids on your elements (which you almost always don't), try changing the way you access your inputs to classes. Then look at your DOM and see under what container it put your cloned fields and access them there. Check this answer for more insight: jQuery UI Dialog behaves unpredictably

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 11, 2014 at 13:14

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

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

Comments

xentia · Accepted Answer · 2017-03-21 09:45:24Z

0

I know it's old, but i trap in same issue and found another workaround. Just attach onkeypress event to input field like this:

<input type="text" id="cancel_descr" value="" onkeypress="document.getElementById('cancel_descr').value=this.value"/>

Looks strange, but that work for me - jQuery create copy of div container, and this event push all entered data back to original.

answered Mar 21, 2017 at 9:45

xentia

4351 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery dialog input not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related