0

背景

好的,我有一个独特的 Web 应用程序,在阅读了 SO 和其他一些很棒的问题之后,我仍然在摸索如何完成这一壮举。最终结果:我必须在单击链接后动态填充输入字段的表单中添加一个取消按钮...这是一个正在激活的第三阶段功能,并且必须能够仅在动态表单(因为同一页面上还有其他模态表单窗口)...请按照以下流程进行操作。任何建议都非常感谢。

最终输入表单受以下因素影响的步骤

1) User clicks on a link.  
2) Modal window opens with dynamically populated fields
3) AJAX/JSON method pulls information through mysql
4) div's and spans populated inside modal window
5) Edit links are added for corresponding fields... Registers event handler to listen to user either clicking "edit", or closing modal window.
6) If user clicks edit, input fields appear, as well as a submit button.
7) on submit, 
   a)  deactivate all other event handlers on other "edit" links
   b)  send ajax/json
   c)  activate all other event handlers
   d)  hide all input fields and 'reset' the modal window for next item edit

html

<form id="updation_station" action=''>
<div class="view_info">
    Test 1:<span class="view_test_1"></span>
    <a href="#" class="edit_link" data-link="edit_test_1_input" data-column="column_1">Edit</a>
    <span class="edit_test_1_input"><input type='text' name='test_1_input' /></span>            
 </div>

 <div class="view_info">
     test_2:<span class="view_test_2"></span>
    <a href="#" class="edit_link" data-link="edit_test_2_input" data-column="test_2">Edit</a>
    <span class="edit_test_2_input"><input type='text' name='test_2_input' /></span>            
  </div>                        

   <input type="submit" name="update" id="change_btn" value="Save Changes" />
   <input type="submit" name="cancel" id="cancel_btn" value="Cancel" />
</form>

为了完成我所需要的,我运行$('.edit_link').on('click', doUpdate);执行更新程序的功能...如下

function doUpdate(e) {
// show input fields, sets variables, etc....    

    // Turn off the event handler for all the other edit links
    $('.edit_link').not(this).off('click', doUpdate);

    //Now open the listener for the submit form
        $('#updater').submit(function() {
              //Now close the editing fields
                      //closes edit fields, etc...
                  $.ajax({//do something    });
             //Now reset the event handlers so the links are re-activated regardless of what was clicked
        $.ajax().always(function() {
             $('.edit_link').on('click', doUpdate);
        });
        return false;  
        });
// hides input fields, etc.... and tells client to go on merry way     

};

不幸的是,由于其他一些省略的功能的复杂性,我非常厌倦改变$('#updater').submit(function() {动作本身......我宁愿只向它附加功能和/或触摸 html 部分,例如.. if ($submitted_value == "cancel") { //cancel} else {//act},但这似乎是一个问题,因为任何提交按钮本身都会激活表单本身。

有人有想法么?片段这可能有帮助吗?希望 SO 的专家能够更好地指导我如何解决这个问题......提前谢谢你。

4

1 回答 1

1

可能不是最佳实践..但可能有效

anonymous call
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().hide()" />

anonymous if two elements deep
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().parent().hide()" />

hide by div id or class
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(".formDiv").hide()" />
于 2013-05-01T22:02:51.643 回答