Need Sharepoint like modal pop-up window

Question

I need to show Sharepoint 2010 like pop-up window when clicked on a link in grid view. Once the modal pop-up displayed and user selected the Save button data base should be updated with given values in pop-up. How can I get this. Any Idea.

As of now I am using below code to get it but no idea how to pass the values to Database once clicked on the button in pop-up

Note: As of now I am not adding the gridview code here as I wanted to achieve it first with sample html then wanted to do with grid view.

Java Script

function openDialog() {

    var options = {

        html: divModalDialogContent,  // ID of the HTML tag

        // or HTML content to be displayed in modal dialog

        width: 600,

        height: 300,

        title: "My First Modal Dialog",

        dialogReturnValueCallback: dialogCallbackMethod,  // custom callback function

        allowMaximize: true,

        showClose: true

    };

    SP.UI.ModalDialog.showModalDialog(options);

}

//Results displayed if 'OK' or 'Cancel' button is clicked if the html content has 'OK' and 'Cancel' buttons

function onDialogClose(dialogResult, returnValue) {

    if (dialogResult == SP.UI.DialogResult.OK) {

        alert('Ok!');

    }

    if (dialogResult == SP.UI.DialogResult.cancel) {

        alert('Cancel');

    }

}

// Custom callback function after the dialog is closed

function dialogCallbackMethod() {

    alert('Callback method of modal dialog!');

}

HTML

<div id="divModalDialogContent">

    Hello World!

    <input type="button" value="OK"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Ok clicked'); return false;"

        class="ms-ButtonHeightWidth" />

    <input type="button" value="Cancel"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked'); return false;"

        class="ms-ButtonHeightWidth" />

        <asp:Button runat="server" ID="btnClicked" Text="Clicked" 
        onclick="btnClicked_Click" />

<input type="button" value="Open" onclick="openDialog()" />

How can I call db upon clicking 'clicked' button in pop-up. Also I need to send parameters to pop-up

Thanks in advance

Answer 1

You will not be able to address a database from the client side or do you mean the sharepoint lists and the modal dialogs used with the List Forms?

If you mean the latter then try reading into the Jquery library for sharepoint: http://spservices.codeplex.com/documentation

or maybe if you do not like that approach you could also the RESTful API: http://dotnet-forum.de/blogs/thorstenhans/archive/2010/07/14/sharepoint-2010-restful-api.aspx

in order to retrieve the list data from the client end.

If you really mean connecting to a database using js and html I do not really know how that should work unless node.js is up to the task.

Hope I could help you out.