2012-08-08 64 views
0

我有3個按鈕,每個打開一個不同的窗體到對話框。按鈕顯示對話框確定,但我想在表單中使用jquery。任何時候,我嘗試將一些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"); 
      }); 

FORM

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

回答

1

嘗試這樣的事情

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; 
      }); 
     } 
+0

哇,我不能感謝你纔好!這在過去的一週裏一直在努力。現在它工作得很好,謝謝! – Codded 2012-08-14 08:45:56

0

不知道如果我明白你的問題,B你想爲每個按鈕右邊打開一個不同的對話框嗎?每個對話框都有不同的形式?

難道你不能在html中創建所有3種形式,然後創建對話框,每當你點擊一個按鈕時,你打開相應的窗體?

事情是這樣的: http://jsfiddle.net/v8bDe/44/

這僅僅是一個簡單的例子,很明顯,你必須確保你沒有使用相同的ID元素(我只是複製形式的2倍)。

此外,日期選擇器工作正常,你可以在的jsfiddle鏈接

0

如果我得到你的問題就在您的問題似乎是,你通過AJAX加載的形式,並希望一些jQuery的東西被應用到見新加載的元素。 如果你在你的元素被加載之前聲明你的jquery,那麼聲明將不起作用,因爲jquery只能在dom上已經存在的元素上工作。

該解決方案是使用$。對()函數: http://api.jquery.com/on/

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