have a calendar with individual divs for each day. Each div has a unique ID. A modal dialog pops up when the user clicks edit image. The user can set the payable hours in the modal dialog and I want those hours that are entered in the dialog box to be set in the correct div/day of the month.
I am having trouble getting the correct id and setting the text value in the form for the corresponding day.
$list_day = day of month
Clicking on the image
This HTML loops once for each day of the month:
<td class='calendar-day' style='background-color:#BDE255' >
$name = 'payable'.$list_day;
$calendar.="<p id = ' $name' value = '0' style= 'color:blue; margin:8px;'>TEST</p>";
<!-- dialog box below-->
<span class='helpButton'><img id='Button' value='$name_time_in' src='/sis/classes/b_edit.png'/></span>
<div class='payableDialog'> <!-- The dialog box (hidden until clicked)-->
<span class='payableDialog'>
<p Day of Month: $list_day></p> <!-- Shows the day in the dialog box -->
<div class='payableDialog'><input size = '7' name='input_payable' id = 'input_payable' type = 'text' /> </div> <!-- user enters the payable hours in the dialog box-->
</span>
</div>
</td>
The Javasript
$('.payableButton').each(function() {
$.data(this, 'dialog',
$(this).next('.payableDialog').dialog({
autoOpen: false,
modal: true,
title: 'Enter time for this day',
height: 300,
width: 350,
// position: [200,0],
draggable: false ,
buttons: {
// SAVE HOURS BUTTON ON DIALOG BOX
"SAVE HOURS FOR THIS DAY": function() {
var bValid = true;
// if data is ok, send it to the calendar
if ( bValid ) {
// THIS IS WHERE I GET STUCK setting the TEXT in the parent form. How do I know what DAY the user clicked in so I know what text element to set??
$( this ).dialog( "close" );
}
},
// CANCEL BUTTON ON DIALOG BOX
Cancel: function() {
$( this ).dialog( "close" );
}
},
// CLOSE BUTTON ON DIALOG BOX
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
})
);