spjs.dffs.dlgBox

[Kasey]

I currently have some custom js to display a confirm box and call a function on OK and a different function on Cancel. I’d like to use your spjs.dffs.dlgBox if possible. How would I go about using that with Yes/No buttons instead of Ok, Cancel and calling functions on click of the buttons?

• This topic was modified 7 years, 10 months ago by Kasey.

[Alexander Bautz]

Here is a code snippet, but keep in mind that this alert box is not “blocking” so any running code will not be halted while this dialog is shown:

spjs.dffs.dlgBox("This is the message, and you can use <span style='font-size:22px'>HTML</span>",false,function(){
    // your OK function
    spjs.dffs.closeDlg();
},function(){
    // Your cancel function
    spjs.dffs.closeDlg();
});

Alexander

[Kasey]

Great. Thank you. Is there anyway to force the text to Yes for OK and No for Cancel?

[Alexander Bautz]

Yes, but I haven’t built in a method to override the text on the “default button”, so you need to put the buttons in the HTML like this:

spjs.dffs.dlgBox("This is the message, and you can use <span style='font-size:22px'>HTML</span><div style='text-align:center;'><input type='button' value='Yes' onclick='theYesFunction()'> <input type='button' value='No' onclick='theNoFunction()'></div>",false);

function theYesFunction(){
    // the Yes function goes here
    spjs.dffs.closeDlg();
}

function theNoFunction(){
    // the NO function code goes here
    spjs.dffs.closeDlg();
}

Alexander

[Kasey]

That works! Thank you!

[Kasey]

Is there anyway to use dlgBox on presave and not allow the form to continue to save until the Ok button is clicked? I know this is a “non-blocking” solution but I’m trying to see if there is anyway to use it in conjunction with presave or any other way as the out of the box alert boxes can be blocked but Chrome and aren’t as nice.

function PreSaveAction() {
spjs.dffs.dlgBox(“<i class=’fa fa-floppy-o fa-4x iconGood’ aria-hidden=’true’></i><p>Thank you for your submission!<p><p>You will be notified when your request is ready for User Acceptance Testing as well as when it has been deployed to production.<p><p>Feel free to use the My Requests page to view all of your requests and their progress.</p>”,false,function(){
// your OK function
spjs.dffs.closeDlg();
return true;
});
return false;
}

[Alexander Bautz]

You should be able to use this to let you “pause” the save until OK is pressed:

var dlgBoxOkClicked = false;
function dffs_PreSaveAction(){
    if(!dlgBoxOkClicked){
        spjs.dffs.alert({
            "msg":"Your message here - you can use HTML",
            "title":"Your custom dialog title",
            "ok":function(){
                spjs.dffs.closeDlg();
                dlgBoxOkClicked = true;
                // Trigger save again
                jQspjs("input[id$='diidIOSaveItem']:last").trigger("click");
            }
        });
        return false;
    }
    return true;
}

Alexander

[Kasey]

PERFECT!!! Thank you!

[becca]

Related to my post from yesterday, I have this set up and tried both the trigger.(“click”) and triggerSave and neither makes presaveaction run again, then I can’t click submit again

[Alexander Bautz]

I did have a bug here in an earlier release – which version of DFFS are you running?

Alexander

[becca]

Backend v4.4.3.58 css v.4.46 spjs.utility v1.328

[becca]

Updated to the most recent version and it still is not working

[becca]

I’ve swapped a few different save attempts in and none have worked and returned so far.

function customCloseFunc() {
    var inff = $("#info").val(); var houu = $("#hours").val();
    if (inff !== "" && houu !== ""){
        setFieldValue('field1', inff); setFieldValue('field2', houu);
        spjs.dffs.closeDlg();
        alrtOKd = true;
        spjs.dffs.processEmailTemplate("email"); //this does run
        //jQspjs("input[id$='diidIOSaveItem']:last").trigger("click");
        //$("input[id$='diidIOSaveItem']:last").trigger("click");
        //spjs.dffs.triggerSave();
        //return true;
    }
    else{
        if (inff === ""){$("#formVal1").show();}else{$("#formVal1").hide();}
        if (houu === ""){$("#formVal2").show();}else{$("#formVal2").hide();}
    }
}

var alrtOKd = false;
function PreSaveAction() {
    //
    //just a whole bunch of other checks and emails
    //
    if (getFieldValue('Complete') === true){
        if (!alrtOKd){
            spjs.dffs.alert({
                "title":"blah",
                "msg":"important parts are <textarea id='info></textarea> <div id='formVal1'> <input type='number'> <div id='formVal2'> <input type='button' class='spjs-dlg-btnOK' onclick='customCloseFunc' value='Save'> <input type='button' class='spjs-dlg-cancelOK' onclick='spjs.dffs.closeDlg();' value='Cancel Save'>",
                "noBtn":true
            });
        }
        return false;
    }
    return true;
}

Everything else works correctly, just the save and return will not happen.
*sorry for all the edits, coding in vba too so I kept using ‘ instead of // and messing everything up

• This reply was modified 5 years, 4 months ago by becca.
• This reply was modified 5 years, 4 months ago by becca.
• This reply was modified 5 years, 4 months ago by becca.

[Alexander Bautz]

Not sure what could cause this – do you see any errors in the developer console? (hit F12 > Console) – please note that the console must be open when you try the save the first time.

If you don’t see any errors you might have a required field that is not filled in, or you have a field with validation errors. Try creating a tab with ALL the fields visible (by adding a tab with NO selected fields) and see if you have a validation error on one of the fields that do not show in any other tab.

Alexander

[becca]

I have the misc tab set to give me the yellow notification bar for missed required fields and I double checked my js for the only changes made with this addition so that’s not the problem. If it was I wouldn’t get to PreSaveAction in the first place.

On load

Resource interpreted as Document but transferred with MIME type
clienttemplates.js?r…jz4PK%2FeWg%3D%3D:1 image/gif: “http://sharepoint4.company.com/_layouts/15/images/blank.gif?rev=23&#8221;

Resource interpreted as Document but transferred with MIME type image/gif: “http://sharepoint4.company.com/_layouts/15/images/blank.gif?rev=38&#8221;

With both jquery.js:3 and jquery.js:4

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.

With jquery.js:4

and nothing new when I save

[Alexander Bautz]

It’s hard to tell exactly without looking at it live, but try changing the function name PreSaveAction with dffs_PreSaveAction and see if it helps.

Alexander

[becca]

No dice, didn’t change a thing

[becca]

I think the issue is the return false in the PreSaveAction, since other events in the PreSaveAction are running before getting caught on that line. Seems like bad practice. What I’m going to try next is replace the Submit button with a matching clone that triggers the dlg if needed or goes straight to triggerSave otherwise, and see if putting a triggerSave in the dlg btnOK works that way.

[Alexander Bautz]

Yes, returning false in the PreSaveAction or dffs_PreSaveAction will prevent saving – this is how it is supposed to work – to be able to stop the save in the code. I didn’t notice this when looking at your code, but if you move the return false line up you should be OK:

var alrtOKd = false;
function PreSaveAction() {
    //
    //just a whole bunch of other checks and emails
    //
    if (getFieldValue('Complete') === true) {
        if (!alrtOKd) {
            spjs.dffs.alert({
                "title": "blah",
                "msg": "important parts are <textarea id='info></textarea> <div id='formVal1'> <input type='number'> <div id='formVal2'> <input type='button' class='spjs-dlg-btnOK' onclick='customCloseFunc' value='Save'> <input type='button' class='spjs-dlg-cancelOK' onclick='spjs.dffs.closeDlg();' value='Cancel Save'>",
                "noBtn": true
            });
            return false;
        }
    }
    return true;
}

Alexander

[becca]

Got it, I moved one bracket out of place. Oh the joys of coding, one character off but not in an error-throwing way can cause so much headache. This works, now just to add this button press to my redirection navigation exceptions and I’m done with this story.

Thanks for getting my morning off to a good start.

[Alexander Bautz]

I’m glad we got this figured out.

Alexander

[Author]

Posts