Can't set value of input field inside jquery UI dialog

Question

I'm trying to change the value of input field with jquery. The input field is inside UI dialog box. It's part of my zend form

<input name="formulaCategory" id="formulaCategory" value="" size="40" type="text">

I have a link calls for a function that shows the dialog and I want it to change the value of this input as well.

function editFormulaCategoryDialog() {

    $("#edit-formula-category-dialog").dialog({show: "slide"});
    $("#formulaCategory").val('test');
}

Why it doesn't work?

If I put the input code somewhere else on the page outside dialog box and click the same link the dialog box shows up and the value of input field outside dialog is changed as expected.

thecodeparadox · Accepted Answer · 2012-09-12 15:30:26Z

4

Try this:

function editFormulaCategoryDialog() {

    $("#edit-formula-category-dialog").dialog({
        show: "slide",
        create: function() {
            $("#formulaCategory").val('test');
        }
    });
}

Try with a callback after dialog box create. You can also use open event callback.

answered Sep 12, 2012 at 15:30

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

Comments

Aravind.HU · Accepted Answer · 2012-09-12 15:30:06Z

3

Jquery UI on run time removes the all document objects and puts it out side the DOM at this time none of the objects will be accessible for you . Thats the default behavior of all Jquery UI plugins . So you have to bear that some how by changing the way you are using it .

And also there is no way to get dialog to leave your elements alone as it would be impossible to properly display the dialog. You will have to have to use the dialog callback methods to dynamically populate hidden fields inside your form, or something similar if you want to use this pattern of showing part of your form in a dialog.

answered Sep 12, 2012 at 15:30

Aravind.HU

9,4825 gold badges42 silver badges53 bronze badges

1 Comment

Aravind.HU Over a year ago

I have just given the Answer for your why ? in the posting

Vedran · Accepted Answer · 2014-01-12 17:49:30Z

2

I needed similar solution, tried using setTimeout function with small latency. It worked for me.

function myCreateDialogFn(){
    //.....create jQuery Dialog here;

    setTimeout(function () {
        $("#edit-formula-category-dialog").find('input').each(function () {
            if (this.name=="formulaCategory"){
                // your code here
            }
        }
    }, 200);
}

answered Jan 12, 2014 at 17:49

Vedran

211 bronze badge

Comments

Shawn · Accepted Answer · 2019-04-16 15:34:50Z

0

I do it this way instead of using an arbitrary timeout. I have function that polls for the existence of the element every 250ms.

// wait for element to exist before populating
function waitForElement(elementPath, callBack){
  window.setTimeout(function(){
    if($(elementPath).length){
      callBack(elementPath, $(elementPath));
    }else{
      waitForElement(elementPath, callBack);
    }
  },250)
}

then I call it like this

  waitForElement("#idOfDialog",function(){
            var ordered=$("#input1).val();
            var price=$("#input2").val();
            var vendor=$("#input3").val();
.... or set value
             $("#input4").val("test");

and that seems to solve the problem

answered Apr 16, 2019 at 15:34

Shawn

3,1775 gold badges31 silver badges57 bronze badges

Collectives™ on Stack Overflow

Can't set value of input field inside jquery UI dialog

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related