jQuery set .val() for text input fields inside a dialog

Dear Experts:

I'm stumped and I fear this is going to be one of those things where I'm over looking the obvious. None the less, I find myself starting to guess and could really use clear eyes and expert advice.

I have a click event that is triggered by a user clicking on a row of a table. I grab some data from that row, and open a modal dialog that has a simple form that is being loaded from an external file. I have created two vars with data from the clicked row and I would like to present in two of the fields within the form in the dialog when it is presented. I have tried every selector I can think of. I have confirmed the vars contain the correct data. I have also tried simply adding .val('Hello World'). I have had no luck.

Please consider the following snippets. One is the js with the click event code, the other is the contents of the file I am loading for the dialog.

$('#tbl_payments').on('click', '#tbl_payment_schedule tr', function() {

	//ignore row if certain condition exists
    if($(this).closest('tr').children('td:eq(6)').text() > 0) {
        return false;
    }
	
	// two vars with data I want to present on form in dialog
	var startingPaymentID     = $(this).closest('tr').attr('id');
	var startingPaymentNumber = $(this).find('td').eq(0).text();
    
	var div = $('<div>');
	div.load('resources/payment_recalc.php #recalc_title', function() {
		
		$dialog = $('<div id="div_payment_recalc"></div>')    
			.load('resources/payment_recalc.php #div_recalc_form')
			.dialog({
				autoOpen: false,
				width: 400,
				height: 250,
				modal: true,
				resizable: false,
				title: this.innerText,
				buttons: [
					{
						text: "Run",
						class: 'custom-modal-btn',
						click: function() {
							var form_data = $('#form_recalc').serializeArray();
							form_data = JSON.stringify(form_data);
							$.post('mod/set_loan_payments.php', {'payLoad' : form_data});
							getLoanInfo();
							$dialog.dialog('close');
						}
					},
				],
				open: function(event, ui) {
					$("#starting_payment_number").val(startingPaymentNumber);
					$("#starting_payment_id").val(startingPaymentID);
				}
			
			})
			
			$(".ui-dialog").find(".ui-widget-header").css("background", "#76A5AF");
			$dialog.dialog('open');
		
	});
    
}); 


//Below is what is in resources/payment_recalc.php for the .load
//please excuse the inline styles. Haven't had a chance to create classes and
//move them to css file yet.

<div id="div_recalc_form" style="text-align: left; font-size: 60%;">

    <form id="form_recalc" name="form_recalc">

        <div style="float: left; width: 150px;">
            Starting Payment Number:
        </div>
        <div style="float:left;">
            <input id="starting_payment_number" type="text" name="starting_payment_number" value="" />
        </div>
        
        <div style="clear: both; height: 10px;">&nbsp;</div>

        <div style="float: left; width: 150px;">
            Starting Payment ID:
        </div>
        <div style="float:left;">
            <input id="starting_payment_id" type="text" name="starting_payment_id" value="" />
        </div>

        <div style="clear: both; height: 10px;">&nbsp;</div>
        
        <div style="clear: left; float: left; width: 150px;">
            New Payment Amount:
        </div>
        <div style="float:left;">
            <input id="new_payment_amount" type="text" name="new_payment_amount" value="" autofocus />
        </div>

        <div style="clear: both; height: 10px;">&nbsp;</div>

        <div style="clear: left; float: left; width: 150px;">
            For Number Of Payments:
        </div>
        <div style="float:left;">
            <input id="for_number_of_payments" type="text" name="for_number_of_payments" value="" />
        </div>

    </form>

</div>

<p id="recalc_title">
    Payment Recalculation
</p> 

Open in new window


Everything else is working as expected. I just can't get the variable values into the input fields.

Thank you in advance for any assistance you can offer.

Best,
--Mike
mwheeler_fsdAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
on line 16, provide a callback function to .load() and within the callback launch the modal using $(this).dialog(...).  I suspect that when your dialog pops up, the load has not finished yet, so open() can't find #starting_payment_number.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mwheeler_fsdAuthor Commented:
Beautiful hielo!

That worked perfectly. Not once did it occur to me that I was blowing past the completion of the load. I will keep this in the back of my head from here on out.

Thank you so much!

Best regards,
--Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.