Jump to content

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


Recommended Posts

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?

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.

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 )

???

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.