Link aanpassen met javascript (wel in IE, niet in FF)
Ik heb een website en daarin wordt met Ajax informatie geladen. Nu werkt dat allemaal op het aanpassen van enkele links na. In Internet Explorer werkt het prima, in FireFox niet en ik kan niet vinden waarom niet.
Ik heb de volgende code:
Code (php)
1
2
3
4
5
2
3
4
5
<a id="onlineuserpicturelink1"><span id="onlineuserpicture1" class="onlineuserpicture1"></span></a>
<a id="onlineuserpicturelink2"><span id="onlineuserpicture2" class="onlineuserpicture2"></span></a>
<a id="onlineuserpicturelink3"><span id="onlineuserpicture3" class="onlineuserpicture3"></span></a>
<a id="onlineuserpicturelink4"><span id="onlineuserpicture4" class="onlineuserpicture4"></span></a>
<a id="onlineuserpicturelink5"><span id="onlineuserpicture5" class="onlineuserpicture5"></span></a>
<a id="onlineuserpicturelink2"><span id="onlineuserpicture2" class="onlineuserpicture2"></span></a>
<a id="onlineuserpicturelink3"><span id="onlineuserpicture3" class="onlineuserpicture3"></span></a>
<a id="onlineuserpicturelink4"><span id="onlineuserpicture4" class="onlineuserpicture4"></span></a>
<a id="onlineuserpicturelink5"><span id="onlineuserpicture5" class="onlineuserpicture5"></span></a>
Nu wil ik van de a de href aanpassen met de volgende code (iets anders, want gebeurt met Javascript, maar dit is even voor het idee):
Code (php)
1
2
3
4
5
2
3
4
5
document.getElementById('onlineuserpicturelink1').href = '1';
document.getElementById('onlineuserpicturelink2').href = '2';
document.getElementById('onlineuserpicturelink3').href = '3';
document.getElementById('onlineuserpicturelink4').href = '4';
document.getElementById('onlineuserpicturelink5').href = '5';
document.getElementById('onlineuserpicturelink2').href = '2';
document.getElementById('onlineuserpicturelink3').href = '3';
document.getElementById('onlineuserpicturelink4').href = '4';
document.getElementById('onlineuserpicturelink5').href = '5';
In Internet Explorer krijgen alle a's hun eigen link zoals het hoort. In FireFox krijgen ze vreemd genoeg alle 5 de link van het laatste element (dus van onlinuserpicturelink5). Iemand enig idee hoe dat zou kan?
De website is te vinden op www.datepunt.nl en dan gaat het om de 5 foto's van de nieuwe leden als de onlineleden (de links werken nog niet echt, maar ik probeer eerst even te zorgen dat het werkt).
Alvast bedankt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script>
function setHref()
{
document.getElementById('onlineuserpicturelink1').href = '1';
document.getElementById('onlineuserpicturelink2').href = '2';
document.getElementById('onlineuserpicturelink3').href = '3';
document.getElementById('onlineuserpicturelink4').href = '4';
document.getElementById('onlineuserpicturelink5').href = '5';
}
</script>
</head>
<body>
<a id="onlineuserpicturelink1"><span id="onlineuserpicture1" class="onlineuserpicture1"></span></a>
<a id="onlineuserpicturelink2"><span id="onlineuserpicture2" class="onlineuserpicture2"></span></a>
<a id="onlineuserpicturelink3"><span id="onlineuserpicture3" class="onlineuserpicture3"></span></a>
<a id="onlineuserpicturelink4"><span id="onlineuserpicture4" class="onlineuserpicture4"></span></a>
<a id="onlineuserpicturelink5"><span id="onlineuserpicture5" class="onlineuserpicture5"></span></a>
<div onClick="setHref()" style="cursor: pointer">Klik om de href te zetten</div>
</body>
</html>
<head>
<script>
function setHref()
{
document.getElementById('onlineuserpicturelink1').href = '1';
document.getElementById('onlineuserpicturelink2').href = '2';
document.getElementById('onlineuserpicturelink3').href = '3';
document.getElementById('onlineuserpicturelink4').href = '4';
document.getElementById('onlineuserpicturelink5').href = '5';
}
</script>
</head>
<body>
<a id="onlineuserpicturelink1"><span id="onlineuserpicture1" class="onlineuserpicture1"></span></a>
<a id="onlineuserpicturelink2"><span id="onlineuserpicture2" class="onlineuserpicture2"></span></a>
<a id="onlineuserpicturelink3"><span id="onlineuserpicture3" class="onlineuserpicture3"></span></a>
<a id="onlineuserpicturelink4"><span id="onlineuserpicture4" class="onlineuserpicture4"></span></a>
<a id="onlineuserpicturelink5"><span id="onlineuserpicture5" class="onlineuserpicture5"></span></a>
<div onClick="setHref()" style="cursor: pointer">Klik om de href te zetten</div>
</body>
</html>
Hoe probeer jij precies dit aan te spreken? document.getElementById('onlineuserpicturelink1').href = '1';
Ik vind dat bij jou nergens weer.
[Een beetje off topic]
Trouwens, dit is ook vrij onzinnig:
id="onlineuserpicture2" class="onlineuserpicture2"
Je kan in css ook de id aanspreken, het is niet nodig dit dubbel te schrijven
[/Een beetje off topic]
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
Het werkt ook wel, maar alleen in IE en dat is het lastige.
Ik haal via AJAX iformatie op, dat return ik met een JSON. Hier een voorbeeld JSON:
Code (php)
1
2
2
result = {"limit":0,"maxpage":5,"maxnr":"8","style_onlineuserpicture1":"url(images\/samples\/sample2.jpg)","style_onlineuserpicture2":"url(images\/samples\/sample11.jpg)","style_onlineuserpicture3":"url(images\/samples\/sample13.jpg)","style_onlineuserpicture4":"url(images\/samples\/sample8.jpg)","style_onlineuserpicture5":"url(images\/samples\/sample3.jpg)","href_onlineuserpicturelink1":"2","href_onlineuserpicturelink2"
:"12","href_onlineuserpicturelink3":"14","href_onlineuserpicturelink4":"8","href_onlineuserpicturelink5":"3"}
:"12","href_onlineuserpicturelink3":"14","href_onlineuserpicturelink4":"8","href_onlineuserpicturelink5":"3"}
Die parse ik met javascript. Hieronder de belangrijke code (een en ander is weggehaald, dus bepaalde haakjes kloppen mogelijk niet:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if(xhr.status == 200) {
data = eval(xhr.responseText);
i = 0;
for (prop in data) {
i = i +1;
if ((type=="nieuw") && (i < 4)) {
//niet interessant
} else {
if (type=="online" && i < 4) {
} else {
if (prop.substr(0,6)=="style_") {
document.getElementById(prop.substr(6, prop.length-6)).style.background = data[prop];
} else if (prop.substr(0,5)=="href_") {
link = data[prop];
info = prop.substr(5, prop.length-5);
document.getElementById(info).href = link;
} else {
document.getElementById(prop).innerHTML = data[prop];
};
};
};
};
data = eval(xhr.responseText);
i = 0;
for (prop in data) {
i = i +1;
if ((type=="nieuw") && (i < 4)) {
//niet interessant
} else {
if (type=="online" && i < 4) {
} else {
if (prop.substr(0,6)=="style_") {
document.getElementById(prop.substr(6, prop.length-6)).style.background = data[prop];
} else if (prop.substr(0,5)=="href_") {
link = data[prop];
info = prop.substr(5, prop.length-5);
document.getElementById(info).href = link;
} else {
document.getElementById(prop).innerHTML = data[prop];
};
};
};
};
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
if(xhr.status == 200)
{
data = eval(xhr.responseText);
document.getElementById('onlineuserpicturelink1').href = data.href_onlineuserpicturelink1;
document.getElementById('onlineuserpicturelink2').href = data.href_onlineuserpicturelink2;
document.getElementById('onlineuserpicturelink3').href = data.href_onlineuserpicturelink3;
document.getElementById('onlineuserpicturelink4').href = data.href_onlineuserpicturelink4;
document.getElementById('onlineuserpicturelink5').href = data.href_onlineuserpicturelink5;
{
data = eval(xhr.responseText);
document.getElementById('onlineuserpicturelink1').href = data.href_onlineuserpicturelink1;
document.getElementById('onlineuserpicturelink2').href = data.href_onlineuserpicturelink2;
document.getElementById('onlineuserpicturelink3').href = data.href_onlineuserpicturelink3;
document.getElementById('onlineuserpicturelink4').href = data.href_onlineuserpicturelink4;
document.getElementById('onlineuserpicturelink5').href = data.href_onlineuserpicturelink5;
Verder zie ik bij jou een ongedeclareerde variabele type.
Ik zie ook niets van type in de JSON string.
Dit script deel is onderdeel van een groter algemener script. De code van jou kan ik niet gebruiken want dan moet ik honderden regels code gebruiken. Type is een parameter in de functie. Helaas kan ik met jouw code dus niks, alhoewel het misschien wel werkt. Mijn huidige code moet aangepast worden.
Mijn functies is een algemene JSON data-retriever/parser
Ik roep hem aan met:
Code (php)
1
function GetData(path, type)
Ziet iemand iets wat misschien fout is in mijn code wat betreft FireFox?
/update: is gefixed. Combinatie van CSS en javascript waardoor het nu werkt.
Gewijzigd op 01/01/1970 01:00:00 door Whatever Whatever