Log in

View Full Version : Ajaxtabs load in same div issue


Irishjugg
11-11-2008, 04:20 AM
1) Script Title: Ajaxtabs

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

3) Describe problem:

I have some code from the ajax tabs script from ddrive that I use to dynamically load content into a certain div on my page. When I load content in that div, the new content could contain either forms or links, when they are clicked or submitted, I want to have the results, new pages, or redirected pages (from completed forms) load back into the same exact div they already belong to. The issue I am having is that I cannot make this happen, It looks like I can use ajaxtabs to load them into any other div but the div that is currently in scope.

I am new and pathetic with ajax, mostly because to be honest I haven't taken the time to ACTUALLY learn it, more so I have just been slapping together sample code. I feel like this must be a simple issue to fix, can any of you gurus please give me a hand?

Ill post a bit of sample code here..

The ajax tabs happen as such:


<li class="topbars"><a href="mybuddy.php" rel="inner">My Buddy</a></li>
<li class="topbars"><a href="fshipupdate.php" rel="inner">Friendship Logs</a></li>

Initialized by:

var tabs=new ddajaxtabs("tabbar", "inner")
tabs.setpersist(false)
tabs.setselectedClassTarget("link") //"link" or "linkparent"
tabs.init(5)

into the div called inner, which may have links inside of it. All I want to do is have them show up inside the same div, "inner" but the ajaxtabs script isn't having that.

I have a page up, no one will be able to log in (please don't try to break my scripts yet, I havent dealt with that part yet ;) )

http://web.science.nd.edu/bestbuddies/welcome.php

But I will put a link on the page from the "About" link. By clicking "about" you load the ajax page into the inner div, and my goal is to have you click on the link in there and have it load a new ajax page in the exact same "inner" div.

Also, code for the page with the dummy link is here:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<?php
include 'funcs/conn.php';
include 'funcs/pages.php';
?>

<script type="text/javascript">
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '../js/ajaxtabs/ajaxtabs.js';
headID.appendChild(newScript);

</script>

<body>
<div id="smspacer"></div>
<?php //buddyInfo(1); ?>
<div id="test">
<h3>Under Construction<br /><br /><a href="external.php" rel="inner">This link for programmer debugging only</a></h3>
</div>

<script type="text/javascript">
var tabs3=new ddajaxtabs("test", "inner")
tabs3.setpersist(false)
tabs3.setselectedClassTarget("link") //"link" or "linkparent"
tabs3.init(5)
</script>

</body>
</html>

I am pretty sure the issue has to do with the ajax fetched page not "knowing about" the div named inner which is from the page that fetched the above code.
Irishjugg
11-11-2008, 04:39 AM
Looking thru the documentation, I changed my code to the code for nested tabs as shown here:


var tabs=new ddajaxtabs("tabbar", "inner")
tabs.setpersist(false)
tabs.setselectedClassTarget("link") //"link" or "linkparent"
tabs.init(5)

tabs.onajaxpageload=function(pageurl){
if (pageurl.indexOf("mybuddy.php")!=-1){
tabs3=new ddajaxtabs("test", "inner")
tabs3.setpersist(false)
tabs3.setselectedClassTarget("link") //"link" or "linkparent"
tabs3.init()

If I leave that code in, the page automatically loads whatever page the link that is in the file that ajax fetches as if it had already been clicked. This does not happen if I comment out the tabs3.init(). I feel like this is closer to a solution, and maybe some of the great coders here can help me piece together a solution from this.
ddadmin
11-11-2008, 09:50 AM
But I will put a link on the page from the "About" link. By clicking "about" you load the ajax page into the inner div, and my goal is to have you click on the link in there and have it load a new ajax page in the exact same "inner" div.

For this, you'd just modify the link in your "About" tab to something like:


<a href="javascript: tabs.loadajaxpage('external.php')">Load "external5.htm" into content container via Ajax</a>

Where "tabs" corresponds to the variable instance you used to initially define your top level Ajax tabs. See "Dynamically loading an external page using Ajax (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment.htm)" on this page for more info.

Having said that, loading a link's target page within the content container back inside the content container is one thing, but loading the results of a form within the content container back in the same container is another. For the later, you'll have to modify your form script (presumably server side) to coordinate with Ajax Tabs content that depends on how your form script is constructed.
Irishjugg
11-11-2008, 05:46 PM
Having said that, loading a link's target page within the content container back inside the content container is one thing, but loading the results of a form within the content container back in the same container is another. For the later, you'll have to modify your form script (presumably server side) to coordinate with Ajax Tabs content that depends on how your form script is constructed.

Thanks a bunch for the other line of code, you solved my main problem. I am confused by what you mean here though. I understand that you mean it will be much more difficult to make a form sumbmission redirect back to the correct page, or have the output go back into the same content container, but when you say:

"you'll have to modify your form script (presumably server side) to coordinate with Ajax Tabs content that depends on how your form script is constructed."

I am not sure exactly what you mean.

If I want to do a header redirect, I can use the address line to dynamically select a tab to use as per the documentation, but if I want to have it load a page that says something to the extent of "Submitted sucessfully" or etc. what kind of changes would I have to make to my form submission scripts (which are just php scripts at this time). How do I make it coordinate with ajaxtabs content?
Irishjugg
11-11-2008, 05:57 PM
As an aside, I am also trying to get ajax tabs to work together with the "AnyLink Drop Down Menu" script. So far, the closest thing to being sucessful I had was to actually put all of the ajaxtabs.js file code into the menus.js file from AnyLink (ugly solution, but I dont know how to do the equivalent of an include in javascript) and then alter the menus.js code here:


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
//return true;
}

to :


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

// Hack in ajax tabs?
var admin=new ddajaxtabs("dropmenudiv", "inner")
admin.setpersist(false)
admin.setselectedClassTarget("link") //"link" or "linkparent"
admin.init()
//

return clickreturnvalue()
//return true;
}

which made the script work, however whenever I even hovered over the parent link that spawns the drop down menu, the ajax fetch would happen and whatever page had been loaded into the container div would disappear. I tried moving the admin.init() to several different places but could not find a configuration that did not either destroy my original functionality, or that allowed the new functionality I wanted.

Is there a solution for merging the two scripts that exists already?
ddadmin
11-12-2008, 02:46 AM
what kind of changes would I have to make to my form submission scripts (which are just php scripts at this time). How do I make it coordinate with ajaxtabs content?

Well, the basic idea is to modify your form so it's submitted asynchronously when the "submit" button is clicked on. That way, the result is simply returned as plain text in the form of a JavaScript variable, which is then displayed within the Ajax Tabs Content DIV. There are quite a few pre-existing Ajax form scripts out there, such as this one (http://www.dustindiaz.com/ajax-contact-form/). The steps to getting the whole thing to work is actually very simple once the "Ajax form" portion is taken care of. So you'd have something like:


<div class="ajaxtabscontentarea">
<form class="ajaxform">
"
"
<input type="submit" />
</form>
</div>

Now, when the user presses the submit button, the Ajax form should submit the data, and simply return a responseText containing some text to indicate success. The form script if it allows you to customize where this text gets output, would just output that responseText back inside the Ajax Tabs DIV holding the form.
ddadmin
11-12-2008, 02:47 AM
Regarding your other question, please start a new thread for it, and ideally include a link to the problem page showing what you have so far.