Written by

Question Jason Koan · May 2, 2018

Creating a Pop-Up box with with "Yes" and "No" buttons using CSP.

#Caché #JavaScript #CSP

Hello all,

I'm attempting to create a pop-up box with "Yes" and "No" for the buttons. I currently have a JavaScript confirm box but it has "OK" and "Cancel" as the response buttons. I have read that JQuery is a way to do, but is there a possibility of doing this with CSP instead of JQuery?

Thanks

Discussion (2)1

Add reply

Comments

Vladimir Iliychev · May 4, 2018

You can use the component %ZEN.Dialog.conformationDialog if you have newer version of Cache.

Something like this:

================================================================================

Class ZENTest.ConformationDialog Extends %ZEN.Component.page
{
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" >
<button caption="Delete" onclick="zenPage.showPopupWindow();"/>
</page>
}
ClientMethod showPopupWindow() [ Language = javascript ]
{
zenLaunchPopupWindow('%ZEN.Dialog.confirmationDialog.cls','confirmationDialog','resizable,width=380,height=180');
}
Method %OnAfterCreatePage() As %Status
{
s %session.Data("Confirmation","Messages",1)="DELETING!"
s %session.Data("Confirmation","Messages",2)="You are about to delete this file!"
s %session.Data("Confirmation","Messages",3)="Proceed?"
s %session.Data("Confirmation","btnOk",1) = "Yes"
s %session.Data("Confirmation","btnCancel",1) = "No"
Quit $$$OK
}
ClientMethod onPopupAction(popupName, action, value) [ Language = javascript ]
{
switch(popupName) {
case 'confirmationDialog':
if (action='OK'){
if (value=true) {
alert('The answer is Yes!');
//do something
}
}
break;
}
}
}
================================================================================

Just call this page from your csp page.

0 0

Jochen Roese · May 4, 2018

Hi,

this should give you an idea on how to achieve "popups" in HTML. This code is untested but it should give you a start.
First of all you need 2 containers (DIV) at the end of your document:

<div id="backdrop" class="backdrop"></div>

<div id="popup" class="popup">
    <div id="popup_container"></div>
    <button id="popup_btn1"></button>
    <button id="popup_btn2"></button>
</div>

in css you need 4 classes:

.backdrop {
    position: fixed;
    opacity: 0.3;
    background-color: rgb(0,0,0);
    top: 0;
    left: 0;
    width:100%;
    height: 100%
    display: none;
}

.backdrop.active {
    display: block;
}

.popup.active {
    display:block;
}

.popup {
    display:none;
    <!-- add your styling here -->
}

In Javascript you need something like this:

function showConfirm(message, callback) {
    showPopup(message, "Yes", "No", callback);
}

function showPopup(content, button1desc, button2desc, callback) {
    $('#popup').addClass("active");
    $('#backdrop').addClass("active");
    $('#popup_container').html(content);
    $('#popup_btn1').html(button1desc);
    if (button2desc) {
        $('#popup_btn2').html(button2desc).show();
    } else {
        //If we don't get a 2nd description it's a alert-message with one button
        $('#popup_btn2').hide();
    }
    $('#popup_btn1').off().on('click', function() {
        disable(); //First disable our popup
        if (callback) callback(0); //Returns the index of the button clicked
    });

    $('#popup_btn2').off().on('click', function() {
        disable();
        if (callback) callback(1);
    });

    var disable = function() {  
         $('#popup').removeClass("active");
         $('#backdrop').removeClass("active");
         $('#popup_container').html('');
    }
}

//Example of calling the confirm-message

showConfirm("Do you really want to delete?", function(choice) {
    if (choice===0) 
        alert("You pressed yes");
    } else {
        alert("You pressed no");
    }
});

Edit: You can achieve this also by using native-javascript: document.getElementById("popup_container").innerHTML = content; for example

0 0