0

I have a list, and when I want to add an element inside, I want a popup dialog to ask me for a confirmation. If cancel is clicked, it stays on the form, awaiting a user's action on the form ; And if OK is clicked, the form is validated and the element created.

I used this topic : Popup confirmation on 'status' column change

But I don't understand how to validate the form with "OK", or just stay on the form with "Cancel".

And can you tell me why the popup box doesn't appear with this code (the id is the one of the "Register" button in the form) :

$(document).ready(function(){

    $( "#ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" ).click(function() {


             var isConfirmed = confirm("Confirmez-vous ce choix de réforme ?");
             if (isConfirmed == true) {

             }
             else {

             }

    });

})

I have this scipt JS in Sharepoint Designer, and I have a script tag referring to it in the html of the list. There is no error with the file (verified with the console in the browser).

EDIT

HTML in a webpart above the list :

<div id="ConfirmPopup" style="display: none;">
<div id="messageDiv" style="height: 100px; padding-top: 10px; padding-left: 10px; padding-right: 10px; font-weight: bold;">
<label id="lblConfirmationMessage"> /label&gt;
</label></div>

<div id="buttonDiv" style="float: right; padding-right: 5px;">
<input type="button" value="Yes" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Yes, &#39;Yes&#39;); return false;" style="width: 75px;"/>
<input type="button" value="Cancel" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, &#39;Cancel&#39;); return false;" style="width: 75px;"/>
<asp:hiddenfield runat="server" id="hdnButtonClicked">
</asp:hiddenfield></div>
</div>



<div id="InformationBox" style="display: none;">
<div id="Div2" style="height: 100px; padding-top: 10px; padding-left: 10px; padding-right: 10px; font-weight: bold;">
<label id="lblInformationMessage"> /label&gt;
</label></div>
<div id="Div3" style="float: right; padding-right: 5px;">
<input type="button" value="OK" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Yes, &#39;Cancel&#39;); return false;" style="width: 75px;"/>
</div>
</div>





​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<script src="/sites/DevNum/testjd/SiteReformeTest/js/jquery.js"></script>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<script src="/sites/DevNum/testjd/SiteReformeTest/js/jquery-ui.js"></script>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<script src="/sites/DevNum/testjd/SiteReformeTest/js/popup_confirm.js"></script>​​​​​

JS popup_confirm.js :

$(document).ready(function(){

    $( "#ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" ).click(function() {


             /*var isConfirmed = confirm("Confirmez-vous ce choix de réforme ?");
             if (isConfirmed == true) {

             }
             else {

             }*/


             // Call openDialog method on button click or on page load
            function OpenConfigurationDialog(ConfirmationMessage) {

            var cloneModalContent = document.createElement('div');
            $("#lblConfirmationMessage").html(ConfirmationMessage);
            cloneModalContent.innerHTML = document.getElementById('ConfirmBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Please Confirm",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);
            }


            // Call openDialog method on button click or on page load
            function OpenInformationDialog(InformationMessage) {
            var cloneModalContent = document.createElement('div');
            $("#lblInformationMessage").html(InformationMessage);
            cloneModalContent.innerHTML = document.getElementById('InformationBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Error:",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);

            }

            function CloseDialog(dialogResult, returnValue) {
            if (returnValue == 'Yes') {
            document.getElementById("btnSubmit").click();
            return true;
            }
            if (returnValue == 'No') {
            return false;

            }
            if (returnValue == 'Cancel') {
            return false;
            }
            }


    });

})

And I'm sure the "Register" button of the form has this id : ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem

  • Is my answer helped you to resolve your issue? – Hardik Apr 21 '16 at 9:19
  • You haven't mentioned CloseDialog code to your button click. Please add it. – Hardik Apr 21 '16 at 9:29
1

On your saveitem button click event call below method

$(document).ready(function(){

    $( "#ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" ).click(function() {


             /*var isConfirmed = confirm("Confirmez-vous ce choix de réforme ?");
             if (isConfirmed == true) {

             }
             else {

             }*/
OpenConfigurationDialog("Confirmez-vous ce choix de réforme ?");




    });

// Call openDialog method on button click or on page load
            function OpenConfigurationDialog(ConfirmationMessage) {

            var cloneModalContent = document.createElement('div');
            $("#lblConfirmationMessage").html(ConfirmationMessage);
            cloneModalContent.innerHTML = document.getElementById('ConfirmBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Please Confirm",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);
            }


            // Call openDialog method on button click or on page load
            function OpenInformationDialog(InformationMessage) {
            var cloneModalContent = document.createElement('div');
            $("#lblInformationMessage").html(InformationMessage);
            cloneModalContent.innerHTML = document.getElementById('InformationBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Error:",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);

            }

            function CloseDialog(dialogResult, returnValue) {
            if (returnValue == 'Yes') {
            document.getElementById("btnSubmit").click();
            return true;
            }
            if (returnValue == 'No') {
            return false;

            }
            if (returnValue == 'Cancel') {
            return false;
            }
            }

})

You can get the reference of above code from this link

  • ok thanks, I used the tutorial, but even if I don't have any error, The popup doesn't appear. I add the complete code in my question – Jey10 Apr 21 '16 at 9:21
  • have you added opendialog code within your button click event? I have updated my answer. please look into it. – Hardik Apr 21 '16 at 9:25
  • If you look at my edit in my question, I have put the code in the click function, tell me if I'm doing wrong – Jey10 Apr 21 '16 at 9:27
  • yeah nothing appends, I don't understand, even adding the closedialog function – Jey10 Apr 21 '16 at 9:31
  • ok I think the click function doesn't work well, I do some tests and come back here after – Jey10 Apr 21 '16 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.