Close

Det jobbiga med att växla mellan programmeringsspråk

Dialog med hjälp av Fancybox

Konstruerar webbplatsen för karttjänsten så besökare ska kunna utforska och dela med sig av intressanta kartpunkter.

Som alltid så är det som upplevs som snart klart fullt med små utmaningar och just nu halkar jag allt längre in att snarare koda i jQuery/Javascript än HTML och C#.

Kartdelen är egentligen inga konstigheter, det som dykt upp är det där med att få allt att validera och det betyder att jag inte kan ha någon formgivning med HTML-kod i dialogrutorna som visas med hjälp av Fancybox (bilden ovan).

Det som blir drygt är att alla grejer jag vill göra i jQuery/Javascript kan jag utantill i C#, men C# är inget alternativ vid gränssnittprogrammering vilket innebär att det är lite som att börja om på ny kula.

Lösningen på att få in HTML i dialogrutan ovan är i alla fall att avkoda all HTML inför sidladdningen (med C#) och sedan ändra så det kodas återigen när Fancybox läser in texten. Nedan kod hjälper till.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<h1>Koda om &lt;em&gt;innehåll&lt;/em&gt;</h1>
<script type="text/javascript">    
    function htmlEncode(value){ 
      return jQuery('<div/>').text(value).html(); 
    } 
    
    function htmlDecode(value){ 
      return jQuery('<div/>').html(value).text(); 
    }
    
    jQuery('h1').html(
        // kör funktionen htmlDecode på rubrikens innehåll
        htmlDecode(jQuery('h1').html())
    );
</script>
</body>
</html>

Så nu har jag börjat samla på mig lite mer om jQuery även fast jag hoppats slippa hålla på med Javascript, dock gör jQuery att jag inte behöver hålla så mycket Javascript i huvudet.

Mina äventyr inom jQuery kommer jag att dokumentera på jQuery-sidan bland mina webbutvecklingstips.

Leave a Reply

Your email address will not be published. Required fields are marked *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.