PDA

View Full Version : Concerning the DHTML Window Script...



zjbarden
08-11-2011, 10:10 PM
1) Script Title: DHTML Window Script

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

3) Describe problem: I've been trying to figure out how to load and use content dynamically within the windows displayed on my personal page (not the demo's). The windows load the original content correctly the first time, but if you click on a link within that window or something else of the sort, it does not load within the iframe itself, but rather redirects you to that URL, which I do not want it to do. Any ideas?

Thanks in advance!

-Zach

jscheuer1
08-12-2011, 02:01 AM
There are four types of content that can be in a DHTML window. Unless its the iframe type, a regular link inside a DHTML window can only create a new actual window or tab, or fill the existing one. However, a javascript:


instance_name.load(method, content, title)

method is available to use as an onclick event for links to change the content within an existing DHTML window of the other types (from the demo page):


Updates a window with new content. The parameters for load() are identical to its counterparts found in dhtmlwindow.open(). A few examples:


googlewin.load("iframe", "http://cssdrive.com", "CSS Drive")
wininstance2.load("inline", "New window content here!", "New title")
wininstance3.load("ajax", "external.htm", "Ajax Window title")
wininstance4.load("div", "faqdiv", "Div Window title")

A word of caution- In general you should stick to the same content type when changing a window's content. For example, if your window originally contained "iframe" content, you should only update it with new iframe content and not content of a different type. With certain combinations it may generate an error in Firefox.

So you could do (for an inline DHTML Window):


var mydhtmlwin=dhtmlwindow.open(
'mywin',
'inline',
'<a href="#" onclick="mydhtmlwin.load(\'inline\', \'Hello World!\', \'New title\'); return false;">New Content</a>',
'Old Title',
'width=200px,height=100px,center=1');

Give that a shot.

If you want more help:

Please tell us what specific content you want your link to load into which specific DHTML window on a page on your site and post a link to that page on your site so we can check it out.

zjbarden
08-12-2011, 03:51 AM
I guess to more simply put it, I'm looking to understand why it is that, even though my code and the demo's code is word for word, the demo doesn't redirect the user once they click on a link within the DHTML window and mine does....hence, I do not want it to.

jscheuer1
08-12-2011, 04:18 AM
Please post a link to a page on your site that contains the problematic code so we can check it out.

zjbarden
08-12-2011, 01:26 PM
Alright jscheuer1, there are two pages I have for your viewing.

One is a reference page, containing the code for that page which assimilates the second page (the one I'm having problems with). Note that this first page does not load anything in the windows; I don't know why.

Second is the page that I'm having problems with, hence the above paragraph. If you are prompted a login, please do accept my apologies, and enter the information below:

username: test
password: test999


Thank you,

zjbarden

jscheuer1
08-12-2011, 02:30 PM
What are the links to these pages?

zjbarden
08-12-2011, 02:41 PM
I'm terribly sorry! Please bear with me, I haven't gotten sleep in Lord knows how long.

Page One: http://www.exapto.com/ddhelp

Page Two: http://www.exapto.com/dev

jscheuer1
08-12-2011, 03:57 PM
Switch from the 'ajax' method to the 'iframe' method. Any errors at that point should be much more apparent - if you get a 404, you'll see it - if the remote page wants you to login again, you'll see that, and the ordinary links in the DHTML window, once you do load a page into it, will load into that window.

Don't do any of the following, it's just a detailed explanation of why the AJAX method is messing up.

On the second page, the path highlighted below is/could be wrong:


function openmypage(){ //Define arbitrary function to run desired DHTML Window widget codes
ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "/mod/", "myOfficeDock - Socialize", "width=1000px,height=500px,left=300px,top=100px,resize=1,scrolling=1")
ajaxwin.onclose=function(){ //Run custom code when window is about to be closed
return window.confirm("Close this window?")
}
}

I imagine that others are as well. It points to:

exapto.com/mod/

which is a 404 not found. If you put it like:


function openmypage(){ //Define arbitrary function to run desired DHTML Window widget codes
ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "mod/", "myOfficeDock - Socialize", "width=1000px,height=500px,left=300px,top=100px,resize=1,scrolling=1")
ajaxwin.onclose=function(){ //Run custom code when window is about to be closed
return window.confirm("Close this window?")
}
}

without the preceding slash, it would point to:

exapto.com/dev/mod/

which appears to be there. So it may load, except it may be prompting for a password. On an AJAX request, you will not see that and will not be able to respond to it.

But you're using the network path, and so it makes a difference as to whether or not www. was used on the dev page, to get to it in the first place. If it was, and this is why I said earlier 'could be', then /mod/ would point to:

www.exapto.com/mod/

which does load, but prompts for a password, something you will not see or be able to respond to with an AJAX request.

But the links on that page are just ordinary links, examples:


<ul class="ow_main_menu clearfix">
<li class="base_main_menu_index active"><a href="http://dev.exapto.com/mod/index"><span>Main</span></a></li><li class="base_base_join_menu_item"><a href="http://dev.exapto.com/mod/join"><span>Join</span></a></li><li class="base_users_main_menu_item"><a href="http://dev.exapto.com/mod/users"><span>Members</span></a></li></ul>

So, once that content is imported - you chose import via AJAX, it becomes a part of the 'top' page. So of course, clicking on an ordinary link on the page will switch the window.

You could work it out so that the links on /dev/mod/ or whatever page it actually is would load into the AJAX window by making, let's take the first one for example:


<a href="http://dev.exapto.com/mod/index" onclick="ajaxwin.load('ajax', this.href, 'myOfficeDock - Socialize'); return false;"><span>Main</span></a>

But then, if the page with that link on it were loaded on its own, there would be an error and nothing would happen.

zjbarden
08-12-2011, 04:18 PM
John, I cannot thank you enough! It's funny that the smallest detail is what halted my project.

Thanks a million,

Zach