Using PHDCC CodeModule with javascript

phdcc Director John Cant writes:

My use of DNN has become -

[a] Maintain any HTML in a text file / copy and paste it into the basic editor / convert to raw / save. (Online editors are too hard to use and keep slim)

[b] Put any functionality into a phdcc.CodeModule

Much valuable functionality - jquery-ui / google maps / facebook / janrain / plupload / galleria - is available as javascript libraries. To get them onto a DNN Page, I have created a template CodeModule as follows.

ASP.NET gives you limited control over where in the page javascript can be inserted - RegisterClientScriptBlock inserts somewhere near the top; RegisterStartupScript somewhere near the bottom. All I can say is - the template works on all browsers tested.

In this example, I load the jquery-ui library at the top, and daisy chain the DNN onload handler at the bottom. The javascript could of course be located in a separate file.

In the onload handler, I create an invisible empty jquery-ui dialog and initialise a jquery-ui accordion. I bind the submit button of a PHDCC form to a handler and examine one of the form fields to give feedback via the dialog.

I add the CodeModule somewhere out of the way on the page - the bottom pane is a good place. Once there, accordions and dialogs can be used anywhere on the page.

If you need any help with this or any of the suggested libraries, please get back to us.

<%@ Control Language="C#" ClassName="JCformWidgets" %>

<script runat="server">

//--------------------------------------
private void loadJS()
{
 string scriptKey = "JCjsIncludes:" + this.UniqueID;
 if( Page.IsStartupScriptRegistered( scriptKey) || Page.IsPostBack) return;

 ClientScriptManager cs = Page.ClientScript;
 Type cstype = this.GetType();

 // ----------------------------
 // load JS files at the top of the page
 // ----------------------------
 string scriptBlock = "\n";

 scriptBlock += "<link type='text/css' href='/jqui/jquery-ui-1.8.14.custom.css' rel='Stylesheet'>\n";
 scriptBlock += "<script src='/jqui/jquery-ui-1.8.14.custom.min.js' type='text/javascript'>";
 scriptBlock += "</";
 scriptBlock += "script>\n";  // avoid microsoft parsing bug

 cs.RegisterClientScriptBlock( cstype, scriptKey, scriptBlock);

 // ----------------------------
 // load onload handler etc. at the bottom of the page
 // ----------------------------
 string startupScript = 
  @"<script language='JavaScript'>
<!--

function JConload(){

 var oldOnLoad = window.onload;

 var myDialog = $('<div></div>').dialog( {autoOpen: false} );
   
 this.newOnload = function(){
  
  // call existing handler
  if(typeof oldOnLoad === 'function'){ 
   oldOnLoad();
  }

  // -------------------------------------

  $(function() {
   $( '#accordion' ).accordion();
  });
  
  // -------------------------------------

  $('#' + 'dnn_ctr422_ViewForm_btnSubmit').bind('click', function() {

   var theseSkills = $( '#' + 'dnn_ctr422_ViewForm_Group_157_400_Question_157_400_1563_form_157_text_1563').val();
   var thisDialogText = '';
 
   if( theseSkills.length <= 0) {
    thisDialogText = 'No skills given<br>Please try again.';

   myDialog.html( thisDialogText);
    myDialog.dialog( 'option', 'title', 'Things you forgot ...' );
  
    myDialog.dialog( 'open');
    return false;
   }
  });

  // -------------------------------------

 };

}

(function(){
 var JCOL = new JConload();
 window.onload = JCOL.newOnload;
}());

            // -->";

 startupScript += "</sc";
 startupScript += "ript>"; // avoid microsoft parsing bug

 cs.RegisterStartupScript( cstype, scriptKey, startupScript);
}

//--------------------------------------
protected void Page_Load(object sender, EventArgs e)
{
 loadJS();
}

</script>