How to Show and Hide a jQuery UI dialog popup

In this post we are going to load a specific page in a jquery UI dialog box. Below are the steps which does the trick.

Step 1: 

Add the jquery reference and then

Add the below empty div to your HTML

<div id="dlgdivcontent">

</div> 

Step2: 

Add the below java script function to your page

var $mydialog;

    function opendialogbox(url, popintitle) {

        $mydialog= $('#dlgdivcontent')

               .html('<iframe " src="' + url + '" width="500" height="350" scrolling="auto" frameBorder="0"></iframe>')

               .dialog({

                   autoOpen: false,

                   show: "fade",

                   hide: "fade",

                   modal: true,

                   height: 350,

                   width: 500,

                   resizable: false,

                   title: popintitle,

                   close: function (event, ui) {

                   //custom action if any on close click

                   }

               });

        $mydialog.dialog('open');

    }

Step3: 

Call the function opendialogbox with parameters as Url and Title on which wherever the link/button that you want to trigger the dialog box.

Hope this helps...

Related Post: How to Show and Hide a Modal Pop up Dialog in a SharePoint using Webpage
Related Post: Open and Close a SharePoint modal dialog with HTML structure

Update User Profile property through jQuery SPServices

Hi folks,
In this post we are going to update User Profile property through jQuery SPServices. Below is the code snippet which does the trick.
Just call the function with the parameters CurrentUserAccountName, PropertyName and PropertyValue.

// add the ref of jQuery file
<script type="text/javascript" src="/style library/jquery-1.7.2.js"></script>
// add the ref of jQuery SPServices file
<script type="text/javascript" src="/style library/jquery.SPServices-0.7.0.min.js"></script>

function updateUserProfile(currUserAccName, propertyName, propertyValue) {

   var propertyData = "<PropertyData>" +

  "<IsPrivacyChanged>false</IsPrivacyChanged>" +

  "<IsValueChanged>true</IsValueChanged>" +

  "<Name>" + propertyName + "</Name>" +

  "<Privacy>NotSet</Privacy>" +

  "<Values><ValueData><Value xsi:type=\"xsd:string\">" + propertyValue + "</Value></ValueData></Values>" +

  "</PropertyData>";

   $().SPServices({

       operation: "ModifyUserPropertyByAccountName",

       async: false,

       webURL: "/",

       accountName: currUserAccName,

       newData: propertyData,

       completefunc: function (xData, Status) {

           var result = $(xData.responseXML);

           if (Status == "success") {

              //success message if needed

           }

       }

   });

}

Hope this helps...