Log in

View Full Version : Ajax link loading in current div issue


Irishjugg
11-05-2008, 10:59 PM
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>

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.


As a sort of second issue, I have some javascript for one of my forms to validate the fields and blah blah blah before submission, that isn't being run, nor is any other js in ajax loaded content. From an earlier question a user showed me that I need to preload css files for ajax loaded content on the main page or else it wont get pulled in, because of that I grab the .js files I need on my main "welcome.php" page long before I load the new content. No javascript is working for me.
I also tried having the javascript directly in the page that ajax loads, still no go.
Any ideas?

Code:

function validateReport(form) {
alert('started the process');
thats inside script tags and never shows up / happens...


<form onSubmit="javascript:return validateReport(this)" action="funcs/fsupdate.php" method="post" class="fship">

Thats where I call the function in theorey.



Thanks in advance.
Jesdisciple
11-06-2008, 01:07 AM
For the first issue, a working page (preferably a URL) would be very helpful. I don't really want to implement all that just to reproduce the issue.

For the second, see this page (http://www.web2coder.com/website-design/dynamically-loading-external-javascript-file-3).
Irishjugg
11-07-2008, 05:27 PM
Thanks a lot for the second issue help, that page is very detailed.

as far as getting a page for the first issue, it is on a protected domain, I will try to work on having a page available for you in a few.
Irishjugg
11-11-2008, 04:27 AM
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.

After Looking thru the documentation for ajaxtabs, 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.
Jesdisciple
11-11-2008, 05:36 AM
What's this for?
<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>Isn't the ajaxtabs script already present in menus.js? Why do you need two copies?

And if that's supposed to solve the problem of scripts on an included page B not executing when B is included into another page A, issuing a command from B to tell the scripts in B to execute is naturally futile. The same problem which you're trying to solve voids your solution.

If that's not supposed to solve that problem, what is?

BTW, you have a bug in the script tag which initializes the admin variable. It shows up as an error in the framework:
Error: tabref is undefined
Source File: http://web.science.nd.edu/bestbuddies/js/menus.js
Line: 295
Irishjugg
11-11-2008, 05:49 PM
oh, that was just one of my attempts to get things to work, whether it was silly or not I wasnt sure, I didnt realize I left that in the code I posted. In any case, ddadmin found a solution for me with respect to links in the ddrive scripts help forum.

Thank you for finding that error in the script. by the way, how do you get javascript errors to display like that?

Also, how do I mark my thread as resolved?
Jesdisciple
11-12-2008, 12:34 AM
In Firefox, go to Tools > Error Console. To see current messages, right-click and chose First > Last Sort Order. To see future messages, Clear and perform the suspect action (like loading a page) again. In Internet Explorer, click on the yellow icon at the bottom-left (if it's not there no errors have occurred).

Up top, Thread Tools > Mark thread as solved. :)