3つのボタンがあり、それぞれが異なるフォームをダイアログに開きます。ボタンにはダイアログが表示されますが、フォーム内でjqueryを使用したいと思います。入力内のデータを操作するためにフォームにjquery機能を含めようとすると、機能しなくなります。
eg using: $("#doc").datepicker(); //dosnt seem to work
//OR
var $output = $("#length_of_service");
$("#doc").keyup(function() {
var value = parseFloat($(this).val());
$output.val(value*2);
});
なぜそれが機能しないのかについて誰かが何か考えを持っていますか？
ボタン
<a href="business_form.php" class="menubutton" id="add_business" title="Add Business Entitlement">Add Business Entitlement</a>
<a href="line_managers_form.php" class="menubutton" id="add_line_managers" title="Add Line Manager">Add Line Manager</a>
<a href="divisions_form.php" class="menubutton" id="add_divisions" title="Add Division">Add Division</a>
$("#add_business")
.button()
.click(function() {
$("#business-form").dialog( "open" );
});
$("#add_line_managers")
.button()
.click(function() {
$("#line-managers-form").dialog( "open" );
});
$("#add_divisions")
.button()
.click(function() {
$("#divisions-form").dialog( "open" );
});
形
<div>
<form id="business_form" action="insert_business_entitlement.php" method="POST" class="cmxform">
<fieldset style="float:left;">
<legend><p class="subheadertext">Employee</p></legend>
<table width="100%" border="0">
<tr>
<td width="100px" valign="middle"><label for="acyear">Start of year:</label></td>
<td valign="top">
<select id="acyear" name="acyear">
<option value="20120801">01/08/2012</option>
<option value="20130801">01/08/2013</option>
<option value="20140801">01/08/2014</option>
<option value="20150801">01/08/2015</option>
</select>
</td>
<td width="100px" valign="middle" align="right"><label for="length_of_service">Service length:</label></td>
<td width="100px" valign="top" align="right"><input type="text" name="length_of_service" id="length_of_service" disabled="disabled"/></td>
</tr>
<tr>
<td width="100px" valign="middle"><label for="employee">Name:</label></td>
<td valign="top"><input type="text" name="employee" id="employee" class="required"/></td>
<td width="100px" valign="middle" align="right"><label for="band">Band:</label></td>
<td width="100px" valign="top" align="right"><input type="text" name="band" id="band" disabled="disabled"/></td>
</tr>
<tr>
<td width="100px" valign="middle"><label for="doc">Commencement:</label></td>
<td valign="top"><input type="text" name="doc" id="doc" class="required"/></td>
<td width="100px" valign="middle" align="right"><label for="new_entitlement">New entitlement:</label></td>
<td width="100px" valign="top" align="right"><input type="text" name="new_entitlement" id="new_entitlement" disabled="disabled"/></td>
</tr>
<tr>
<td width="100px" valign="middle"><label for="ftpt">FT/PT:</label></td>
<td valign="top">
<select id="ftpt" name="ftpt">
<option value="FT">FT</option>
<option value="PT">PT</option>
<option value="SNR_MAN">SNR MAN</option>
</select></td>
</tr>
<tr>
<td width="100px" valign="middle"><label for="weekly">Weekly Hours:</label></td>
<td valign="top" colspan="3"><input type="text" name="weekly" id="weekly" class="required"/></td>
</tr>
<tr>
<td width="100px" valign="middle"><label for="entitlement">Entitlement:</label></td>
<td valign="top" colspan="3"><input type="text" name="entitlement" id="entitlement" class="required"/>
<select id="units" name="units" disabled="disabled">
<option value="days">Days</option>
<option value="hours">Hours</option>
</select>
</td>
</tr>
<tr>
<td width="100px" valign="middle"><label for="division">Division:</label></td>
<td valign="top" colspan="3">
<select id="division" name="division">
<?php
$connection = mysql_connect("localhost", "***", "***") or die ("Unable to connect!");
mysql_select_db("holidays", $connection) or die ("Unable to select database!");
$divisions_result = mysql_query("SELECT * from divisions");
while($divisions = mysql_fetch_array($divisions_result)) {
echo'<option value="'.$divisions['name'].'">'.$divisions['name'].'</option>';
}
?>
</select>
</tr>
<tr>
<td width="100px" valign="middle"><label for="line_manager">Line Manager:</label></td>
<td valign="top" colspan="3">
<select id="line_manager" name="line_manager">
<?php
$line_managers_result = mysql_query("SELECT * from line_managers");
while($line_manager = mysql_fetch_array($line_managers_result)) {
echo'<option value="'.$line_manager['name'].'">'.$line_manager['name'].'</option>';
}
?>
</select>
</tr>
</table>
<br/>
</fieldset>
</form>
</div>
JS
$(document).ready(dialogForms);
function dialogForms() {
$('a.menubutton').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {
submitFormWithAjax($(this).find('form'));
$(this).dialog('close');
},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 600,
height: 500,
show: "fade",
hide: "fade"
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script',
success: function(data){
$(this).dialog('close');
// Refresh table
}
});
return false;
}