Question

我有以下脚本，它根据表单参数从服务器获取数据。

protected void beforeForgetPasswordDialog(Form f) {
    TextField emailTextField = new TextField();
    f.add(emailTextField);

    Button submit = new Button("Submit");

    submit.addActionListener(e -> {
        Style s = UIManager.getInstance().getComponentStyle("Label");
        String forgottenPasswordEmail = emailTextField.getText();
        if (forgottenPasswordEmail != null && !forgottenPasswordEmail.equals("")) {
            ForgetPasswordConnection fpc = new ForgetPasswordConnection();
            fpc.forgetPasswordConnectionMethod(forgottenPasswordEmail, s, StateMachine.this, f);
            forgetPasswordSuccess = fpc.abc;
            if (forgetPasswordSuccess) {
                showForm("Main", null);
            }
        } else {
         //Dialog.show(null, "Email id is empty", "ok", null);
//Dialogbox works here, but toastBar doesnt work
        //  f.addShowListener(d -> {
        //  ToastBar.showMessage("Email id is empty", FontImage.MATERIAL_MAIL_OUTLINE, 2000);
        //  });                
        }
    });
    f.add(submit);
}

此部分正在运行，有时根据搜索条件，需要几秒钟才能获得结果。同时我想展示一些GIF说数据加载。我准备好了GIF。如何在上面的脚本中实现它？

Answer 1

请试试这个。

jQuery('#request_search').submit(function(e){

       $("#report").html("<div><img src='loading.gif' alt='Loading.. \n Please wait' title='Loading.. \n Please wait'` /></div>");
     e.preventDefault(); 


        var s_date=jQuery('#actualfrom').val();
        var e_date=jQuery('#actualto').val();
        var type=jQuery("#type").val();
        var loc=jQuery("#loc").val();



 jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type},  function(data) { 

 jQuery('#report').html(data);});
         });
});

Answer 2

使用 id 属性在 html 文件中添加带路径的图片，然后显示/隐藏div 根据要求和成功。

尝试以下代码：

在 html 文件中添加html div：

  <div id='loadingmessage' style='display:none'>
  <img src='loadinggraphic.gif'/>
  </div>

尝试下面的代码 jQuery ：

jQuery('#request_search').submit(function(e){


$('#loadingmessage').show();  // show the loading message.
     e.preventDefault(); 


        var s_date=jQuery('#actualfrom').val();
        var e_date=jQuery('#actualto').val();
        var type=jQuery("#type").val();
        var loc=jQuery("#loc").val();



 jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type},  function(data) { 

 jQuery('#report').html(data);});
   $('#loadingmessage').hide(); // hide the loading message
         });
});

jquery post显示加载消息直到成功

2 个答案: