CODEWITHSUNDEEP
jqueryajaxjquery-ui
Eon
Eon

Reputation: 3974

How to set the value of an element in JQuery UI Dialog

I currently reside with a problem where I need to pass a value to a Jquery UI Dialog, but I have no idea how. I have checked around for documentation everywhere, but nothing seems to work. This is what I have (and have tried)

Actual Dialog:

    <div id="amountDialog" title="Add to Basket">
        <table style="text-align: center">
            <tr>
                <td colspan="2">
                    <p id="productAdd"></p> <!-- need to set this value -->
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="modalInputAmount" />
                </td>
                <td>
                    <p id="maxAmt">Maximum Amount: </p>
                </td>
            </tr>
        </table>
    </div>

Dialog Options:

$( "#amountDialog" ).dialog({ 
                        autoOpen: false, 
                        width: 'auto',
                        modal: true,
                        buttons : {
                            "OK" : execute
                        },
                        open : function (event, ui) {
                            $("#productAdd").val('How many [' + item + ']\'s do you wish to add to the basket?"'); <!-- item is the global variable describing which item is added to the basket -->
                        }
                    });

Opening code

    $("#amountDialog" ).dialog("open");

I won't bother pasting the execute code here as I know that works, I can get the value from the textbox in the modal dialog. My concern however is, how do I set the value of the #productAdd paragraph when the modal dialog opens?

Just need to put this out there again, I am still a newbie with JQuery.

Upvotes: 1

Views: 8479

Answers (2)

Seth Bro
Seth Bro

Reputation: 2555

Your issue here is that #productAdd is a paragraph (<p>). jQuery's val() method applies only to form fields. Use html or text instead. E.g. $('#productAdd').text("How many ...")

On a side note, you want to reconsider how you're determining #productAdd's new content. The parent().parent().find('specific thing') you have now means your script will break as soon as the HTML is changed.

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

should be html() not val(), change:

$("#productAdd").val(...)

to

$("#productAdd").html(...);

Upvotes: 4

Related Questions