Print Page - Messager alert not working as expected [WORK-A-ROUND FOUND]

Title: Messager alert not working as expected [WORK-A-ROUND FOUND]
Post by: mschnitter 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

Title: Re: Messager alert not working as expected
Post by: stworthy 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.

Title: Re: Messager alert not working as expected
Post by: mschnitter 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

Title: Re: Messager alert not working as expected [WORK-A-ROUND FOUND]
Post by: mschnitter 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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mschnitter on November 13, 2016, 07:45:26 PM