Display JQuery dialog using a JS-file

Question

I was able to insert my dialog. But I'm not able to display it.

This is how I insert it:

if ($("#dialogSendMail").length) {

}
else {
    $("#DeltaPlaceHolderUtilityContent").after("<div id='dialogSendMail' title='Enter mail body'> <label for='mailBody'>Type the text you want to display in the email:</label><p><input type='text' id='mailBody' name='mailBody'></p></div>");
}

And this is how I try to display it:

var answer ="";

$( "#dialogSendMail" ).dialog({
        resizable: false,
        height:350,
        width:650,
        modal: true,
        autoOpen : false,
        buttons: [
            {
                text: "Send Mail",
                click: $.noop,
                type: "submit",
                form: "myForm"
            },
            {
                text: "Close",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]
    });

But when I run my code, it doesn't display the dialog. Additionally i'm trying to find a way to get the response from the textbox.

Can anyone help me?

Also see : JQuery dialog as input

In my js-file I also have to following line:

answer = GetEmailBody();

End the GetEmailBody() calls the method you see higher up to display the dialog.

My code now looks as follows:

function GetEmailBody() {
    $("#dialogSendMail").dialog({
        resizable: false,
        height: 350,
        width: 650,
        modal: true,
        autoOpen: true,
        buttons: [
            {
                text: "Send Mail",
                click: function () {
                    $(this).dialog("close");
                    answer = "This is just a test message.";
                    SendEmail();
                }
            },
            {
                text: "Close",
                click: function () {
                    $(this).dialog("close");
                    SendEmail();
                }
            }
        ]
    });

}

function SendEmail()
{
    xmlHttpReq.open("GET", _spPageContextInfo.siteServerRelativeUrl + "/_layouts/SendDocuments/MyCustomHandler.ashx?ItemsArray=" + fileRefArray + "&IdsArray=" + idArray + "&EmailText=" + answer, false);
    xmlHttpReq.send(null);

    var yourJSString = xmlHttpReq.responseText;
    alert(yourJSString);
}

But now I get a message that an app should be opened on my computer. This was not necessary when I didn't go through the dialog. Then it called my ASHX-file which did the sending of the mail.

There is no real event, I think. I'm doing it in SharePoint. On the click of a button there, I need to send an email. The dialog is there so the users can enter an additional message to add to the email. — Bart Schelkens
– Bart Schelkens, Commented May 22, 2015 at 7:34

monxas · Accepted Answer · 2015-05-22 07:52:59Z

1

Set autoOpen to true:

$( "#dialogSendMail" ).dialog({
    resizable: false,
    height:350,
    width:650,
    modal: true,
    autoOpen : true,
    buttons: [
        {
            text: "Send Mail",
            click: $.noop,
            type: "submit",
            form: "myForm"
        },
        {
            text: "Close",
            click: function () {
                $(this).dialog("close");
            }
        }
    ]
});

edited May 22, 2015 at 7:52

answered May 22, 2015 at 7:39

monxas

2,6573 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bart Schelkens Over a year ago

OK, the auto-open worked. I'm now getting my dialog. But I still want to retrieve the text I type, so I can use it as text in my email.

Bart Schelkens · Accepted Answer · 2015-05-22 09:55:34Z

Ok, I was able to solve my problem:

function GetEmailBody() { $("#dialogSendMail").dialog({ resizable: false, height: 350, width: 650, modal: true, autoOpen: true, buttons: [ { text: "Send Mail", click: function () { $(this).dialog("close"); answer = $(mailBody)[0].innerText; xmlHttpReq.open("GET", _spPageContextInfo.siteServerRelativeUrl + "/_layouts/SendDocuments/MyCustomHandler.ashx?ItemsArray=" + fileRefArray + "&IdsArray=" + idArray + "&EmailText=" + answer, false); xmlHttpReq.send(null);

                var yourJSString = xmlHttpReq.responseText;
                alert(yourJSString);
            }
        },
        {
            text: "Close",
            click: function () {
                $(this).dialog("close");
                SendEmail();
            }
        }
    ]
});

}

function SendEmail()
{
    xmlHttpReq.open("GET", _spPageContextInfo.siteServerRelativeUrl + "/_layouts/SendDocuments/MyCustomHandler.ashx?ItemsArray=" + fileRefArray + "&IdsArray=" + idArray + "&EmailText=" + answer, false);
    xmlHttpReq.send(null);

    var yourJSString = xmlHttpReq.responseText;
    alert(yourJSString);
}

And this works as I hoped.

Collectives™ on Stack Overflow

Display JQuery dialog using a JS-file

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related