0

我有 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;
    }
4

3 回答 3

2

尝试这样的事情

 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"
              });

                 // do initialization here
                 $("#doc").datepicker();
                 var $output = $("#length_of_service");
                 $("#doc").keyup(function() {
                   var value = parseFloat($(this).val());
                   $output.val(value*2);
                 });

            }, 'html');
            return false;
          });
        }
于 2012-08-14T06:50:59.143 回答
0

不确定我是否理解您的问题,但您想为每个按钮打开一个不同的对话框吗?而且每个对话都有不同的形式?

您不能在 html 中创建所有 3 个表单,然后创建对话框,并且每当您单击按钮时,都会打开相应的表单?

像这样的东西:http: //jsfiddle.net/v8bDe/44/

这只是一个简单的例子,显然你必须确保你没有具有相同 id 的元素(我只是复制了 2 次表单)。

此外,您可以在 jsfiddle 链接中看到 datepicker 工作正常

于 2012-08-10T14:50:28.847 回答
0

如果我的问题是正确的,那么您的问题似乎是您通过 ajax 加载表单并希望将一些 jquery-stuff 应用于新加载的元素。如果在加载元素之前声明 jquery,则声明将不起作用,因为 jquery 只能对 dom 上已存在的元素起作用。

解决方案是使用 $.on() 函数: http ://api.jquery.com/on/

示例:http: //jsfiddle.net/7gQ32/

于 2012-08-11T13:09:04.750 回答