spjs.dffs.dlgBox vs. browser alert

[Bryan Waldrop]

I love the style of your alert box spjs.dffs.dlgBox. However, my users who are used to closing standard browser alerts with the enter key noticed it replicated the spjs.dffs.dlgBox instead of closing. Is there keyboard equivalent to close the box?

Also, there is no “bell alarm” with spjs.dffs.dlgBox. Is there a way to enable a sound with the prompt?

[Alexander Bautz]

Hi,
The reason for duplicating the alert most likely is due to the focus being on the trigger that opened the alert in the first place. Currently keyboard events (Enter or Esc) doesn’t work, but I’ll see what I can do about it.

It is possible to play a sound when the alert pops up, but it’s a bit cumbersome because you cannot play the “system default” sound so you would have to use a “mp3” or “ogg” file and it won’t work in IE.

Alexander

[Bryan Waldrop]

Thank you sir! Apparently the ability to use enter is a big deal to these users as I heard from another group about it today. I have several “scripts” for them to read before entering information that are alert box driven. I thought I would ask if there was an easy fix before changing them all back to alert.

[Alexander Bautz]

I’ve made this snippet and it seems to do the trick. Add it to your forms Custom JS:

jQuery(document).on("keydown",function(event) {
    if(jQuery(".dffs_dlg_overlay").length > 0){
        if (event.which === 13) {
    		jQuery(".dffs_dlg_overlay:last").find(".spjs-dlg-btnOK").trigger("click");
        }
    	if (event.which === 27) {
    		jQuery(".dffs_dlg_overlay:last").find(".spjs-dlg-btnCancel").trigger("click");
        }
    }
});

I’ll run some more tests, but I appreciate your feedback on how it works in your setup.

Alexander

[Bryan Waldrop]

Thank you for this! The results of my testing are that it works wonderfully in my SP2013 environment with a small exception. I have a coded “copy to clipboard” button/function where the alert for it will not close with enter after running.
Over in the SP 2010 environment, your snippet fires my “copy to clipboard” function every time enter is used to close any spjs.dffs.dlgbox. In SP2013 I can workaround by changing my “copy to clipboard” function back to a browser’alert’. But that did not work in SP 2010.

//copytoclipboard
function copyNotesToClip()
		{
			
                        var txtNotes = getFieldValue('Call_x0020_Notes');
		        spjs.dffs.dlgBox ("Notes successfully copied to clipboard. Paste to system of record before resetting this form.");
			if( window.clipboardData && window.clipboardData.setData ) {
			   window.clipboardData.setData("Text", txtNotes);
			}
		}

$(spjs.dffs.fields["Call_x0020_Notes"]).find('.ms-formbody').append("<button class='customBtnA' onclick='copyNotesToClip();return false'>Copy Notes to Clipboard</button>"); 

[Alexander Bautz]

Not sure, but can you try changing “spjs.dffs.dlgBox” with “spjs.dffs.alert” like this:

spjs.dffs.alert({"title":"This is the title","msg":"This is the message."});

Try changing the custom button you have inserted like this (from <button> to <input type=’button’>):

jQuery("#dffs_Call_x0020_Notes").find('.ms-formbody').append("<input type='button' class='customBtnA' onclick='copyNotesToClip();return false' value='Copy Notes to Clipboard'>");

Alexander

• This reply was modified 6 years, 1 month ago by Alexander Bautz. Reason: Fixed typo

[Vidya]

Hi ALex,

I need your help in finding out how to update fields in custom JS.

I have a form with two buttons, “Save as draft” and “Submit”, I have added them as HTML buttons on form and have hidden the defaut save and cancel button.

I have a multichoice field called Status in my custom list. This value gets updated on click of buttons on my form.

When Save as draft button is clicked, I should have my Multi choice field ” Status” to be set as “Pending Submission”

This is my button html and custom JS

<button onclick=” SaveAsDraftButtonClicked()”>Save as Draft</button>

function SaveAsDraftButtonClicked()
{

alert(‘Save as Draft Button is CLicked’);
}

I also need to call a JBPM workflow API passing crendiatls after button click.
Can you please help me with the custom code for it.

[Alexander Bautz]

Answered here: https://spjsblog.com/forums/topic/check-required-fields-on-html-button-click-event/#post-29684

[Author]

Posts