EasyUI Forum
June 26, 2024, 05:57:33 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Messager alert not working as expected [WORK-A-ROUND FOUND]  (Read 5529 times)
mschnitter
Newbie
*
Posts: 8


View Profile
« on: November 13, 2016, 07:45:26 PM »

Hello,

I've come across some unexpected behavior when using messager.alert to report back status of a submit. Here is the code snip-it:

Code:
$('#fm').form({
    url: 'thisform.php',

    success:function(data){
        if (data.status = "Success") {
                 $.messager.alert ('Success','Process was Successful','info');
                 alert('Process was Successful');
        } else {
         $.messager.alert ('Error',data.errorMsg,'error');
         alert('Error: '+data.errorMsg);
        }  

        $('#tt').datagrid('clearChecked');   // Reset datagrid embedded in form
        $('#tt').datagrid('clearSelections'); // Reset datagrid embedded in form
        $('#dlg').dialog('close');                // Close dialog contained
        $('#CalInput').submit();             // Submit the form to refresh data
        

    }
});

When this code runs, the message.alert only shows for a second then disappears. I changed the timeout to 0, that had no effect. When I run this through a debugger, the line $.messager.alert ('Success','Process was Successful','info'); gets executed, but the code continues on and doesn't wait for a user response. I also tried adding an empty function to the messager.alert, but that had no effect either.

Other areas that I'm using $.messager.alert it works as expected. What am I missing? Is it because I'm calling $.messager.alert inside the success function? If so, how do I get around this? The regular alerts work fine.


Thanks,
Mark
« Last Edit: November 14, 2016, 09:28:15 PM by mschnitter » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: November 13, 2016, 09:31:56 PM »

All the $.messager functions work in async mode. This means that the user can't block it before doing any more.
Logged
mschnitter
Newbie
*
Posts: 8


View Profile
« Reply #2 on: November 14, 2016, 08:28:41 AM »

stworthy,

Thank you for your reply. What would you recommend using to send alerts to users in this situation? Are there other alerting mechanism in EasyUI that are synchronous? Should I use native JQuery instead?

Thanks,
Mark
Logged
mschnitter
Newbie
*
Posts: 8


View Profile
« Reply #3 on: November 14, 2016, 09:17:56 PM »

After playing around with the code for a bit, I've found a work-a-round. Well, it's more like a hack-a-round. I'm pretty sure there is better way to do this, but this is what I got:

Code:
if (data.status = "Success") {
                 $.messager.defaults.closable = false;
               $.messager.defaults.cancel = '';
                 $.messager.confirm ('Success','Process was Successful',
                       function(r){
   $('#tt').datagrid('clearChecked');   // Reset datagrid embedded in form
                            $('#tt').datagrid('clearSelections'); // Reset datagrid embedded in form
                            $('#dlg').dialog('close');                // Close dialog contained
                            $('#CalInput').submit();             // Submit the form to refresh data
   
      }
                 );
                 $('.l-btn-empty').parent().parent().css('display', 'none');
        } else {
         .... More Code ....
        }  

        

After digging around at several old posts on simular issues, I came up with this hack.

Here is what I did:
1. I changed the type of messager from alert to confirm, this allowed me to trigger the function after a button was pressed. For whatever reason the function didn't seem to fire correctly with alert. Oh, and I had to give up the icons too by using confirm... a small price to pay.

2. I disabled the window close option to prevent the dialog from being close by the [X].

3. I set the text of Cancel to an empty string. While tracing through the code, I noticed that when changing the button string to empty, a unique class was used on the text object: l-btn-empty

4. Knowing the blank Cancel button's class, I was able to find the parent object of the button and change the style to hidden. $('.l-btn-empty').parent().parent().css('display', 'none');

I realizes this hack-a-round will probably break with a future version of something, but for now it does the trick. Hopefully in the future someone finds a more elegant way to address this problem. There is probably a way to change the button text to something unique and search on that text instead.

Oh well, I hope someone else finds this useful and improves upon it.

Regards,
Mark
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!