Jquery AjaxWeblinks Module for Dotnetnuke released


After a very long time I was able to finish the first version of the AjaxWeblinks module which demonstrates a method for using jQuery/Ajax functionality in a Dotnetnuke module. For now, there can only be one instance of the module on any given page. I will release another version soon which will have better scoped and enqueued javascript.

The packages are available here.

jQueryUi Dialog Search


I use the jQueryUI dialog widget quite extensively in my ajax enabled web projects. Recently, I decided to use it as a popup search box by adding a text input to the title bar. Let’s call it jQueryUi Dialog Search.

I opened up my trusty OmniGraffle and came up with the following:

The following is the markup for the custom dialog box featuring my new custom titlebar


<div id="SearchDialog">
<div class="SearchTitle" >
<div class="SearchTitleText">Search Friends</div>
<div class="SearchTitleFilterButton">
<span>Filter:</span>
<input type="text" class="SearchFilter" />
<button class="SearchButtonClose" ></button>
</div>
<div class="SearchClear"></div>
</div>
<div class="SearchContent"> </div>
</div>

I used the “create” event to remove the default title bar and setup my custom title

$('#SearchDialog').dialog({
width: 500,
create: function () {
//Get a reference to jquery ui generated element
var widget = $(this).dialog('widget');

//Get a reference to content div
var dialog = $(this);

//Delete the default jquery ui title bar
widget.find('.ui-dialog-titlebar').remove();

//Remove the default padding values for the popup
widget.css('padding', 0).find('.ui-dialog-content').css('padding', 0);

//Use jquery ui styling for our new titlebar
$('.SearchTitle',dialog).addClass('ui-widget-header');

//Position title elements
$('.SearchTitleText',dialog).css('float','left');
$('.SearchTitleFilterButton',dialog).css('float','right');
$('.SearchClear',dialog).css('clear','both');

//Create an event for the search input
$('.SearchFilter',dialog).keyup(function(){

ShowResults($(this).val(),friends);
});

//Create a close button and allow it to close the popup
$('.SearchButtonClose',dialog).button({
icons: { primary: 'ui-icon-close' },
text: false
}).css('width', 16)
.click(function () {
dialog.dialog('close');
});

//Show all results on create
ShowResults('',friends);

}

});

Now to complete this example you will need a datasource, way to search for items and render the results

var friends = ["John","Bob","Jones","Tessa","Anna","Casper","Ed","Francis","Greg","Hanna","Ivan" ];
//Show results in search window based on input<
function ShowResults(filterText,dataSource)
{
var html = ''

$.each(dataSource,function(index,value){
if(filterText.length < 1 || value.toLowerCase().indexOf(filterText)!=-1){
html += '<li><a href="#" onClick="SelectResult(this)">'+value+'</a></li>';
}

});

$('#searchDialog .SearchContent').html(html==''?'No Results':'<ul>'+html+'</ul>');

}

//Use this function to select an item
function SelectResult(element){
alert('Hello, I am ' + $(element).text())
}

The end result looks like this:

You can also try the live demo in my app engine playground.

I hope this will be helpful to someone. Cheers!