DNJ Panel : the easy way to Ajaxify existing .Net controls

This module is an ajax extender that works like asp.net ajax panel.  

DNJ Panel doesn't need a script manager and have some callbacks witch can be overloaded to customize some behaviours of the panel.  

The module require jquery to be loaded using DNJ scripts loader

 

To ajaxify a standard .net webcontrol, all you have to do is to put it into a DNJPanel. this will prevent the control from reloading the current page while doing a postback ... check a live demo here : DNJPanel with default settings

This will work exactly like Microsoft asp.net ajax Panel.

Now, let's see how we can add fun stuff to DNJPanel.

In the .aspx file we will add the following code.

 

    <style type="text/css">
.dnj-indicator
{
border:0px;
background: #a00;
color:#fff;
position:absolute;
top:0px;
right:0px;
width:150px;
font:700 11px verdana;
padding:2px 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {

//Creating a custom ajax indicator (à la GMail "loading" indicator)
var indicator = $('<div>Loading</div>').addClass('dnj-indicator').hide();
$('body').append(indicator);
$(window).scroll(function() {
indicator.css('top', $(this).scrollTop() + "px");
});


// Custom DNJ ajaxifier initialisation
// Note that we can activate DNJ by simple $.DNJ() call
// The example bellow shows how we can add some visual effects for loading, waiting, errors ...etc
//
$.DNJ.settings.beforeCallBack = function(sender)
{
indicator.show();
sender.fadeTo("fast", 0.50);
};
$.DNJ.settings.afterCallBack = function(sender)
{
indicator.hide();
};
$.DNJ.settings.errorCallBack = function(msg) {
$.nyroModalManual({ //note that nyromodal plugin must be loaded first in a <script ...> section
bgColor: '#ffaaaa',
title: 'An error has occured',
content: msg
});
};


});
</script>

 

 

We ask DNJPanel to overload its before/after/error callbacks.
The before and after callbacks will show/hide an indicator like the one used by Gmail.

The error callback will use a 3rd party JQuery plugin (nyromodal) to display the exception screen when an error occure.

All this is demonstrated in the following page : DNJPanel advanced demo