[JS] Vreemd probleem met DIV dynamische content - Softwareontwikkeling

donderdag 25 oktober 2007 22:30

Acties:

Verwijderd

Topicstarter

Goedenavond,

Nu weet ik dat er eigenlijk geen support geleverd wordt op gedownloade scripts.
Ik hoop dat het in dit geval anders ligt.
_{Ik post al langer op t.net vandaar dat ik eerder geneigd ben hier te posten dan ergens anders}

Het onderstaande script heb ik van dynamic drive en is een eenvoudig script dat losse pagina's dmv javascript laad en in een DIVje plaatst.

Nu weet ik persoonlijk weinig van javascript en heb ik het script gedownload om uit te vinden hoe het werkt en hier wat van te leren.

Puur educatief dus zal ik maar zeggen, want ik wil erg graag wat meer leren over Javascript.

Over het algemeen ben ik er redelijk achter hoe het werkt.
Alleen één ding is mij totaal niet duidelijk.

Het script werkt namelijk als volgt :
Je hebt een link, in die link roep je een javascript aan en daarin het bronbestand en de target div.

code:

1	<a href="javascript:ajaxpage('bronbestand.htm', 'targetdiv');">klik</a>

Dit werkt allemaal prima. Zodra je op het linkje klikt wordt de content uit bronbestand.htm geladen in de targetdiv.

Als ik een andere layer wil kiezen om het bronbestand.htm in te tonen hoef ik slechts als target een andere DIV id op te geven.
Werkt ook prima.

Maar nu is er echter een probleem.

Er zit ook een functie in het script om een CSS toe te passen op het bestand dat geladen wordt.
Deze werkt prima als je de naam van het target DIV ongewijzigd laat.
Echter zodra je de DIV een andere naam geeft werkt het laden van de content erin nog wel prima.
Maar het CSS werkt totaal niet.

En ik kan nergens in het javascript vinden waarom het nou niet anders zou werken

code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>fiets</title>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
</head>

<body>

<div id="leftcolumn">
<a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>

<div style="margin-top: 2em">Load CSS & JS files</div>
<a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>

</div>

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>


</body>

</html>

Zoals je ziet wordt doormiddel van de link op regel 82

code:

1	<a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>

De javascript functie ajaxpage geladen en die de waarde doorgegeven ajaxfiles/external2.htm en rightcolumn.

De tekst in het bronbestand van external2.htm zal vervolgens door de functie worden uitgespuugd in het divje rightcolumn op regel 90

code:

1	<div id="rightcolumn"><h3>Choose a page to load.</h3></div>

Hetzelfde geld voor de link op regel 86

code:

1	<a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>

Deze roept de functie loadobjs aan en laad de waarden ajaxfiles/style.css en ajaxfiles/tooltip.js.

Deze verzorgt er volgens voor dat het CSS bestand ajaxfiles/style.css toegepast word op de layer rightcolumn.
Het vreemde hieraan vind ik echter dat er nergens opgegeven wordt dat hij het stylesheet toepast op de div "rightcolumn".
Of tenminste ik zie niet waar het wordt opgegeven.

Want zodra ik de naam van de target layer wijzig werkt gelijk de functie loadobjs niet meer en wordt het stylesheet niet meer toegepast.

Ziet iemand misschien waar dit opgegeven wordt?

In ieder geval TIAD

donderdag 25 oktober 2007 22:35

Acties:

Grijze Vos

Post de content van die css file eens..

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

donderdag 25 oktober 2007 22:37

Acties:

frickY

Ik ben na de helft gestopt met lezen, want ik vermoed dat je vergeet de naam van je DIVje ook in het CSSje te wijzigen.

donderdag 25 oktober 2007 22:38

Acties:

SKiLLa

Byte or nibble a bit ?

Grijze Vos was me voor

En heb je die nieuwe "eigen" div ook wel een "ID" gegeven ? Welke JS error krijg je als die loadobjs functie niet meer werkt ? Zeg niet geen, want dan moet je eens in de opties van je browser rommelen

'Political Correctness is fascism pretending to be good manners.' - George Carlin

donderdag 25 oktober 2007 22:39

Acties:

Verwijderd

Topicstarter

frickY schreef op donderdag 25 oktober 2007 @ 22:37:
Ik ben na de helft gestopt met lezen, want ik vermoed dat je vergeet de naam van je DIVje ook in het CSSje te wijzigen.

Nopez dat ben ik niet vergeten

css in het hoofd bestand

code:

<style type="text/css">
#leftcolumn{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#leftcolumn a:hover{
background-color: #FFFF80;
}

#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>

css dat geladen wordt

code:

#rightcolumn{
background-color: #E0FFB3;
}

#cartooltip{
position: absolute;
visibility: hidden;
background-color: lightyellow;
border: 2px solid red;
padding: 5px;
font-size: 120%;
font-weight: bold;
}

Maar ik ging d'r eigenlijk al van uit dat ik dat niet hoefde te posten want al verwijder je al de CSS code uit het eerste bestand. Het script blijft functioneren zolang je het target div maar rightcolumn blijft noemen.

donderdag 25 oktober 2007 22:46

Acties:

Verwijderd

Topicstarter

SKiLLa schreef op donderdag 25 oktober 2007 @ 22:38:
Grijze Vos was me voor En heb je die nieuwe "eigen" div ook wel een "ID" gegeven ? Welke JS error krijg je als die loadobjs functie niet meer werkt ? Zeg niet geen, want dan moet je eens in de opties van je browser rommelen

Nee dat zeg ik ook nie :-D
Opera error console says :

JavaScript - http://localhost/AJAX/customcars/
Inline script thread
Error:
name: TypeError
message: Statement on line 19: Could not convert undefined or null to object
Backtrace:
Line 19 of linked script http://localhost/AJAX/customcars/ajaxfiles/tooltip.js
document.getElementById("rightcolumn").onmouseover = (function ()
{
var titletext = document.getElementById("cartitle") ? (document.getElementById("cartitle")).innerHTML : "DD Forums Archive";
cartooltipobj.innerHTML = titletext;
cartooltipobj.style.left = rightcolumnobj.offsetLeft + rightcolumnobj.offsetWidth - 180 + "px";
cartooltipobj.style.top = rightcolumnobj.offsetTop + rightcolumnobj.offsetHeight - 40 + "px";
cartooltipobj.style.visibility = "visible";
}
);

Het vreemde is overigens dat zodra ik een tweede link aanmaak waarbij alleen het stylesheet wordt aangeroepen (*welk overigens werkt als ik het target div gewoon op standaard laat [rightcolumn] *) geen error console gestart wordt. Maar wel wanneer ik zowel het stylesheet probeer aan te roepen als het tooltip js bestandje.
Zoals je ziet gaat de error melding hier overigens ook over.

[ Voor 14% gewijzigd door Verwijderd op 25-10-2007 22:49 ]

donderdag 25 oktober 2007 22:47

Acties:

Grijze Vos

Verwijderd schreef op donderdag 25 oktober 2007 @ 22:39:

code:

#rightcolumn{            <---- 
background-color: #E0FFB3;
}

#cartooltip{
position: absolute;
visibility: hidden;
background-color: lightyellow;
border: 2px solid red;
padding: 5px;
font-size: 120%;
font-weight: bold;
}

Spot de visuele tip.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

donderdag 25 oktober 2007 22:51

Acties:

Verwijderd

Topicstarter

Grijze Vos schreef op donderdag 25 oktober 2007 @ 22:47:
[...]

Spot de visuele tip.

Ja dat had ik al gezien. En ook die heb ik gewijzigd in (you name it, van fiets tot kaasschaaf).
Het blijft niet functionerend zolang ik het niet rightcolumn noem.

vrijdag 26 oktober 2007 17:57

Acties:

moozzuzz

HTML:

1
2
3

<a href="javascript:ajaxpage('bronbestand.htm', 'fiets');">klik</a> 
...
<div id="fiets">wordt gevuld</div>

Cascading Stylesheet:

1
2
3

#fiets{
background-color: #E0FFB3;
}

werkt dit?

zondag 28 oktober 2007 19:53

Acties:

Verwijderd

Topicstarter

moozzuzz schreef op vrijdag 26 oktober 2007 @ 17:57:
HTML:
1
2
3
<a href="javascript:ajaxpage('bronbestand.htm', 'fiets');">klik</a> 
...
<div id="fiets">wordt gevuld</div>
Cascading Stylesheet:
1
2
3
#fiets{
background-color: #E0FFB3;
}
werkt dit?

Ook dat pakt hij om één of andere reden niet.
Het lijkt me voor zover ik kan zien niet dat ik ergens een ID verkeerd heb staan.
Of dat ik hem ergens niet benoemd heb.

Vaag

dinsdag 30 oktober 2007 09:32

Acties:

moozzuzz

Werkt het om enkel een ander css bestand te laden, zonder de tooltip.js (die expliciet naar rightcolumn verwijst btw).

Pagina: 1

Reageer