2017-02-03 44 views
0

我正在一個spring mvc servlet項目中工作。 我那裏有2個下拉菜單確認PopUp(是或否)Spring MVC Servlet響應對象和處理是和否事件

假設A)一個月形式:B)年份:

和一個提交按鈕。

現在,當用戶兩個下拉選擇值,然後點擊提交:控制進入控制器GenerateForm的的onsubmit功能。 在這裏,我做了一個數據庫查詢,並假設查詢給了我一個值,我存儲在變量x中。 現在

if (x>0){ 
    give a confirmation popup in UI ASKING user -> 
    Do you want to continue ? 
    if(userClicks Yes){ 
    delete database value 
    continue with normal flow ; 
    }else{ 
     return null ; 
    } 
} 
else{ 
    continue with normal flow ; 
    save into database 
} 

請幫我我應該如何創建此確認彈出?此時控制器在控制器中。請參閱下面的代碼框架。

代碼骨架:

模型類:

public class Report { 
    private String month; 
    private String year; 
    //getter setter here 
} 

控制器類:

public class GenerateForm extends BaseFormController { 

    // declaration of other class objects here 

    public void afterPropertiesSet() { 
     // assert calls here 
     super.afterPropertiesSet(); 
    } 

    protected Object formBackingObject(HttpServletRequest request) throws Exception { 

     Report rp = (Report)createCommand(); 
     return rp; 
    } 

    protected ModelAndView onSubmit(HttpServletRequest request, HttpServletResponse response, Object command, BindException errors) 
       throws Exception { 
     Report rp = (Report) command; 

     x = Call_to_Manager_Class(rp); // Manager class in turn call DAO class 

     if (x>0){ 
      give a confirmation popup in UI ASKING user -> 
      Do you want to continue ? 
      if(userClicks Yes){ 
       continue with normal flow ; 
       return new ModelAndView(getSuccessView()); 
      }else{ 
       return null ; // stay on same page 
      } 
     } 
     else{ 
      continue with normal flow ; 
      return new ModelAndView(getSuccessView()); 
     } 

    } 

    protected void initBinder(HttpServletRequest request, 
      ServletRequestDataBinder binder) throws Exception { 

     // binding done here 
    } 

    protected Map referenceData(HttpServletRequest request, Object command, 
      Errors errors) throws Exception { 
     //code related to reference data here 
     return data; 
    } 

} 

.xml文件

<bean id="generatForm" class="com.web.controller.GenerateForm"> 
    <property name="commandName" value="generate" /> 
    <property name="commandClass" value="com.domain.Report" /> 
    formview,success view and cancel view defined here similarly 
</bean> 

所有的bean都被正確定義。控件將發送到onSubmit函數。現在請幫我如何在用戶界面中生成確認彈出窗口,要求用戶按是或否,並相應地處理它

編輯: 我做了如下改變的建議,但形式也越來越與Ajax請求我雖然正確,也讓Ajax響應確認彈出一起提交。如何防止表單被提交,我希望它僅在用戶在確認彈出框中按下確定提交。

$(document).ready(function() { 
$('#myForm').submit(function (ev) { 
     console.log(1); 
     var year = $('#year').val(); 
     var month = $('#month').val(); 
     console.log(year); 
     console.log(month); 
     $.ajax({ 
      type: "GET", 
      url: 'ActionServlet', 
      data: "year=" + year + "&month=" + month, 
      success: function (data) { 
       console.log(data); 
       $('#ajaxDiv').text(data); 
       var result= parseInt(data, 10); 
       if (result > 0) { 
        if(!confirm("you sure about that?")){ 
         ev.preventDefault(); 
        } 
       } 
      },error : function(e) { 
       alert('Error: ' + e); 
      } 
     }); 
}); 
}); 

編輯2 即使我寫e.preventDefault()在開始時,AJAX調用將仍然是異步的,並且由所述時間Ajax響應到達該功能流程結束。我試過這樣做。

$(document).ready(function() { 
    $('#myForm').submit(function (ev) { 
      ev.preventDefault(); 
      console.log(1); 
      var year = $('#year').val(); 
      var month = $('#month').val(); 
      console.log(year); 
      console.log(month); 
      $.ajax({ 
       type: "GET", 
       url: 'ActionServlet', 
       data: "year=" + year + "&month=" + month, 
       success: function (data) { 
        console.log(data); 
        $('#ajaxDiv').text(data); 
        var result= parseInt(data, 10); 
        if (result > 0) { 
         if(confirm("you sure about that?")){ 
          //$('form').unbind('submit').submit(); 
          $('#myForm').submit(); 
          //$(this).unbind('submit').submit(); 
          //$('#submit').click(); 
          //$(this).trigger(submit); 
          //$(this).submit(); 
         } 
        } 
       },error : function(e) { 
        alert('Error: ' + e); 
       } 
      }); 
      console.log(2); 
    }); 
    }); 

但是,一旦形式從ev.preventDefault()提交阻止,我不能再次提交我的確認彈出的基礎上。我嘗試了很多方法。如果我刪除我的阿賈克斯電話

$(document).ready(function() { 
     $('#myForm').submit(function (ev) { 
       ev.preventDefault(); 
       console.log(1); 
       var year = $('#year').val(); 
       var month = $('#month').val(); 
       console.log(year); 
       console.log(month); 
       $(this).submit(); 
       console.log(2); 
     }); 
     }); 

它進入遞歸調用。我可以使用一些變量來阻止遞歸,但如果我把這個內部確認,它不會再次調用提交事件。

<div id="pageButtons"> 
    <button name="_submit" id="submit" > Generate</button> 
</div> 

這是我的提交按鈕配置。 請幫我解決這最後一個問題。

編輯3

我想最後的代碼的建議,它給了我這個控制檯:

Uncaught TypeError: form.submit is not a function !! 

然後爲提交按鈕我刪除了ID = 「提交」。之後當我點擊提交按鈕時,我重新運行我的代碼,,我的表單被提交,並且此jQuery事件也被觸發。確認Popup來了,如果我選擇Ok,表單再次提交。所以表單爲什麼會自動提交?用戶在確認彈出窗口中單擊確定之前?

回答

1

你可以引入javascript來做到這一點。我將使用jQuery進行演示:

$("#your-form").submit(function(e) { 
    if(!confirm("you sure about that?")){ 
     e.preventDefault(); 
    } 
}); 

單擊提交按鈕時將彈出一個彈出對話框。如果用戶不想提交,這將阻止表單提交給控制器。每個操作的評論

更新:

$(document).ready(function() { 
$('#myForm').submit(function (ev) { 
    ev.preventDefault(); // prevent default action witch is form-submit 
    var form = this; // avoid using jQuery's selection. 
    console.log(1); 
    var year = $('#year').val(); 
    var month = $('#month').val(); 
    console.log(year); 
    console.log(month); 
    $.ajax({ 
     type: "GET", 
     url: 'ActionServlet', 
     data: "year=" + year + "&month=" + month, 
     success: function (data) { 
      console.log(data); 
      $('#ajaxDiv').text(data); 
      var result= parseInt(data, 10); 
      if (result > 0) { 
       if(confirm("you sure about that?")){ //if yes is clicked (negation is removed) 
        form.submit(); // this won't trigger the jQuery's submission, so it will not cause infinite loop. 
       } 
      } 
     },error : function(e) { 
      alert('Error: ' + e); 
     } 
    }); 
}); 
}); 
+0

根據您的解決方案,在彈出的會被提交表單之前。但是我想在給出彈出窗口之前做一個數據庫查詢。如果查詢結果大於零值,那麼只有我想生成彈出窗口。請再次閱讀我的問題,並幫助我找出如何根據用戶選擇的值進行查詢,然後彈出。謝謝 –

+0

@IshantSharma你可以添加一個AJAX調用來獲得結果,並結果做w/e。我也更新了我的解決方案。 –

+0

我按照你的建議改變了我的代碼。但是當我發送ajax調用來獲得結果時,我的表單也同時被提交。 ajax響應沒問題,同時生成確認彈出窗口。但提交表單獨立於彈出選項。 –

相關問題