Livet - Per Lundkvist

torsdag 31 juli 2014

Simpel autocomplete funktionalitet - jQuery

Tänkte visa hur jag gjort en simpel variant av autocomplete som man kan använda där man vill kunna välja bland ett antal förutbestämda värden.

_searchTextBoxControlId = ID på textfältet där användaren ska skriva sitt sökord.
_tagAutoCompleteListId = ID på den DIV-tagg som agerar "behållare" för alla värden som användaren kan välja bland. CSS på denna bör vara "display:none" initialt.
showMessage() är en valfri metod där man kan skriva ut info till användaren, t.ex. i en informationsruta.

Kod att köra vid sidladdning:

 var initTagAutoComplete = function() {  
 $.ajax({  
  type: 'POST',  
  url: '/your/url/to/fetch/arrayofstrings',  
  dataType: 'json',  
  beforeSend: function (jqXhr, settings) {  
      showMessage('Initilizing autocomplete...');  
  },  
  success: function (data, textStatus, jqXhr) {  
      //data should be expected to be returned as ['astring', 'anotherstring', 'yetanotherstring', ...]  
      $(_tagAutoCompleteListId).empty();  
      $.each(data, function(idx) {  
       $(_tagAutoCompleteListId).append('<div class="autocomplete-item"><a data-autocomplete="' + idx + '" href="#" onclick="event.preventDefault;$(\'' + _searchTextBoxControlId + '\').val(\'' + data[idx] + '\');$(\'' + _tagAutoCompleteListId + '\').fadeOut(\'slow\')">' + data[idx] + '</a></div>');  
      });  
      showMessage('');  
  },  
  error: function (jqXhr, textStatus, errorThrown) {  
      showMessage('Technical error!');  
  }  
 });

Kod som knyts till texfältet för sökning:

 $(_searchTextBoxControlId).keyup(function (event) {  
  var searchWord = $(_searchTextBoxControlId).val();  
  $(_tagAutoCompleteListId).fadeIn('slow');  
  $('a[data-autocomplete]').each(function (idx) {  
      $('a[data-autocomplete="' + idx + '"]').parent().hide();  
      var tagValue = $('a[data-autocomplete="' + idx + '"]').text();  
      if (tagValue.toLowerCase().indexOf(searchWord.toLowerCase()) == 0) {  
       $('a[data-autocomplete="' + idx + '"]').parent().show();  
      }  
  });  
 });

tisdag 8 juli 2014

Håll koll på versionerna

Det är ofta man behöver veta eller undersöka vilka versioner som gäller och finns tillgängliga för olika plattformar och ramverk.
Här är några bra länkar att ha koll på som hjälper till:

lördag 31 maj 2014

Skapa iframeinnehåll dynamiskt med Javascript

Denna kodsnutt visar på hur man på ett enkelt sätt kan skapa en iframe med javascript, som i sin tur skapar upp HTML-dokumentet som ska visas i iframen istället för att länka till en befintlig sida.
Visar dessutom hur man t.ex. kan lägga till en scripttagg i den skapade iframesidan.

 <div id="my-iframe-container"></div>  
 <script>  
 var iframe = document.createElement('iframe');  
 iframe.width = '539px';  
 iframe.height = '380px';  
 iframe.scrolling = 'no';  
 var html = "<!DOCTYPE html>\n<head>\n<title>Test</title>\n</head>\n<body>\n";  
 html += "<div>Hello World!</div>";  
 html += "\n</body>\n</html>";  
 document.getElementById('my-iframe-container').appendChild(iframe);  
 iframe.contentWindow.document.open();  
 iframe.contentWindow.document.write(html);  
 iframe.contentWindow.document.close();  
 var headTag = iframe.contentWindow.document.getElementsByTagName('head')[0];  
 var s1 = iframe.contentWindow.document.createElement("script");  
 s1.type = "text/javascript";  
 s1.charset = 'UTF-8';  
 s1.async = true;  
 s1.id = 'another-script';  
 s1.src = 'http://mydomain.com/another.js';  
 headTag.appendChild(s1);  
 </script>

onsdag 26 mars 2014

Generiska klasser i .Net

Bra film om du vill lära dig grunden i hur man skapar generiska klasser i .Net:

http://youtu.be/2LfoxTyWzVM

lördag 7 december 2013

IIFE i Javascript

I Javascript finns något man kallar IIFE (immediately invoked function expression) vilket innebär att det är en funktion, precis som vilket Javascript-funktion som helst, men den körs direkt vid sidladdning, och inte genom ett anrop exempelvis genom att klicka på en knapp eller liknande.
Fördelen är att alla variabler lever endast inne i funktionen, även det i.o.f. precis som vanligt men det är användbart när man vill ha kod på en sida som ska köras direkt vid sidladdning och inte råka "krocka" med andra variabelnamn etc. på sidan.

 <script>  
 // Detta är ett "Immediately-Invoked Function" uttryck  
 (function() {  
   var foo = "Hejsan";  
 })();  
 alert(foo); // undefined!  
 </script>

söndag 20 oktober 2013

Gör en egenskap read-only i EPiServer

Gör en Custom Property Type som du kallar PropertyReadOnlyString som ärver av PropertyString. Lägg till ett "disabled" attribut när Edit Control skapas. Samma kan göras för PropertyLongString, PropertyNumber, etc.

Detta behöver göras i CreateEditControls() för din kontroll klass.

 public override void CreateEditControls()  
 {  
 this.EditControl.Attributes.Add("disabled", "disabled");  
 }

tisdag 3 september 2013

WebAPI i WebForms, Visual Studio 2010 .NET 4.0

Jag sökte runt för att hitta hur man sätter upp WebAPI i ett WebForms-projekt och hittade en del sidor som pekade på samma sätt:

 using System.Web.Http;  
 RouteTable.Routes.MapHttpRoute(  
   name: "DefaultApi",  
   routeTemplate: "api/{controller}/{id}",  
   defaults: new { id = System.Web.Http.RouteParameter.Optional }  
   );

Jag hade stora problem med att fatta var RouteTable.Routes.MapHttpRoute kom ifrån, trodde att det var System.Web.Http såklart men icke?!

Till slut kom jag på genom att studera ett annat fungerande WebAPI-project att jag skulle skriva:

 GlobalConfiguration.Configuration.Routes.MapHttpRoute(  
        name: "DefaultApi",  
        routeTemplate: "api/{controller}/{id}",  
        defaults: new { id = System.Web.Http.RouteParameter.Optional }  
        );

Observera också att du först via NuGet Package Console Manager måste ha installerat:

Install-Package AspNetWebApi