[IE7] Afbeeldingen worden niet getoond in een AJAX pagina

[Barracuda_82]

In een project waar ik mee bezig ben zijn we een "mediabank" aan het maken om afbeeldingen, audio, video, etc. te verzamelen. De pagina's in deze mediabank worden dmv AJAX opgebouwd. Dit werkt best prettig, alleen worden in IE7 de afbeeldingen meestal niet getoond.

Firefox:


IE 7:


Op het moment dat je een afbeelding aanklikt wordt onderin de pagina de afbeelding wel weergegeven. Helaas kan ik geen voorbeeld online zetten omdat dat een beetje lastig word.

Iemand enig idee wat dit probleem zou kunnen zijn?

[Fatamorgana]

Misschien kun je hier wel wat stukken code posten? Zonder code blijft het gokken wat er mis kan gaan.

[Barracuda_82]

Ik ben er inmiddels wel achter dat als de plaatjes ergens als background-image in staan ze wel gewoon weer worden gegeven, maar niet als ze gewoon als IMG worden gebruikt.

Dit is een stukje van de code in de include die door het AJAX script aangeroepen word:

PHP:

// DIT WERKT DUS WEL...
echo '<div style="background: url('._ROOTURL.'common_files/icons/map_groot.jpg); width: 50px; height: 50px" ></div>';

 

// DIT WERKT DUS NIET...
foreach ($folders as $folder){
  $filepath = _ROOTURL.'common_files/icons/map_groot.jpg';
  $fileCount = $ms->countFilesInFolder($folder->id);
    echo '<span class="folderThumbContainer" onclick="selectThis(this, \''.$folder->name.'\', \'0\',\'Folder\',\'0\',\'0\',\''.$filepath.'\',\'0\');" id="blok'.$i.'">';
  echo '<div style="width: 55px;float: left;">';
    echo '<div class="folderThumbnail">';
    echo '<a href="javascript:loadContent('.$folder->id.',new Array())">';    
    echo '<img src="'.$filepath.'" width="'.$thumbWidth.'" height="'.$thumbHeight.'" alt="'.$folder->name.'" >';
    echo '</a>';
    echo '</div>';
  echo '</div>';
  echo '<div class="titelContainer">';
    echo '<h4>'.$folder->name.'</h4><br />'.$fileCount.' Bestanden';
  echo '</div>';
  echo '</span>';
}

[Fatamorgana]

Zo te zien maak jij HTML en kwak je dat in je pagina via AJAX, heb ik dat goed?

Zelf doe ik het tot nu toe altijd zo: Ik maak XML met de benodigde gegevens van de plaatjes en via AJAX haal ik die XML op waarna ik de plaatjes toevoeg aan de pagina. Ik maak dus met javascript de plaatjes realtime aan adhv de XML en dat werkt hier zonder problemen.

[Barracuda_82]

Fatamorgana schreef op woensdag 30 mei 2007 @ 09:22:
Zo te zien maak jij HTML en kwak je dat in je pagina via AJAX, heb ik dat goed?

Zelf doe ik het tot nu toe altijd zo: Ik maak XML met de benodigde gegevens van de plaatjes en via AJAX haal ik die XML op waarna ik de plaatjes toevoeg aan de pagina. Ik maak dus met javascript de plaatjes realtime aan adhv de XML en dat werkt hier zonder problemen.

Dat heb je goed gezien. Er zijn een aantal verschillende includes die HTML genereren en deze worden dmv AJAX in de pagina gekwakt.

Om eerlijk te zijn is dit voor mij de eerste echte keer dat ik met AJAX werk en deze AJAX code is door een collega geschreven, dus eigenlijk heb ik geen idee waar ik mee bezig ben

Om nu alles op de schop te gooien en het met XML te gaan maken is ook weer zo iets en kost waarschijnlijk veel te veel tijd en moeite. Ik hoop eigenlijk dat het met een of andere IE-hack op te lossen is.

[RM-rf]

Barracuda_82 schreef op woensdag 30 mei 2007 @ 09:04:

Dit is een stukje van de code in de include die door het AJAX script aangeroepen word:

de fout zit hoogstwaarschijnlijk niet in de serverside code, (anders werd er helemaal niks getoond maar bv een 'foutmelding') maar in de clientside code

om te debuggen zul je dus de geparsede code zoals die in de browser geinteprteerd dient te worden aanzien...

helemaal prettig is als je bv in Firefox de Develloper Toolbar installeert die 'View Generated Source' heeft, waarbij je zelfs door javascript gegenereerde codeblokken kunt laten weergeven in de codeview (voor AJAX eigenlijk zeer noodzakelijk)

Waar ik zou vermoeden dat het bij jouw foutgaat is de paths naar de afbeeldingen, vermoedelijk staan deze verkeerd (die moeten dus geldig zijn vanuit de pagina waarin die afbeeldingen worden weergegeven, óf het moeten absolute paden zijn.)

[crisp]

Volgens mij is het een bekend gegeven dat IE images die via <img>-tags middels innerHTML in een pagina 'gekwakt' worden in bestaande situaties niet wil inladen. Ik weet niet precies meer of dat nou een headers-issues was of niet. Zelf gebruik ik meestal netjes DOM methoden om clientside markup aan te maken en ben dit probleem sindsdien ook niet meer tegengekomen.

Edit: ik bedenk me net dat het te maken kan hebben met javascript: url's: http://therealcrisp.xs4al...vascript-pseudo-protocol/
Ik zie je deze bad practice ook al in je response-data bezigen; mogelijk dat het omzetten naar onclick handlers van je diverse AJAX-acties het probleem al oplost (al dan niet mbv anchors, maar dan moet je natuurlijk wel een fatsoenlijke href opgeven (non-JS support) en de default action cancellen vanuit je onclick handler).

In short: bij het uitvoeren van een href op een A-element gaat IE in een ander soort 'state' waarbij hij stopt met het inladen van externe data en ook bijvoorbeeld animaties (animated gifs) stopt, zelfs al is het uiteindelijk een javascript actie waarbij niet echt genavigeerd wordt.

[ Voor 56% gewijzigd door crisp op 30-05-2007 10:18 ]

[BikkelZ]

Barracuda_82 schreef op woensdag 30 mei 2007 @ 09:27:
[...]


Dat heb je goed gezien. Er zijn een aantal verschillende includes die HTML genereren en deze worden dmv AJAX in de pagina gekwakt.

Om eerlijk te zijn is dit voor mij de eerste echte keer dat ik met AJAX werk en deze AJAX code is door een collega geschreven, dus eigenlijk heb ik geen idee waar ik mee bezig ben

Om nu alles op de schop te gooien en het met XML te gaan maken is ook weer zo iets en kost waarschijnlijk veel te veel tijd en moeite. Ik hoop eigenlijk dat het met een of andere IE-hack op te lossen is.

Er bestaan natuurlijk wel meer mogelijkheden dan XML om iets voor elkaar te krijgen met AJAX (al is het dan natuurlijk eigenlijk geen AJAX meer ). Je zou met JSON kunnen werken, dat werkt wat meer native met JavaScript.

Waar je denk ik niet aan gaat ontkomen is dat je het DOM gaat manipuleren, in plaats van met innerHTML aan de gang gaat. Ik denk dat als je uberhaupt ooit verder dan dit wil komen met AJAX, dat je je die technieken (een beetje) eigen moet zien te maken, en het is gewoon heel handig als je ze onder de knie hebt.

Ik ben overigens een groot voorstander van innerHTML, dat is redelijk veilig en heel snel. Maar je moet wel weten waarom en wanneer je het gebruikt, en het niet als enige optie hebben.

[crisp]

BikkelZ schreef op woensdag 30 mei 2007 @ 10:14:
[...]


Er bestaan natuurlijk wel meer mogelijkheden dan XML om iets voor elkaar te krijgen met AJAX (al is het dan natuurlijk eigenlijk geen AJAX meer ). Je zou met JSON kunnen werken, dat werkt wat meer native met JavaScript.

De 'XML' in XMLHttpRequest is ook alleen maar toegevoegd omdat het toendertijd hip was, het heeft meer met HTTP te maken dan met XML en dat geldt ook voor AJAX zelf - of is het ineens ook geen AJAX meer als je een synchroon request doet ipv een asynchroon request?

[soulrider]

Barracuda_82 schreef op woensdag 30 mei 2007 @ 09:04:
Ik ben er inmiddels wel achter dat als de plaatjes ergens als background-image in staan ze wel gewoon weer worden gegeven, maar niet als ze gewoon als IMG worden gebruikt.

Dit is een stukje van de code in de include die door het AJAX script aangeroepen word:

PHP:

// DIT WERKT DUS WEL...
echo '<div style="background: url('._ROOTURL.'common_files/icons/map_groot.jpg); width: 50px; height: 50px" ></div>';

 

// DIT WERKT DUS NIET...
foreach ($folders as $folder){
  $filepath = _ROOTURL.'common_files/icons/map_groot.jpg';
  $fileCount = $ms->countFilesInFolder($folder->id);
    echo '<span class="folderThumbContainer" onclick="selectThis(this, \''.$folder->name.'\', \'0\',\'Folder\',\'0\',\'0\',\''.$filepath.'\',\'0\');" id="blok'.$i.'">';
  echo '<div style="width: 55px;float: left;">';
    echo '<div class="folderThumbnail">';
    echo '<a href="javascript:loadContent('.$folder->id.',new Array())">';    
    echo '<img src="'.$filepath.'" width="'.$thumbWidth.'" height="'.$thumbHeight.'" alt="'.$folder->name.'" >';
    echo '</a>';
    echo '</div>';
  echo '</div>';
  echo '<div class="titelContainer">';
    echo '<h4>'.$folder->name.'</h4><br />'.$fileCount.' Bestanden';
  echo '</div>';
  echo '</span>';
}

sluit je img tag even correct af:

code:

    echo '<img src="'.$filepath.'" width="'.$thumbWidth.'" height="'.$thumbHeight.'" alt="'.$folder->name.'" >';

zou het volgende moeten zijn:

code:

    echo '<img src="'.$filepath.'" width="'.$thumbWidth.'" height="'.$thumbHeight.'" alt="'.$folder->name.'" />';

dit zou het verschil kunnen maken in IE7
(lijkt me vreemd mits IE meestal tag-fout vergevelijker is dan andere browsers.
werkt het wel correct in bv firefox ?)

anders even je gegenereerde html bekijken en daarin gaan kladden
en zodra het werkt zorgen dat je php de juiste code uitgeeft...
(eerst standaard html draaiend hebben, dan automatiseren)

(we mogen aannemen dat $thumbWidth en $thumbHeight ergens op voorhand gelijk gesteld worden aan "50px" ?
zodat je zelfde breedte en hoogte krijgt als hierboven in je background ?
anders kan het daaraan al liggen : geen waarde toegekend = 0 en dan heb je wel je images maar 0x0px en dus niet zichtbaar maar wel in de html-code...)

[Barracuda_82]

@soulrider:
Goed gezien idd van die IMG tag, maar dat is het probleem ook niet. Alle andere dingen die je aandraagt trouwens ook niet.

@RM-rf:
Ik wist niet dat de developertoolbar de generated source weer kon geven. Erg handig! De paden staan helemaal goed, dus daar kan het niet aan liggen. Als ik rechtermuisklik->properties doe op de plek waar de afbeelding zou moeten staan, klopt de URL precies (copy->paste in de adresbalk toont de afbeelding gewoon).

@Crisp:
Ik ben er inmiddels achter dat het hoogstwaarschijnlijk een probleem met innerHTML is. Als ik dit gebruik werkt het dus niet:

code:

document.getElementById('explorerRight' ).innerHTML = xmlHttp.responseText;

Maar als ik dit daarvoor in de plaats zet worden de afbeeldingen wel gewoon getoond:

code:

document.write(xmlHttp.responseText);

[crisp]

soulrider schreef op woensdag 30 mei 2007 @ 11:57:
[...]

sluit je img tag even correct af:

que? in HTML heeft het IMG-element helemaal geen sluittag, en XML-style empty-elements is hier helemaal niet aan de orde - IE ondersteund niet eens XHTML en het heet niet voor niets innerHTML

Barracuda_82 schreef op woensdag 30 mei 2007 @ 12:17:
@Crisp:
Ik ben er inmiddels achter dat het hoogstwaarschijnlijk een probleem met innerHTML is. Als ik dit gebruik werkt het dus niet:

En hoe wordt de Ajax-actie in eerste instantie getriggered? middels een javascript: url of niet?

[Barracuda_82]

crisp schreef op woensdag 30 mei 2007 @ 12:29:
[...]

que? in HTML heeft het IMG-element helemaal geen sluittag, en XML-style empty-elements is hier helemaal niet aan de orde - IE ondersteund niet eens XHTML en het heet niet voor niets innerHTML


[...]

En hoe wordt de Ajax-actie in eerste instantie getriggered? middels een javascript: url of niet?

Nop, na het opbouwen van de pagina wordt een JS aangeroepen:

JavaScript:

<script type="text/javascript">
   loadContent(<?=$folder->id?>,new Array(<?=$subfolderString?>));
</script>

[crisp]

Je zou kunnen kijken of het helpt als je die functie pas onload uitvoert:

JavaScript:

window.onload = function()
{
    loadContent(<?=$folder->id?>,[<?=$subfolderString?>]);
}

[Barracuda_82]

crisp schreef op woensdag 30 mei 2007 @ 12:41:
Je zou kunnen kijken of het helpt als je die functie pas onload uitvoert:

JavaScript:

window.onload = function()
{
    loadContent(<?=$folder->id?>,[<?=$subfolderString?>]);
}

Nop, heeft ook geen effect.

Ik ga nu even proberen om alle andere scripts in de site te disablen. Misschien is het een conflict met een ander script.

Dat is het dus! Net alle scripts uit de head gehaald en nu werkt het. Nu nog even uitzoeken met welk ander script het conflict is. Het is een conflict met het sleight.js script (een script dat er voor zorgt dat PNG's werken onder IE6).

De oplossing!!
Als eerste wordt in dat sleight.js script gekeken of je IE gebruikt, en als dat zo is hide ie alle afbeeldingen en roept een functie aan die alle img's aanpast zodat ze PNG's kunnen tonen. Nu roep ik deze functie aan nadat de content in de pagina 'gekwakt' wordt en nu werkt het.

De probleemregels:

JavaScript:

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
    document.writeln('<style type="text/css">img, input.image { visibility:hidden; } </style>');
    window.attachEvent("onload", fnLoadPngs);
}

De fnLoadPngs functie roep ik nu aan na elke "refresh":

JavaScript:

function test(xmlHttp,subs,folderId){
    if(xmlHttp.readyState  == 4 && (xmlHttp.status==200 || window.location.href.indexOf("http")==-1)) {     
    document.getElementById('explorerRight' ).innerHTML = xmlHttp.responseText;     
    showSubfolders(subs,folderId);
    setActiveFolder(folderId);    
    initLightbox();  
    fnLoadPngs();  
    }
}

Zo blijkt iets uiteindelijk toch maar heel simpel te zijn en binnen een minuut opgelost, maar soms kan het zo lang duren voor je er achter bent wat het probleem is. Iets dergelijks had ik dus ook met de lightbox om de plaatjes te tonen. Zoals je kunt zien roep ik die ook aan in bovenstaande functie, omdat die een vergelijkbaar probleem had.

[ Voor 70% gewijzigd door Barracuda_82 op 30-05-2007 14:04 ]

[soulrider]

crisp schreef op woensdag 30 mei 2007 @ 12:29:
[...]

que? in HTML heeft het IMG-element helemaal geen sluittag, en XML-style empty-elements is hier helemaal niet aan de orde - IE ondersteund niet eens XHTML en het heet niet voor niets innerHTML


[...]

mits ie wel

code:

<br />

gebruikt mag ik aannemen dat ie een xhtml-manier van tagging gebruikt en dus kan dit best ook aangehouden worden met een img-tag.
uniformiteit: alles of nix op foute wijze
(ik misbruik zelf ook de innertext en innerhtml bij eigen interne pagina's afh. wat er allemaal moet gebeuren ... nog niet xml-gezind hier )

zoals ik al aangaf was kans klein tot niet bestaand als oplossing,
wat nu een conflict met een ander .js-gedeelte bleek te zijn.

[crisp]

Barracuda_82 schreef op woensdag 30 mei 2007 @ 13:49:
[...]

Als eerste wordt in dat sleight.js script gekeken of je IE gebruikt, en als dat zo is hide ie alle afbeeldingen en roept een functie aan die alle img's aanpast zodat ze PNG's kunnen tonen. Nu roep ik deze functie aan nadat de content in de pagina 'gekwakt' wordt en nu werkt het.

Zo te zien sluit hij IE7 niet uit, terwijl die deze workaround niet nodig heeft. Persoonlijk zou ik gewoon conditional comments of conditional compilation gebruiken hiervoor ipv deze ranzige browser-sniff

[Barracuda_82]

crisp schreef op woensdag 30 mei 2007 @ 15:19:
[...]

Zo te zien sluit hij IE7 niet uit, terwijl die deze workaround niet nodig heeft. Persoonlijk zou ik gewoon conditional comments of conditional compilation gebruiken hiervoor ipv deze ranzige browser-sniff

Die conditional comments of conditional compilation zou ik ook graag gebruiken als ik wist wat het zou zijn

* Barracuda_82 is niet zo'n gruwelijke held met JS.

[moozzuzz]

Barracuda_82 schreef op woensdag 30 mei 2007 @ 15:21:
[...]


Die conditional comments of conditional compilation zou ik ook graag gebruiken als ik wist wat het zou zijn

* Barracuda_82 is niet zo'n gruwelijke held met JS.

http://www.google.be/sear...onditional+comments&meta=