Ajax I Js - Połączenie Kodów

[MFrost]

Mam problem z połączeniem kilku kodów: Ajaxa z JavaScriptem, otóż mam taki kod

 

//** Ajax Tabs Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)//** Updated Oct 21st, 07 to version 2.0. Contains numerous improvementsvar ddajaxtabssettings={}ddajaxtabssettings.bustcachevar=1  //bust potential caching of external pages after initial request? (1=yes, 0=no)ddajaxtabssettings.loadstatustext="<img src='ajaxtabs/loading.gif' /> Requesting content..."////NO NEED TO EDIT BELOW////////////////////////function ddajaxtabs(tabinterfaceid, contentdivid){	this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container	this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container	this.enabletabpersistence=true	this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container	this.contentdivid=contentdivid	this.defaultHTML=""	this.defaultIframe='<iframe src="about:blank" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" class="tabcontentiframe" style="width:100%; height:auto; min-height: 100px"></iframe>'	this.defaultIframe=this.defaultIframe.replace(/<iframe/i, '<iframe name="'+"_ddajaxtabsiframe-"+contentdivid+'" ')this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)	this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")}ddajaxtabs.connect=function(pageurl, tabinstance){	var page_request = false	var bustcacheparameter=""	if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc		page_request = new XMLHttpRequest()	else if (window.ActiveXObject){ // if IE6 or below		try {		page_request = new ActiveXObject("Msxml2.XMLHTTP")		}		catch (e){			try{			page_request = new ActiveXObject("Microsoft.XMLHTTP")			}			catch (e){}		}	}	else		return false	var ajaxfriendlyurl=pageurl.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")	page_request.onreadystatechange=function(){ddajaxtabs.loadpage(page_request, pageurl, tabinstance)}	if (ddajaxtabssettings.bustcachevar) //if bust caching of external page		bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()	page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)	page_request.send(null)}ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){	var divId=tabinstance.contentdivid	document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){		document.getElementById(divId).innerHTML=page_request.responseText		ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)	}}ddajaxtabs.ajaxpageloadaction=function(pageurl, tabinstance){	tabinstance.onajaxpageload(pageurl) //call user customized onajaxpageload() function when an ajax page is fetched/ loaded}ddajaxtabs.getCookie=function(Name){	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair	if (document.cookie.match(re)) //if cookie found		return document.cookie.match(re)[0].split("=")[1] //return its value	return ""}ddajaxtabs.setCookie=function(name, value){	document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)}ddajaxtabs.prototype={	expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers		this.cancelautorun() //stop auto cycling of tabs (if running)		var tabref=""		try{			if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr				tabref=document.getElementById(tabid_or_position)			else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr				tabref=this.tabs[tabid_or_position]		}		catch(err){alert("Invalid Tab ID or position entered!")}		if (tabref!="") //if a valid tab is found based on function parameter			this.expandtab(tabref) //expand this tab	},	setpersist:function(bool){ //PUBLIC function to toggle persistence feature			this.enabletabpersistence=bool	},	loadajaxpage:function(pageurl){ //PUBLIC function to fetch a page via Ajax and display it within the Tab Content instance's container		ddajaxtabs.connect(pageurl, this)	},	loadiframepage:function(pageurl){ //PUBLIC function to fetch a page and load it into the IFRAME of the Tab Content instance's container		this.iframedisplay(pageurl, this.contentdivid)	},	setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")		this.selectedClassTarget=objstr || "link"	},	getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to		return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref	},	onajaxpageload:function(pageurl){ //PUBLIC Event handler that can invoke custom code whenever an Ajax page has been fetched and displayed		//do nothing by default	},	expandtab:function(tabref){		var relattrvalue=tabref.getAttribute("rel")		//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easy searching through		var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""		if (relattrvalue=="#default")			document.getElementById(this.contentdivid).innerHTML=this.defaultHTML		else if (relattrvalue=="#iframe")			this.iframedisplay(tabref.getAttribute("href"), this.contentdivid)		else			ddajaxtabs.connect(tabref.getAttribute("href"), this)		this.expandrevcontent(associatedrevids)		for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"			this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("href")==tabref.getAttribute("href"))? "selected" : ""		}		if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers			ddajaxtabs.setCookie(this.tabinterfaceid, tabref.tabposition)	},	iframedisplay:function(pageurl, contentdivid){		if (typeof window.frames["_ddajaxtabsiframe-"+contentdivid]!="undefined"){			try{delete window.frames["_ddajaxtabsiframe-"+contentdivid]} //delete iframe within Tab content container if it exists (due to bug in Firefox)			catch(err){}		}		document.getElementById(contentdivid).innerHTML=this.defaultIframe		window.frames["_ddajaxtabsiframe-"+contentdivid].location.replace(pageurl) //load desired page into iframe	},	expandrevcontent:function(associatedrevids){		var allrevids=this.revcontentids		for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface			//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it			document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"		}	},	autorun:function(){ //function to auto cycle through and select tabs based on a set interval		var currentTabIndex=this.automode_currentTabIndex //index within this.hottabspositions to begin		var hottabspositions=this.hottabspositions //Array containing position numbers of "hot" tabs (those with a "rel" attr)		this.expandtab(this.tabs[hottabspositions[currentTabIndex]])		this.automode_currentTabIndex=(currentTabIndex<hottabspositions.length-1)? currentTabIndex+1 : 0 //increment currentTabIndex	},	cancelautorun:function(){		if (typeof this.autoruntimer!="undefined")			clearInterval(this.autoruntimer)	},	init:function(automodeperiod){		var persistedtab=ddajaxtabs.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)		var persisterror=true //Bool variable to check whether persisted tab position is valid (can become invalid if user has modified tab structure)		this.automodeperiod=automodeperiod || 0		this.defaultHTML=document.getElementById(this.contentdivid).innerHTML		for (var i=0; i<this.tabs.length; i++){			this.tabs[i].tabposition=i //remember position of tab relative to its peers			if (this.tabs[i].getAttribute("rel")){				var tabinstance=this				this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers				this.tabs[i].onclick=function(){					tabinstance.expandtab(this)					tabinstance.cancelautorun() //stop auto cycling of tabs (if running)					return false				}				if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element					this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))				}				if (this.enabletabpersistence && parseInt(persistedtab)==i || !this.enabletabpersistence && this.getselectedClassTarget(this.tabs[i]).className=="selected"){					this.expandtab(this.tabs[i]) //expand current tab if it's the persisted tab, or if persist=off, carries the "selected" CSS class					persisterror=false //Persisted tab (if applicable) was found, so set "persisterror" to false					//If currently selected tab's index(i) is greater than 0, this means its not the 1st tab, so set the tab to begin in automode to 1st tab:					this.automode_currentTabIndex=(i>0)? 0 : 1				}			}		} //END for loop		if (persisterror) //if an error has occured while trying to retrieve persisted tab (based on its position within its peers)			this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr		if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){			this.automode_currentTabIndex=this.automode_currentTabIndex || 0			this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)		}	} //END int() function} //END Prototype assignment

plik główny demo.htm

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /><link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" /><script type="text/javascript" src="ajaxtabs/ajaxtabs.js">/************************************************ Ajax Tabs Content script v2.0- Š 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***********************************************/</script></head><body><h3>Demo #2- Expanding of arbitrary DIVs on the page enabled</h3><p>- All tabs fetched via <b>Ajax</b><br />- 2nd and 4th tabs also show/hide arbitrary DIVs when clicked on<br /></p><div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">Arbitrary DIV 1</div><div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">Arbitrary DIV 2</div><div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">Arbitrary DIV 3</div><div id="flowerdivcontainer" style="border:1px solid gray; width:350px; height: 200px; background-color: lightyellow; padding: 50px"></div><div id="flowertabs" class="modernbricksmenu2"><ul><li><a href="external1.htm" rel="flowerdivcontainer" class="selected">Tab 1</a></li><li><a href="external2.htm" rel="flowerdivcontainer" rev="flowernote,flowernote2">Tab 2</a></li><li><a href="external3.htm" rel="flowerdivcontainer">Tab 3</a></li><li><a href="external5.htm" rel="flowerdivcontainer" rev="flowernote3">Tab 4</a></li><li><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">Ajax Tabs script</a></li></ul></div><br style="clear: left" /><script type="text/javascript">var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")myflowers.setpersist(true)myflowers.setselectedClassTarget("link") //"link" or "linkparent"myflowers.init()</script><p><a href="java script: myflowers.loadajaxpage('external2.htm')">Load "external2.htm" into content container via Ajax</a></p><hr /></body></html>

 

oraz podstronę external2.htm z kodem JS

 

This is the contents of "external2.htm"<br />This is the contents of "external2.htm"<br />This is the contents of "external2.htm"<br /><center><script>//Dynamic countdown Script II- Š Dynamic Drive (www.dynamicdrive.com)//Support for hour minutes and seconds added by Chuck Winrich (winrich@babson.edu) on 12-12-2001//For full source code, 100's more DHTML scripts, visit http://www.dynamicdrive.comfunction setcountdown(theyear,themonth,theday,thehour,themin,thesec){yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec}//////////CONFIGURE THE COUNTDOWN SCRIPT HERE////////////////////STEP 1: Configure the countdown-to date, in the format year, month, day, hour(0=midnight,23=11pm), minutes, seconds:setcountdown(2008,03,08,9,00,00)//STEP 2: Change the two text below to reflect the occasion, and message to display on that occasion, respectivelyvar occasion="do<br>Warsztatów"var message_on_occasion="To juz dzisiaj!!!"//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countdown areavar countdownwidth='100%'var countdownheight='35px'var opentags='<font class="trescboldbig">'var closetags='</font>'var boldtag='<b>'var boldtagend='</b>'//////////DO NOT EDIT PAST THIS LINE//////////////////var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")var crosscount=''function start_countdown(){if (document.layers)document.countdownnsmain.visibility="show"else if (document.all||document.getElementById)crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdowniecountdown()}if (document.all||document.getElementById)document.write('<span id="countdownie" style="width:'+countdownwidth+'"></span>')window.onload=start_countdownfunction countdown(){var today=new Date()var todayy=today.getYear()if (todayy < 1000)todayy+=1900var todaym=today.getMonth()var todayd=today.getDate()var todayh=today.getHours()var todaymin=today.getMinutes()var todaysec=today.getSeconds()var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysecfuturestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+secdd=Date.parse(futurestring)-Date.parse(todaystring)dday=Math.floor(dd/(60*60*1000*24)*1)dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)//if on day of occasionif(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){if (document.layers){document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)document.countdownnsmain.document.countdownnssub.document.close()}else if (document.all||document.getElementById)crosscount.innerHTML=opentags+message_on_occasion+closetagsreturn}//if passed day of occasionelse if (dday<=-1){if (document.layers){document.countdownnsmain.document.countdownnssub.document.write(opentags+""+closetags)document.countdownnsmain.document.countdownnssub.document.close()}else if (document.all||document.getElementById)crosscount.innerHTML=opentags+"Juz niestety po warsztatach... :("+closetagsreturn}//else, if not yetelse{if (document.layers){document.countdownnsmain.document.countdownnssub.document.write(opentags+"Pozostało "+boldtag+dday+boldtagend+ " dni, "+boldtag+dhour+boldtagend+" godzin, "+boldtag+dmin+boldtagend+" minut i "+boldtag+dsec+boldtagend+" sekund "+occasion+closetags)document.countdownnsmain.document.countdownnssub.document.close()}else if (document.all||document.getElementById)crosscount.innerHTML=opentags+"Pozostało "+dday+ " dni, "+dhour+" godzin, "+dmin+" minut i "+dsec+" sekund "+occasion+closetags}setTimeout("countdown()",1000)}</script></center>

 

problem jest taki ze jak wywołam plik demo.html i wybiorę podtronę external2.htm to mi się nie ukazuję w okienku skrypt odliczania, natomiast jak wywyłam bezpośrednio plik external2.htm to wynik kodu odliczania ukazuje się, jak rozwiązać ten problem, żeby po wywołaniu podstrony z pliku damo.htm ukazał mi się wynik działania kodu JS (odliczanie), podejżewam, że coś się gryzie, ale niestety nie umiem tego poprawić, bardzo proszę o pomoc

[PelzaK]

skorzystaj z firefoxowego rozszerzenia pod tytułem firebug - tam masz debuger do js.

[MFrost]

Ostatecznie napisałem prosty skrypt odliczania w php i teraz działa. Dowiedziałem się, że AJAX nie przepuszcza poleceń w <script> i dlatego nie działało, ale dalej nie wiem jakby to porawić.

[bellum]

AJAX to z grubsza sposób na pozyskanie danych do użytku skryptu JS pozyskać można plik tekstowy znajdujący się na serwerze (tym samym co strona) można pozyskać wynik działania skryptu PHP można pozyskać plik JS, HTML, wszystkie te pozyskane dane mogą zostać np: włączone z skład strony, jeżeli będzie to kod JS to zacznie on działać jak normalny kod JS jeżeli będzie to kod HTML to będzie on prawidłowo wyświetlany itd... jedyny problem jaki może się pojawić to ograniczania nakładane na przez przeglądarkę (względy bezpieczeństwa) lub błędy w kodowaniu znaków