PDA

View Full Version : Ajax - looking for a way to have two separate divs open their links into a common div



lukenjohnson
11-19-2010, 06:30 PM
1) Script Title: Ajax Tabs

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

3) Describe problem: The basic script as described on http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ works well. What I am having trouble with is this:

I have two different divs (two sets of links, one is a top nav and the other is a left nav) that I want to open in a common Ajax targetted div. The top nav works well with the Ajax target, but the left nav will not open in the Ajax target even though I've given them both the same id.

I have found lots of tutorials and forums explaining how to update multiple divs at once with Ajax, but I want to do the opposite -- update one div with multiple link sources. Is this possible?

Here is the code:


<div class="tab_container">
<div id="tab1" class="tab_content">

<div class = "programwidget_buttons" id = "programwidget_controls">

<a href = "programs/ym/overview.asp" rel = "programtarget" title = "Program Overview"><img src = "images/programs/button.png" alt = "" /></a>
<a href = "programs/ym/program_req.asp" rel = "programtarget" title = "Program Requierments"><img src = "images/programs/button.png" alt = "" /></a>
<a href = "programs/ym/alumni.asp" rel = "programtarget" title = "Outcomes and Alumni Stories" ><img src = "images/programs/button.png" alt = "" /></a>
</div>

<div class = "programwidget_leftnav" id = "programwidget_controls">
<h1>BA Youth Ministry</h1>

<p><span class = "spec">Credit Hours:</span> &nbsp;126</p>

<p><span class = "spec">Program Coordinator:</span><br />
Ken Moser [<a href = "mailto:kmoser@briercrest.ca">email</a> | <a href = "faculty/kmoser.asp" target = "programtarget" rel = "programwidget_controls">profile</a>]</p>

</div>


<div class = "programtarget" id = "programtarget">
<!-- ajax calls up pages here -->


</div>

<script type="text/javascript">
var programInfo=new ddajaxtabs("programwidget_controls", "programtarget")
programInfo.setpersist(true)
programInfo.setselectedClassTarget("link") //"link" or "linkparent"
programInfo.init()
</script>


</div><!-- tab1 -->



I also tried providing an extra javascript at the end and renamed the leftnav and the associated source in the javascript, but that didn't work either.

Is there some other way to have two separate divs open their links into a common Ajax div?

The page I am working on is available at http://briercrest.ca/redesign/program.asp

Thanks!