Log in

View Full Version : updating multiple dhtml windows DIVs



supertsel
01-29-2009, 11:19 AM
1) Script Title: DHTML Window Widget

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

3) Describe problem:
hi,thanks for the fantastic script, it works really fine for one window.
I'm able to create a mini-chat function with one user using AJAX, but when I try to do it with a second window, I can't update the second DIV correctly, as using the parent.document.getElementByID only targets the first window.
How can I target the DIVs of multiple DHTML widget windows?

I'm creating two windows, assigning each a different 'uniquevar' using $chatid (which is a 9-digit number) through PHP:

<--- HTML CODE that launches the DHTML widget window--->
ajaxwin<?php echo $chatid; ?>=dhtmlwindow.open('win'+ <?php echo $chatid; ?> +'', 'ajax', 'messenger.php?id=' + <?php echo $row_onlineusers['friendid']; ?> + '&cookiechat=' + <?php echo $chatid; ?>+'','Messenger', 'width=318px,height=250px,left=400+<?php echo $row_onlineusers['friendid']; ?>+10,top=<?php echo $row_onlineusers['friendid']; ?>px')"

<---HTML CODE of the widget window --->
<input type="text" onKeyDown="if(event.keyCode==13) sendChatText(<?php echo $_GET['cookiechat']; ?>);" id="txt_message" name="txt_message" style="width: 190px;">

<---- JS CODE which resides in dhtmlwindow.js as the widget is created from a php include---->
function getChatText(cookie_id) {
receiveReq.open("GET", 'getChat.php?chat=1&chat_id='+ cookie_id +'&last=' + lastMessage, false);
receiveReq.send(null);
var ajaxwindow = 'ajaxwin'+cookie_id;
ajaxwindow.document.getElementById('div_chat').innerHTML = receiveReq.responseText;
}

IE & FF return the error 'ajaxwindow is undefined'. I guess I'm not targeting the DIV 'div_chat' correctly?

Thanks for your help

ddadmin
01-29-2009, 06:28 PM
The unique HTML id assigned to a DHTML window's DIV is based on what you specify in the first parameter of dhtmlwindow.open(), for example:


ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "windowfiles/external.htm", "#3: Ajax Win Title", "width=450px,height=300px,left=300px,top=100px,resize=1,scrolling=1")

The code in red is the HTML id attribute value- make sure it is unique for each instance of a DHTML window on your page. Then you should be able to access it using:


document.getElementById('ajaxbox')

supertsel
01-31-2009, 04:37 PM
Thanks DD Admin,

Now how do I get to the DIV inside 'ajaxbox' ?

If I have 'ajabox' and 'ajaxbox2', each with a DIV called 'txt_message', how do I update both 'txt_message' DIVs with a different message?

ddadmin
01-31-2009, 09:41 PM
Well, if "ajaxbox" is the ID of the main DHTML window DIV, the DIV inside it that actually contains the contents can be accessed as a property of the main DIV called "contentarea". So something like:


document.getElementById('ajaxbox').contentarea.innerHTML='new content'