...

View Full Version : Dynamic content and JQuery tabs script not working



helenmarie123
10-18-2010, 05:26 PM
Hello,

I have posted in another section of the forum about this but I haven't got a reply so I thought I might have put it in the wrong section?

I am having problems getting some javascript to work. I am new to javascript, ajax etc so I havent a clue why this isnt working :(

The probem is I am trying to load an external html page into a DIV using the dynamic drive ajax content script and within the external page there are elements that use javascript so I am using the loadobjs function to try load them in, but the tabs.js file I am trying to load will not work. I have messed around with this so much I have completely confused myself and am willing to pay someone to help me out with this as I need it doing asap.

The link to the test page I am talking about is http://www.hm-designs.co.uk/crossland2/solo.php

and if you click on the top name in the left column it will load the page where the tabs section is. As you will see, it doesnt work. :(

I am also wanting to try and get an ajax contact form in the expandable box above the tabs and also I would like fancybox on the images BUT i havent even attempted those yet as I cant even get this one working.

Can anyone help me with this?

Thank you, Helen

SB65
10-18-2010, 06:35 PM
Looks like your class selector isn't quite right here.

Your html has:


<div class="tab-content">

but the css is:


.tab_content {
padding: 20px;
font-size: 1em;
color:#FFF;
}

and the jQuery also looks for tab_content.

I think there's more to it than this, but that's a start.

helenmarie123
10-18-2010, 06:46 PM
hiya,

thank you for your reply :-)

I have been doing some changes over the last hour or so........ I have gone back to the basic scripts without the loading content message on the ajax content and I have managed to get the tabs script working again BUT if you navigate away from the page and then go back to the page the tabs break and dont work properly?

I also want the loading message 'loading content .... please wait' to work but it seems to break the javascript tabs when I add the code in :confused:

SB65
10-18-2010, 06:51 PM
I'm not seeing tabs on your current live page.

SB65
10-18-2010, 07:18 PM
OK, the code below works for me on a local server (with repointed ajaxfiles). Mostly what I've done is tidy your javascript up with proper line terminations.
At the moment your tabs are white text on a white background, as well.



<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="dropdown.css"/>
<link href="fade.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");

function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=0;//bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects="";
//var rootdomain="http://"+window.location.hostname
var bustcacheparameter="";

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest();
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
document.getElementById(containerid).innerHTML='<img src="images/loading.gif" />&nbsp;<b>Loading Content. Please wait...</b>';
if (bustcachevar) bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();
page_request.open('GET', url+bustcacheparameter, true);
page_request.send(null);
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
if (typeof ajaxcontent_loadtimer!="undefined") clearTimeout(ajaxcontent_loadtimer);
ajaxcontent_loadtimer=setTimeout(function(){document.getElementById(containerid).innerHTML=page_requ est.responseText}, 2000);
}
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref);
loadedobjects+=file+" " ;//Remember this object as being already added to page
}
}
}

</script>
<script>function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}</script>
</head>

<body><noscript><span style="background-color:#F00; font-family:Arial, sans-serif; font-weight: bold;font-size:24px; color:#FFF; letter-spacing:-2pt; text-align:center;">This website uses Javascript to function correctly. Please enable Javascript and then refresh or press F5 to reload the page</span></noscript><div id="container">
<div id="logo"><a href="index.php"><img src="images/logo.png" alt="al crossland uk entertainment agency" /></a></div><div id="div2"></div><div class="menu"><ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Events & Functions</a>


</li>
<li><a href="#">Venues</a>


</li><li class="current"><a href="#">Entertainment</a>

<ul>
<li><a href="#">Our Managed Artistes</a>
<ul>
<li><a href="solo.php">Solo Performers</a></li>
<li><a href="duo-trio.php">Duos and Trios</a></li>

<li><a href="live-bands.php">Live Bands</a></li>

</ul>
</li>
<li><a href="comedy-acts.php">Comedy Acts</a></li>
<li><a href="tribute-acts.php">Tribute Acts</a></li>

<li><a href="after-dinner-speakers.php">After Dinner Speakers</a></li>

<li><a href="speciality-entertainment-acts.php">Speciality Acts</a></li>
<li><a href="disco-karaoke.php">Disco and Karaoke</a></li>
<li><a href="childrens-entertainers.php">Childrens Entertainers</a></li>
</ul>
</li>
<li><a href="contact.php">Contact Us</a></li>
</ul></div>

<div id="photoholder"><img src="images/live-ent.png" width="900" height="244" id="thephoto" /></div>
<div id="content">
<h1>Solo Performers&nbsp;&nbsp;&nbsp;<span style="font-size:11px; letter-spacing:normal; font-weight:normal">Artistes listed here are solely managed by us, we have access to thousands of acts from across the UK. Please contact us for more information</span></h1>
<div class="leftcolumn"><ul><li><a href="javascript:ajaxpage('http://ajaxfiles/tara.htm','artistecolumn'); loadobjs('ajaxfiles/artiste.css', 'ajaxfiles/tabs.css','ajaxfiles/tabs.js')">Tara - Female Vocalist</a></li><li>Solo name 2</li><li>Solo name 3</li><li>Solo name 4</li><li>Solo name 5</li><li>Solo name 6</li><li>Solo name 7</li><li>Solo name 1</li><li>Solo name 2</li></ul></div><div id="artistecolumn">

<h4>&lt; Click on an artiste name to view their profile</h4>
</div></div></div>
<div id="footercontainer"><div id="footer"><div class="postal">
<h2>Postal Address</h2><p><span style="font-size:12px">Al Crossland Entertainments<br />16 Toronto Place<br />Chapel Allerton<br />Leeds<br />LS7 4LJ</span></p>
<p>Telephone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+44&nbsp;&nbsp;(0113) 2940824</p>

<p>Telephone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+44 &nbsp;(0113) 2940825</p>
<p>Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:info@alcrosslandentertainments.co.uk">info@alcrosslandentertainments.co.uk</a></p></div><div class="message">
<h2>Send us a message</h2>
<img src="contact-footer.png" width="481" height="189" /> </div>

</div><div id="bottom"><img class="bottomimg" src="images/aa-logo.png" width="20" height="19" alt="al crossland entertainments is a registered member of the agents association" />
<p>Registered member of the Agents Association UK - &nbsp;&nbsp;<a href="index.php">Al Crossland</a><script language="JavaScript" type="text/javascript">

today=new Date();

y0=today.getFullYear();

</script>
Copyright &copy; 2010 - <script language="JavaScript" type="text/
javascript">document.write(y0);</script> &nbsp;(0113) 2940825 &nbsp;- &nbsp;(0113) 2940824 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp; <a href="links.php">Links</a> &nbsp;| &nbsp;<a href="sitemap.php">Sitemap</a> &nbsp;| &nbsp;<a href="privacy.php">Privacy Policy</a></p></div></div>

</body>
</html>

helenmarie123
10-18-2010, 07:19 PM
can you see them now?

From my end the tabs work fine so long as you dont click on the Tara - female vocalist link again...... if you do then it breaks the tabs.

Thank you so much for taking the time to reply to me, i really appreciate it :thumbsup:

SB65
10-18-2010, 07:34 PM
No, still can't see on your live page. What I'm assuming is tabs is the purple box arrangement, with Audio, Video, Images in line at the top - is that right?

helenmarie123
10-18-2010, 07:43 PM
yeah thats right, it worked alright here for the first few times but its broken now :confused:

Is it something to do with the tabs.js file not being applied everytime?

SB65
10-18-2010, 07:50 PM
I think it's just your javascript line syntax - per my post#5 above - have a look here (http://simonbattersby.com/test/test_ajax.htm) for an amended page. Is that doing what you want?

helenmarie123
10-18-2010, 09:11 PM
yes it is, :thumbsup:

what parts of the code did you change?

helenmarie123
10-18-2010, 09:24 PM
I have used the code you posted, it works the first time but then it breaks when you click away from the page and then go back to the same page. I think it must have something to do with the cache :confused:

SB65
10-19-2010, 08:09 AM
what parts of the code did you change?

All I did was add line endings throughout.


it breaks when you click away from the page and then go back to the same page

I cannot recreate this. Are you saying that if you use the page, click the artist page to load the ajax page, then navigate to another page and then back to the page and click again the ajax stuff won't load?

helenmarie123
10-19-2010, 10:42 AM
The ajax page will load but the tabs wont work, they just display stacked on top of one another and the clickable tab headers dont work. I have tested it in Mozilla 3.6, IE 8, Chrome and Safari and it does it in them all.

:confused:

SB65
10-19-2010, 10:52 AM
OK, if I do the following on your link, that doesn't happen. To avoid confusion, I am navigating to that link, clicking to load the ajax content. This loads OK, tabs OK. I'm then navigating to Google. Then reentering the url, and loading the ajax stuff again. Tabs still OK.

Is that the same as what you are doing?

SB65
10-19-2010, 10:55 AM
Right, you're saying the tabs don't work when you click on them, rather than they don't display, right. I do see that. Hmm...

helenmarie123
10-19-2010, 11:27 AM
I get the problem when navigating within the site..... so if I hover over entertainment > managed acts > click solo performers then click to load the tara page the tabs will work fine, but if I click homepage or contact page etc then try and go back to solo > then load tara again the tabs wont work?

SB65
10-19-2010, 11:47 AM
I think what's happning is that when you click again on the Tara link, the javascript is loading before the html, so it runs OK, but there's no page there to apply the changes to, and so none of the tabs is hidden. EDIT: Pretty sure that's the problem.

I can recreate the problem intermittently, which would also support this logic.

Given that you're using jQuery anyway, we might as well load the page using jQuery. This seems to make the issue go away.

Keep a copy, but then replace this:


function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}


with this:


function ajaxpage(url, containerid){
$('#'+containerid).load(url);
}


It's a bit shorter...and give that a try. Having made this replacement on test code I cannot recreate the issue.

helenmarie123
10-19-2010, 12:14 PM
oh my word you are an absolute genius! :D

Yes that has worked ........ the only issue is, once you have clicked tara and loaded the page in, if you click on tara again it breaks the tabs? I know you shouldnt really be clicking on the same name once you have clicked it but it does it if you double click instead of single click too which an average user might do as habit. Is there a way to disable double click or disable the tara link once it is clicked until another link is clicked?

Do you have a donate section or a paypal address? I would like to donate something to you for helping me :thumbsup:

SB65
10-19-2010, 01:02 PM
Genius, no, heh! I don't feel completely comfortable that that's nailed it, to be honest.

I spotted the issue with immediately clicking again as well. The following would sort this. Amend your html on the main page to remove all the javascript, and assign an id to the parent li element:


<li id="tara" ><a href="#">Tara - Female Vocalist</a></li>

Then add the following javascript (jQuery) to your main page:


$(document).ready(function(){
$('#tara').click(function(){
if (!$(this).hasClass('activepage')){
$(this).siblings().removeClass('activepage');
ajaxpage('ajaxfiles/tara.htm','artistecolumn');
loadobjs('ajaxfiles/artiste.css', 'ajaxfiles/tabs.css','ajaxfiles/tabs.js');
$(this).addClass('activepage');
}
return false;
});
})


So here we're adding the click event for Tara when the page loads. We check to see if the clicked item already has a class of "activepage". If it doesn't then it hasn't been clicked immediately before, and we then remove the activepage class from any other li elements, load the ajax stuff and set the class on this element.

This'll just stop the reload if it's already on the page. You could use the activepage class in your css to mark the menu item as well I suppose.

You would need to create an entry like this for each link, but it takes all the javascript out of your html, which is a good thing.

As a slight aside, I don't know what your other ajax page loads will be, but assuming that the pages are all in the same sort of layout, it might be easier to have some standard javascript and css that applies to all the loaded pages, and load this on the main page. Then all you have to load on each page is the html itself - which would obviate the issues you've experienced here. You could wrap all of your html for each artiste in a div and assign an id to that div for the artist, then apply any specific styling through css via #artistename p {etc etc}.Just a thought. Might be less painful and easier to keep up to date.

helenmarie123
10-19-2010, 01:32 PM
Yes all the artist pages are going to be exactly the same layout apart from the text content and images.

So what you are saying is link the artiste.css and tabs.js to the main page so they load when the main page loads and not when the artist name is clicked?

SB65
10-19-2010, 01:42 PM
Yes, because I can't see any value in loading them on the click, and if all the artiste.css files are the same you'll just load the same file over and over again. The downside in loading the css and script and them not using them is trivial compared to how much simpler your code can be. That makes things a whole lot easier. Perhaps I should have thought of this earlier...If you then have your html set up like this:


<ul id="artistelist">
<li><a href="ajaxfiles/tara.htm">Tara - Female Vocalist</a></li>
<li><a href="ajaxfiles/two.htm">Solo name 2</a></li>
etc
</ul>

Then the following code will work for every link, pulling the href from the link:


$(document).ready(function(){
$('#artistelist li').click(function(){
if (!$(this).hasClass('activepage')){
$('#artistecolumn').html('<img src="images/loading.gif" />&nbsp;<b>Loading Content. Please wait...</b>');

$(this).siblings().removeClass('activepage');
$('#artistecolumn').load($(this).children().first().attr("href"),function(){
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
$(this).addClass('activepage');
}
return false;
});
})


So, on a click on any li in the artistelist ul, we check the class to see if it's already loaded as before, and if it hasn't we throw up the loading gif (which I think I lost somewhere in this), load the page by reading the href within the li, and wait till this is done and run the code that was in tabs.js - which is no longer required.

helenmarie123
10-19-2010, 01:58 PM
Thank you Thank you thank you thank you thank you

I tried posting a massive animated thank you but it didnt work hahaha

SB65
10-19-2010, 02:03 PM
You're welcome. I'm still learning jQuery and it does make it very easy to do otherwise quite complex things.

helenmarie123
10-21-2010, 11:18 AM
hello, I have discovered it wont work in internet explorer.... i dont know if this is just an error at my end or not though? :(

edit* Ignore me ............... it was an error with my IE browser ............ haha . Sorry about that

helenmarie123
10-22-2010, 12:15 PM
sorry to be a pain :rolleyes:

Would I follow the same principle to have fancybox working on the external page?

I want the enquire about this act link to open the enquire.php form using the iframe fancybox and also the images in the image tab to open using fancybox. I have tried inserting the code directly into the head of the external page but that didnt work and I have also tried putting the links to the fancybox scripts and css into the head of the main page but that didnt work either, when I clicked the enquire about this act link it just opened the page in another tab, so fancybox wasnt activating at all.:confused:

SB65
10-22-2010, 12:37 PM
You are instantiating fancybox when the page loads - but at this point the element to which you are applying fancybox is not in the DOM because it hasn't loaded yet via your AJAX call, so nothing works.

Here, I think, the easiest solution would be to include the fancybox set up in the callback from the jQuery load().



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum