Using CommonShowModalDialog in SharePoint

I’ve not found any post explaining the usage of CommonShowModalDialog in SharePoint, the default popup used by SharePoint across the board. So I thought why can’t I make one.

The method exists in core.js and it is used OOTB by SharePoint for opening popups in places like selecting a web application from a list of web applications, selecting a site collection from a list of site collections etc. (you could see these in Central administration). So here is the method –

function openPopup(){
    commonShowModalDialog("/_layouts/selectitem.aspx", "resizable: no; status:no; scroll: no; help: no; center: yes; dialogwidth:410px; dialogHeight:300px;", RetrieveItemValue);
}

CommonShowModalDialog has similar parameters as a simple window.open().

  1. Target URL
  2. Window features
  3. Callback function

To pass a value from the popup to the parent page use window.returnValue in te popup to save the value before closing the window.

//called from the popup page
function closePoup(){
    window.returnValue = myValue;
    window.close();
}

Retrieve the value passed from the popup in the callback function mentioned.

//Retreives the value sent from the popup
function RetrieveItemValue(retValue) {
    alert(retValue);
}

As simple as that.

Advertisements

Retrieving external IP address and geolocation of an IP address using JavaScript

Yesterday I was working on a client application which required to read the public address of the client and their geo-location. So after some search I wrote the following html page which gets the current IP as well as retrieves the public location of an IP purely using JavaScript and some external APIs.


<html>
<head>
    <title>Locate an IP</title>
    <script type="text/javascript" src="yqlgeo.js"></script>
    <script type="text/javascript">

        var ipaddress;

        //get location of an IP
        function getIPLocation() {
            document.getElementById('divDetails').innerHTML = '<br />Loading..';
            try {
                var start = new Date();
                var ctrl = document.getElementById('txtIP');
                var ipadd = ctrl.value;
                yqlgeo.get(ipadd, function (o) {
                    var details = '<br /><h3><b>Location Details</b></h3>';
                    details += 'Country Code : <b>' + o.place.country.code + '</b><br />';
                    details += 'Country Name : <b>' + o.place.country.content + '</b><br />';
                    details += 'Country Language : <b>' + o.place.lang + '</b><br />';
                    details += 'Latitude : <b>' + o.place.centroid.latitude + '</b><br />';
                    details += 'Longitude : <b>' + o.place.centroid.longitude + '</b><br />';
                    details += 'Place Name : <b>' + o.place.name + '</b><br />';
                    document.getElementById('divDetails').innerHTML = details;
                });
                var end = new Date();
                var diff = dateDifference(start, end);
                //document.getElementById('divtime').innerHTML = 'Time Elapsed : ' + diff.seconds;
            }
            catch (e) {
                document.getElementById('divDetails').innerHTML = e.Message;
            }
        }

        //get current IP
        function getCurrentIP() {
            var ctrl = document.getElementById('txtCurrentIP');
            if (ctrl) {
                ctrl.value = ipaddress;
            }
            else
                alert('Unable to retrieve IP');
        }

        function getip(json) {
            if (json.ip)
                ipaddress = json.ip;
            else
                alert('Unable to retrieve the IP address');
        }

    </script>
    <script type="text/javascript" src="http://jsonip.appspot.com/?callback=getip"></script>
</head>
<body>
    <form id="frm" action="javascript:getIPLocation()">
    <p>
        Get your IP Address
    </p>
    <input type="text" id="txtCurrentIP" />
    <input type="button" onclick="getCurrentIP()" value="Get IP" />
    <p>
        Type the IP Address
    </p>
    <input type="text" id="txtIP" />
    <input type="button" onclick="getIPLocation()" value="Locate" />
    <br />
    <div id="divDetails">
    </div>
    <br />
    <div id="divtime">
    </div>
    </form>
</body>
</html>

The sample makes use of the YQL Geo Library written by Chris Heilmann which is available here to retrieve the geo-location of an IP. To retrieve the client’s external IP I’ve made use of the API provided by jsoip.appsot.com. Thanks to the SO post here.

Debugging Javascript?

Well this may be an obselete stuff. But i still find guys who are unaware of this Visual Studio 2005 functionality.

How many times have you got frustrated seeing a javascript error dialog in your browser while developing web applications? Have you ever tried to debug the client-side script? Is it really possible? The fact is, it is completely possible to debug the javascript code.

By making some changes in the VS2005 settings, it is possible to enable the IDE to debug the Javascript. This saves our valuable time to catch the bugs easily and to perform modifications, rather going through the whole code to get hold of the bug.

You can very well set breakpoints and do the same attach-to-process debugging with those scripts. Infact you can debug other client side scripts too, not only javascript. No need to bang your head against the monitor anymore! 🙂

Here is the MSDN link explaining the whole procedure – Debugging Client Scripts in VS2005.

Happy coding! 🙂

My original post – here