Experimenting with Adobe AIR and jQuery – Part 6

Posted by on

Until now, I had hard-coded the information about 3 songs in my Top100-application. It was time to make it dynamic, loading 100 songs from an XML-file.

The file looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<top100>
<record>
  <number>1</number>
  <artist>Captain &amp; Tennille</artist>
  <title>Do That To Me One More Time</title>
</record>
<record>
  <number>2</number>
  <artist>Irene Cara</artist>
  <title>Fame</title>
</record>
... 

So I looked for solutions to read an xml-file with javascript. Sure enough, jQuery had a solution: the XML-to-JSON jQuery plugin makes it really easy to do this.

The code

var lijst = new Object();
$.get('top100.xml', function(xml){ 
  lijst = $.xml2json(xml);
  }); 

reads the file and puts the content into the JSON object lijst:

{record:[
  { number:1, artist:'Captain & Tennille', title:'Do That To Me One More Time' },
  { number:2, artist:'Irene Cara', title:'Fame' }, 
  ...
 ]}

As an example, I can access the title of the number 1 song by using

lijst.record[0].artist

(as javascript objects start numbering from 0). Obviously, this depends on the sequence of the songs in the xml-file, i.e. if the file would start with number 100 instead of 1, or if the sequence would be random, this would no longer work. As an xml-file by definition is not “sorted”, I needed to create an extra object to contain the object reference by song number:

var numbers = new Object();
var lijst = new Object(); 
$.get('top100.xml', function(xml){ 
  lijst = $.xml2json(xml);
  for ( var rec in lijst.record )
    {
    numbers[lijst.record[rec]['number']] = rec;
    }

This results in

numbers[1] --> 0, number[2] --> 1, ...

I could now use

list.record[numbers[1]]['artist']

to get the artist information for the number 1 song.

To be able to move up and down, I needed an extra javascript variable to keep track of the current song number that is shown on the screen, and initialize the screen with that number:

var currentnumber = 100;
$.get('top100.xml', function(xml){
  lijst = $.xml2json(xml);
  for ( var rec in lijst.record )
    {
    numbers[lijst.record[rec]['number']] = rec;
    }
  $("#number").text(currentnumber);
  $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase());
  $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase());  
});

I finally added 2 arrays to display various colors for the background and the text.

♦ Related files: step6.html

Experimenting with Adobe AIR and jQuery – Part 5

Posted by on

Part 5 of my Top100-application was a simple change: until now, the items on the page (number, artist and title) moved off the screen, then the background color changed, and then the next items moved on the page.

I didn’t like the sudden change of the background, so I decided to embed all items into another div-tag, and change the background of the div, rather than the whole body:

<div id="mainp">
  <div id="number">47</div>
  <div id="artist">SEAL</div>
  <div id="title">KISS FROM A ROSE</div>
</div>

The css now looks like this (I added a background image to the body so there is something displayed when the text slides):

body, p {
    font-family:"Arial Rounded MT Bold", "Arial", sans-serif;
    font-size: 20px;
    color: #FFFF00;
    background-color: #000000;
    margin: 0;
    padding: 0;
    text-align: center;
}
body {
	background-position:center;
	background-image:url(images/top100fuif.gif);
	background-repeat:no-repeat;
}
#mainp {
    background-color: #0000FF;
}

And this is the jquery-code:

$(document).ready(function() {
  $(document).keyup(function(e) {
    switch ( e.keyCode ) {
      case 38: // up
        $("#mainp").hide("slide", { direction: "left" }, 1500, function(){
          $("#mainp").css("background-color","#00AA00");
          $("#number").text("48");
          $("#artist").text("VENGABOYS");
          $("#title").text("WE LIKE TO PARTY");
          $("#mainp").show("slide", { direction: "right" }, 1500, function(){
            $("#number").effect("pulsate", { times:3 }, 1000);
            });
          });
        break;
      case 32: // space
      case 40: // down
        $("#mainp").hide("slide", { direction: "right" }, 1500, function(){
          $("#mainp").css("background-color","#FF0000");
          $("#number").text("46");
          $("#artist").text("SASH");
          $("#title").text("ECUADOR");
          $("#mainp").show("slide", { direction: "left" }, 1500, function(){
           $("#number").effect("pulsate", { times:3 }, 1000);
            });
          });
        break;
      }
    });
  });

The result is that everything slides off and on the screen, with a different background:
example of sliding div (1) … example of sliding div (2)

 

♦ Related files: step5.html

JavaScript uses url-encoded UTF-8 strings to perform Ajax POSTs

Posted by on

Today, I had an encoding issue with a website I was working on. I had a

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

tag in the <head>-section, to ensure the page would correctly display and interpret all characters, including accented ones, like à and é.

The page was an administration page, to update texts on a website. Everything worked fine when I used standard <form> and <input>-tags, but I wanted to use Ajax to save any changes – to avoid a full page reload when something simple as a title had to be modified – things started to go wrong.

I used the spectacular jQuery library to do that, using a $.post-statement. At first sight, this seemed to be working fine, until I used some accented characters. When I entered “Soirée Théâtre” as title, the characters “Soirée Théâtre” were stored in the database.

I first thought it was an issue similar to the Bulgarian character set issue in mySQL I encountered a few months ago. But I was just using French in this case, so iso-8859-1 and mySQL character set “latin1_swedish_ci” should suffice in this case.

After some googling, I found this website, that explained that in the case of Ajax POSTs, “JavaScript serializes all the fields and it always uses url-encoded UTF-8 strings for this”. A simple utf8_decode in the PHP program that received the Ajax post-statement solved my issue.