Ajax implementeren in filmdatabase: verschil tussen FF / IE

[monnick]

Sinds enige tijd heb een vrij uitgebreid script ontwikkeld waar iedereen zijn of haar filmcollectie kan bijhouden (op basis van IMDb informatie). De huidige versie is hier te zien: http://www.tomrunia.nl/

Door op een rij te klikken krijg je uitgebreide informatie over de film. Zoals het op de bovenstaande link wordt uitgevoerd is best wel een ranzige oplossing eigenlijk. Bij het laden van de pagina wordt alle data geladen en als html uitgevoerd. De rijen met uitgebreide informatie zijn alleen verborgen en worden pas zichtbaar na aanklikken. (zie broncode)

Dit wilde ik verbeteren door ajax implementatie. Wanneer er op een film wordt geklik haalt de database de betreffende informatie op en geeft dit terug als html. Nu heb ik nog nooit eerder iets met Ajax gedaan en ben ik vrij slecht met JavaScript, dus ik stuit op een aantal problemen.

Wat ik met Ajax geklust heb is hier te bezichtigingen: http://www.tomrunia.nl/dev/index_ajax.php

In Firefox werkt dit prima. In Chrome werkt het ook, maar beduidend langzamer dan in FF. In IE werkt het niet......Wat doe ik fout? Ik heb zelf al verschillende dingen geprobeerd, maar het mag niet baten. Ik weet het niet meer. Iemand die me kan helpen?

Verder zijn tips wat betreft verbetering van de JavaScript / algemene opbouw ook meer dan welkom! Ik moet nog een hoop leren van Ajax e.d.

Hieronder volgt de code die van belang is.

Aanroepen javascript functie door te klikken op een rij:

PHP:

 <tr id="basisRow<?php echo $counter; ?>" class="<?php echo $trClass; ?>" onclick="javascript:getMovieInfo(<?php echo $uid.", ".$id.", ". $counter.", ". $showDVDcolumn.", ". $showDIVXcolumn.", ". $showHDcolumn; ?>);">

De javascript functies die van belang zijn:

JavaScript:

function getMovieInfo(userID, movieID, counter, showDVD, showDIVX, showHD) {
    
    // Als er al een rij uitgeklapt is, deze inklappen
    if (expandRow !== '') {
            document.getElementById("basisRow" + expandRow).style.display = '';
            document.getElementById("infoRow" + expandRow).style.display = 'none';
    }
    
    document.getElementById("basisRow" + counter).style.display = 'none';
    document.getElementById("infoRow" + counter).style.display = '';
    
    xmlhttp = GetXmlHttpObject();
    
    if (xmlhttp == null) {
        alert ("Your browser does not support HTTP requests.");
        return;
    }
    
    // Antwoord van server afhandelen
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("infoRow" + counter).innerHTML = xmlhttp.responseText;
            
            expandRow = counter;
        }
    }
    
    var page = "ajax_getmovieinfo.php";
    var params = "uid=" + userID + "&mid=" + movieID + "&showdvd=" + showDVD + "&showdivx=" + showDIVX + "&showhd=" + showHD;
    
    xmlhttp.open("POST", page, true);

    //Send the proper header information along with the request
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
    
}

function hideMovieInfo(counter) {
    document.getElementById("basisRow" + counter).style.display = '';
    document.getElementById("infoRow" + counter).style.display = 'none';
    
    expandRow = '';
}

function GetXmlHttpObject() {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    }
    
    if (window.ActiveXObject) {
        // code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    return null;
}

En dan na alle benodigde checks en benaderen database, wordt deze html uitgespuugd door ajax_getmovieinfo.php

PHP:

<td colspan="<?php echo 7+$extraColumn; ?>" class="inforow">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr><td class="title" colspan="3"><?php echo $title; ?></td></tr>
        <tr><td rowspan="18" width="120px"><a href="<?php echo $url; ?>" title="Bezoek de IMDB pagina"><img src="<?php echo $coverLoc; ?>" alt="cover" class="cover"/></a></td></tr>
        <tr><td width="15%" class="label">Premiere datum</td><td><?php echo $fulldate; ?></td></tr>
        <tr><td width="15%" class="label">Regisseur</td><td><a href="index.php?dir=<?php echo $director; ?>"><?php echo $director; ?></a></td></tr>
        <tr><td width="15%" class="label">Genre</td><td><?php echo $genre; ?></td></tr>
        <tr><td width="15%" class="label">Omschrijving</td><td><?php echo $plot; ?></td></tr>
        <tr><td width="15%" class="label">Speelduur</td><td><img src="img/clock<?php echo $clock; ?>.gif" title="Speelduur indicatie" alt="klokje" /> <?php echo $runtime; ?> min</td></tr>
        <tr><td width="15%" class="label">IMDB rating</td><td><?php generateStars($imdbscore, 'imdb'); ?> <?php echo $imdbscore; ?> / 10 </td></tr>
        <?php if ($row['seen'] == 1 && $row['ownscore'] != 0) { ?><tr><td width="15%" class="label">Cijfer</td><td><?php generateStars($ownscore, 'own'); ?> <?php echo $ownscore; ?> / 10 </td></tr>
        <?php } if($showDVDcolumn == 1) { ?><tr><td width="15%" class="label">DVD in bezit</td><td><?php echo $dvd_expand; ?></td></tr>
        <?php } if($showDIVXcolumn == 1) { ?><tr><td width="15%" class="label">DivX in bezit</td><td><?php echo $divx_expand; ?></td></tr>
        <?php } if($showHDcolumn == 1) { ?><tr><td width="15%" class="label">HD in bezit</td><td><?php echo $hd_expand; ?></td></tr>
        <?php } ?><tr><td width="15%" class="label">Gezien</td><td><?php echo $seen2; ?></td></tr>
        <tr><td width="15%" class="label">Trailer</td><td><a href="trailer.php?uid=<?php echo $uid."&amp;id=".$id; ?>" onclick="window.open('trailer.php?uid=<?php echo $uid."&amp;id=".$id; ?>','trailer.php?id=<?php echo $title; ?>','width=480,height=430,scrollbars=no,toolbar=no,location=no'); return false">Klik hier om de trailer te bekijken</a> (Beta)</td></tr>
        <?php if ($row['comment'] != "") { ?><tr><td width="15%" class="label">Aanvullende informatie</td><td><?php echo stripslashes($row['comment']); ?></td></tr><?php } ?>        
      </table>
    </td>

[Soultaker]

Ga eens debuggen...?

[monnick]

Soultaker schreef op zondag 25 juli 2010 @ 00:29:
Ga eens debuggen...?

Kijk daar heb ik nog eens wat aan! Ik ben niet compleet debiel hoor, ik heb al diverse dingen geprobeerd, maar zoals ik ook al in mijn TS aangeef lukt het niet. Vandaar dat ik hoop dat jullie me kunnen helpen. Met zo'n reactie kan ik vrij weinig

[Vinnienerd]

monnick schreef op zondag 25 juli 2010 @ 00:33:
[...]

Kijk daar heb ik nog eens wat aan! Ik ben niet compleet debiel hoor, ik heb al diverse dingen geprobeerd, maar zoals ik ook al in mijn TS aangeef lukt het niet. Vandaar dat ik hoop dat jullie me kunnen helpen. Met zo'n reactie kan ik vrij weinig

Ga eens debuggen. Wat zijn de foutmeldingen die je krijgt in IE?

[monnick]

Zie de laatste link in IE De rij waar je op klikt veranderd in het loading icoontje wat hoort te verdwijnen als de xmlhttp request is afgehandeld. Maar dit gebeurt niet en de uitgebreide informatie verschijnt niet.

[woutertje]

Is er een specifieke reden dat je geen JQuery gebruikt? Dat framework handelt in de achtergrond de verschillen af tussen FF en IE zodat jij je kunt focussen op de functionaliteit.

Edit: ohja, het is tegenwoordig sowieso hip om het te gebruiken

[ Voor 16% gewijzigd door woutertje op 25-07-2010 00:43 ]

[MueR]

Behalve dat dit een Javascript probleem is en het dus in WEB hoort, is het ook nog eens een basic debug topic. Je krijgt ook in IE gewoon foutmeldingen en die kan je ook gewoon bekijken en daarop handelen. Nu dump je wat javascript, wat compleet irrelevante html en verwacht je dat wij je gaan vertellen hoe het moet. Zoals je weet werken we zo niet. Ik ga je topic dan ook sluiten.

woutertje schreef op zondag 25 juli 2010 @ 00:43:
Edit: ohja, het is tegenwoordig sowieso hip om het te gebruiken

Als er een brakke reden is om jquery/mootools/whatever te gebruiken is dit het wel. Je gebruikt in de eerste plaats een framework om je een hoop cross-browser compatibiliteit debugwerk te besparen, niet omdat het hip is.

offtopic:
Daarbij vind ik jQuery echt een enorm prut framework, maar dat terzijde.