PDA

View Full Version : [JavaScript & Ajax] Eseguire script dopo chiamata Ajax


tiinho
30-05-2015, 10:28
Ciao, io uso questo codice per sostituire il main della mia mia index con in contenuto di un altra pagina.

var cartip=document.createElement("div") //Dynamically create tooltip element
cartip.setAttribute("id", "cartooltip")
document.body.appendChild(cartip)
var cartooltipobj=document.getElementById("cartooltip")
var rightcolumnobj=document.getElementById("rightcolumn")

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

document.getElementById("rightcolumn").onmouseover=function(){ //show tooltip
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"
}

document.getElementById("rightcolumn").onmouseout=function(){ //hide tooltip
document.getElementById("cartooltip").style.visibility="hidden"
}

Più questo:


<script type="text/javascript">
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

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)
}
page_request.open('GET', url, 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>


Ho notato che quando vado a caricare una pagina tramite la funzione ajax, all'interno di essa non mi funziona nessun tipo di javascript ad esempio il apri e chiudi di un div. Tengo a precisare che la pagina che carico tramite ajax ha solo html, lo scipt è presente nella pagina principale dove viene caricata, ha giusto la classe dello script che dovrebbe eseguire.

Grazie

Come mai?

paooolino
31-05-2015, 20:05
perchè dopo aver sostituito l'html, gli eventi che avevi associato ai vari elementi della pagina non sono più validi, poichè gli elementi stessi sono stati sovrascritti.

devi riattaccarli

in altre parole, dovresti mettere tutto il codice che attacca gli eventi (onmouseover, onmouseout...) agli elementi della pagina in una funzione, e rieseguirla dopo aver settato la proprietà innerHTML della funzione loadpage.

tiinho
01-06-2015, 11:44
perchè dopo aver sostituito l'html, gli eventi che avevi associato ai vari elementi della pagina non sono più validi, poichè gli elementi stessi sono stati sovrascritti.

devi riattaccarli

in altre parole, dovresti mettere tutto il codice che attacca gli eventi (onmouseover, onmouseout...) agli elementi della pagina in una funzione, e rieseguirla dopo aver settato la proprietà innerHTML della funzione loadpage.
OK grazie. siccome non mastico molto di queste cose devo mettere tutto qui: 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
}

dopo innerHTML=page_request.responseText.

Io avrei bisogno di inserire una funzione per lo slider di immagini, ne ho scaricato una open source solo che è molto complessa e non so cosa devo inserire dopo iiinerhtml posso postartela??