Modifying an ajax code to open in another window instead of self

oli22 · October 6, 2011

I found this good demo code from :

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm#combo

This is the index section

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ajax Rotating Includes Script</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 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

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>

<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>

</head>

<body>

<div id="leftcolumn">

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

<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>

This is the js that goes with it:

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"

}

But i would like the files to open on a new page/window instead of the original page.

I am using it to create a video thumb page [ video_thumbs.php ] that opens embed codes in a 'play video' page[play_video.php]

so want to make the links open in new window instead of the original window, probably need to change a path somewhere i the index and

add a ."rightcolumn" in the 'video_thumbs.php'

Hard for me easy for you?

requinix · October 6, 2011

Then don't use AJAX. The whole point of it is to remain on the same page while doing something.

Just have normal links with target=_blank, or if the pages are popup-sized then call window.open.

oli22 · October 7, 2011

Thank you for response requinix

I know how to use the 'GET' method to get certain info like title for thumb from page1 to page2, the part i don't know i how to make page 2

use the incoming info from page 1 and pull up embed code data from xml sheet like this code was doing(videos embeds from many sites not youtube )

???

requinix · October 7, 2011

like this code was doing

I don't see where...

You can put any information you want in a URL. Have the other page pick that up and show whatever video it's supposed to.

oli22 · October 9, 2011

HOW??? whats the code to get embed code from a file/xml sheet from incoming page?

oli22 · October 12, 2011

The reason i was using this ajax code is because i was able to retrieve full embed codes without parsing html tags, sometimes by adding iframes.

Sign In

Modifying an ajax code to open in another window instead of self

Recommended Posts

oli22

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

oli22

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

oli22

Link to comment

Share on other sites

oli22

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information