Saturday 19 January 2013

Firing events inside a modal dialog in SharePoint 2010


Lately I came across a requirement where I had to fetch user input and based on that perform some validations on the click event. All of this was supposed to happen inside a modal dialog inside SharePoint 2010. Initially it seemed quite simple but when I started to do it I really had to struggle to get the click event functional inside the modal popup.

Before diving more into the issue let me brief you about the Modal dialog in SharePoint 2010. It is a new dialog framework that is provided using javascript client object model. You must have seen a dialog box that opens up on editing a list item or adding a new item with some lightbox effect. That is what I am talking about here. :)

Diving into some more details here, the javascript client object model has a class SP.UI.ModalDialog that has quite a number of useful methods that help us interact with the dialog framework. One such useful method is the showModalDialog() that accepts a parameter of an object named options.
This options is the heart of this method.

var options ={
url: 'some url',
title:'SharePoint 2010 Modal Dialog',
width:100,
height:150,
dialogReturnValueCallback: closeDialog
};

Now if you have a look at above code snippet, it is quite simple and clear.

url : url of the page that appears in the dialog
title: title of the dialog box
width: width of the dialog box
height: height of the dialog box
dialogReturnValueCallback: It is the return callback function.

To show the dialog box you need to do the following

SP.UI.ModalDialog.showModalDialog(options);

Now , if you can recall, above I mentioned that url is the url of the page that gets displayed in the modal dialog. But there is one more option available here. We have an option called html as well where we can specify the html of that we want to show in the dialog box.

There are many more options that are available OOB that you can refer from msdn.

Coming back to my requirement, I had to take an input from the user and on the click event perform some validations inside the modal dialog. Also in my dialog I was using the html attribute of the options rather than showing some page. Now the problem with this was how to bind the script that will perform my onclick event inside the html markup. The html string is simply not a string but the DOM element that we will be showing in the dialog.

Now, the way it works is that we need to do document.createElement to create the DOM elements in memory. I did the document.createElement for my parent div container and added rest all child elements inside it as a template. But my on click event was not working. So I realised that I need to do document.createElement for script as well.

It made me think that if we are going to do document.createElement for every element then it will be really painful. So I did some R&D and came across an interesting blog where the approach suggested was to put the markup in the script tag with attribute set as "text/html". After that create the DOM in the memory using Jquery with the help of the markup specified in the script tag.

Here interesting thing is using type as "text/html" . If we put unsupported types in the type attribute for the script then the content of the script is ignored. This is normally used to render data that is not loaded to the page. This type of script is treated by browse as a div with style= display:none.

So, enough talking and lets have some practical implementation

function CheckValidations() {

//Logic to check the validations

}

function openDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.title = "Save Image";
    options.width = 400;
    options.height = 250;
    options.html = createHtml();
               
    SP.UI.ModalDialog.showModalDialog(options);
 }

 function  createHtml () {

     var htmlDiv= jQuery(jQuery('#parentDiv').html());
      htmlDiv .find('#btnOk').on('click', function () {
           CheckValidations();

     });

     return  htmlDiv .get(0);
 }


//The markup will be something like below

<script type="text/html" id="parentDiv">
    <div>
        <label for="PictureName">Picture Name :</label>
        <input type="text" id="txtPictureName"/>
        <input type="button" id="btnOk" value="Ok"/>
        <div id="errorDiv" ></div>
    </div>
</script>

Now from your code wherever you want to open this dialog, on the click event simply call the openDialog() method and you are good to go.

No comments:

Post a Comment