如何使用Twitter的引導

時使用jQuery我從Twitter的引導是如下如何使用Twitter的引導

 <!-- Name Edit div --> 
<div id="form-content" class="modal hide fade in" tabindex="-1"> 
    <form name="form" action="<c:url value="/editname" />" method="post"> 
    <div class="modal-header"> 
     <h4>Edit Name</h4> 
    </div> 
    <div class="modal-body"> 
    <div class="control-group"> 
     <div class="controls"> 
      <ul class="nav nav-list"> 
      <li class="nav-header">First Name</li> 
      <li><input type="text" placeholder="First Name" name="firstName" id="firstName" class="input-xlarge help-inline"></li> 
      <li class="nav-header">Last Name</li> 
      <li><input type="text" placeholder="Last Name" name="lastName" id="lastName" class="input-xlarge help-inline"></li> 
     </ul> 
     </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button id="submit" class="btn btn-success">Update</button> 
     <button class="btn" data-dismiss="modal" >Close</button> 
    </div> 
    </form> 
</div>

和我的AJAX腳本像如下模型對象來獲取表單對象：

$(function() { 
    //twitter bootstrap script 
    $("button#submit").click(function(){ 
     var $form = $(this).closest("form").attr('id'); 
     $.ajax({ 
      type: $form.attr('method'), 
      url: $form.attr('action'), 
      data: $form.serialize(), 
      success: function(msg){ 
       $("#thanks").html(msg); 
       $("#form-content").modal('hide'); 
      }, 
      error: function(){ 
       //alert("failure"); 
      } 
     }); 
    }); 
});

但該請求不會觸發。我檢查了螢火蟲，它看起來不能獲得表單對象，並且請求不會發送給控制器。我怎樣才能使它工作。將來我會在同一頁面中使用多種表單。

來源

2013-02-20 Saurabh Kumar

我會建議你使用.submit()功能：

$(function() { 
    $('#form_id').submit(function(e) { 
     e.preventDefault(); 
     var form = $(this); 
     $.ajax({ 
      type: form.attr('method'), 
      url: form.attr('action'), 
      data: form.serialize(), 
      success: function(msg){ 
      $("#thanks").html(msg); 
      $("#form-content").modal('hide');  
      }, 
      error: function(){ 
      //alert("failure"); 
      } 
     }); 
    }); 
});

設置窗體ID的東西，改變javascript來匹配

您還可以添加一個data-ajax="true"所有要提交的表格然後使用：

var forms = $('form[data-ajax="true"]'); 
forms.submit(function(e){ 
    e.preventDefault(); 
    // do ajax 
});

來源

2013-02-20 11:09:39 oleron

<form name="form" action="<c:url value="/editname" />" method="post">

有一件事是，你沒有給表單的ID。

var $ form = $（this）.closest（「form」）。attr（'id'）;

如果id存在（如果你通過代碼添加它），那麼上面的$form將包含表單的id。這是一個字符串。

因此，使用這樣的，

var $form = $(this).closest("form");

代替

var $form = $(this).closest("form").attr('id');

來源

2013-02-20 11:01:33

我修改了它，但我得到了這個錯誤「客戶端發送的請求在語法上不正確。」我正在使用Spring – 2013-02-20 12:08:59

你的形式不具有id屬性。給它一個，它可能會工作。 so

var $form = $(this).closest("form").attr('id');

不會返回值。

來源

2013-02-20 11:03:29 Stevo

所有的HTML表單輸入控件（輸入，選擇，按鈕等）都有一個對其所有者的引用。這使得有可能做到：

var $form = $(this.form);

但我認爲oleron's使用submit事件的回答是這樣做的正確方法。

來源

2013-02-20 12:14:29 anddoutoi

如何使用Twitter的引導

回答

相關問題