URL for Dynamic Ajax Content

**squizeers** · 10-16-2010, 04:37 AM

1) Script Title:
Dynamic Ajax Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:

I am using ajax to load the external pages into a div. Everything works fine. However, I cannot get the url for the page that is loaded into the div.
Link to the project:
www.rajumaharjan.com/victoria

when you navigate through the pages the url remains same. Is there any way to get the specific url for each page?foe example,
when you click on contact page, url would be: www.rajumaharjan.com/victoria#contact

Any help or the direction would be much appreciated.

**jscheuer1** · 10-16-2010, 03:33 PM

I see that you already have modified the script with your own:

Code:

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
$("a[rel='tufcoat_product']").colorbox();
<!--$(".resource").colorbox({width:"50%", inline:true, href:"#verification"});-->
}
}

The highlighted is not a valid javascript comment. Relying upon that syntax to comment javascript will get you into trouble eventually and may even be causing a nonfatal javascript error here. There are two valid ways to comment in javascript, to the end of the line:

Code:

//$(".resource").colorbox({width:"50%", inline:true, href:"#verification"})

or within delimiters:

Code:

/*$(".resource").colorbox({width:"50%", inline:true, href:"#verification"})*/

Since you're already using your own HTML markup (ul's) here and it resembles that of this script:

http://www.dynamicdrive.com/dynamici...tent/index.htm

you could use that script with your styles instead of the ones offered with it.

That script has two advantages here:

It allows a callback for each AJAX loaded page.
It allows persistence of the choice.

Once you get it setup, you could make the callback (highlighted) something like (as explained on http://www.dynamicdrive.com/dynamici...uppliment2.htm):

Code:

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true);
countries.setselectedClassTarget("link"); //"link" or "linkparent"
countries.init();

countries.onajaxpageload=function(pageurl){
	location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
};

</script>

The reason I mention the persistence is that once you get the hash in the URL, you would probably want a refresh of or a return to the page to redisplay the hash content.

Alternatively, since you're already using jQuery 1.4.2, it has robust AJAX functions. So you could save bandwidth by using those instead of either of these standalone AJAX scripts. However, you would need either your own cookie unit for persistence, or better yet a way to use the hash to load the desired content on refresh or return.

**squizeers** · 10-21-2010, 05:54 AM

Thank you so much for the explanation and guidance. I will try it out.

**squizeers** · 10-21-2010, 07:19 PM

I tried it out and it worked perfectly. However my goal was have the colorbox pop up the images once the page has been pulled into the div. And it doesn't seem to be working. COuld you please shed some light on this issue.
Link for the test: www.rajumaharjan.com/ajaxtabs

**squizeers** · 10-21-2010, 11:08 PM

UUHHHH! its been whole day I am trying to figure out. The function(pageurl) and function for the fancybox just conflict with eachother (I guess) both dont work together. Any help will be much appreciated. The picture does not pop up into the fancybox until page is refreshed.

www.rajumaharjan.com/ajaxtabs

**jscheuer1** · 10-22-2010, 05:36 AM

For many reasons, this will never work:

Code:

var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.onajaxpageload = function(a){
	jQuery("a[rel=example_group]").fancybox({
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'titlePosition' : 'over',
		'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});
};
countries.init();
jQuery('a[rel=#default]').click(function(a){setTimeout(countries.onajaxpageload, 0)});


countries.onajaxpageload=function(pageurl){
	location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
};

It does work for the hash though. Now, assuming that your fancybox code is OK, I'd do this:

Code:

var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init();
countries.onajaxpageload = function(pageurl){
	location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
	jQuery("a[rel=example_group]").fancybox({
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'titlePosition' : 'over',
		'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});
};

If that doesn't work, it's probably something with the fancybox code. To test that (only if the above doesn't work) do like:

Code:

var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init();
countries.onajaxpageload = function(pageurl){
	location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
	jQuery("a[rel=example_group]").fancybox();
};

That should (as long as my code is correct) at least get you a very basic fancybox.

**squizeers** · 10-22-2010, 07:10 PM

Thanks much. Its working now

**squizeers** · 10-23-2010, 05:08 AM

Couple more questions:
1) Everything works fine but any link outside the <ul class="shadetabs" id="countrytabs"> doesnot seem to work.
For example, in www.rajumaharjan.com/etos, the logo has link to index2.html but it does not load the index2.html in its original state meaning, it doesn't show the home page with random pictures loaded into the right_container div. Is there any way to get back to the home page?

2) The URL produced by ...... countries.onajaxpageload = function(pageurl){
location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.')); .........
if pased into the browser, it doesn't load the exact page.
For example, the url produced, www.rajumaharjan.com/etos#about , if pasted in a browser, the page is not directed to the about page of the site, instead it loads the home page. Is there any solution for this?

**jscheuer1** · 10-23-2010, 03:51 PM

Both of those points are the result of using a cookie to remember what's what.

For #1, if there is a cookie and the page you are going to has the script we've been working on, it will load in that external content and switch the hash to that external content's filename on the new page.

For #2 that means if you go to the page using just a hash, it will it ignore it because a hash is only for navigation within a page and you have no anchors with the hash names. Even if you did, they wouldn't do what I think you are looking for. And at the same time, the same thing as happens in #1 will here as well.

We could kill the cookie for all links not used by our script, and detect the hash and make a cookie of it if found. But it would be better to make a custom script of this using jQuery methods and no cookie. That way it would detect the hash and work from it and not send the hash to other pages.

That would also (since you are already using jQuery on the pages) make the code more efficient. I had mentioned this all before, except I hadn't realized the extent to which using the cookie would become problematic.

Give me a little time to work up the alternate code. Be aware that this will be in place of the ajaxtabs script, not a supplement to it.

**jscheuer1** · 10-23-2010, 06:53 PM

OK, replace:

Code:

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"></script>

with:

Code:

<script type="text/javascript" src="jqueryloadajax.js"></script>

In jqueryloadajax.js put:

Code:

jQuery(function($){
	var ajaxrel = 'countrycontainer', //set rel attribute for ajax activation
	ajaxtarget = 'right_container', //set id of target container

	hash = location.hash.replace(/#/, '');
	ajaxtarget = $('#' + ajaxtarget);
	$('a[rel=' + ajaxrel + ']').click(function(e){
		e.preventDefault();
		var url = this.href;
		ajaxtarget.load(url, function(){
			location.hash = '#' + url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
			$("a[rel=example_group]").fancybox({
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic',
				'titlePosition' : 'over',
				'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
		});
	}).each(function(){
		if(this.href.indexOf(hash) > -1){
			$(this).click();
			return false;
		}
	});
});

Get rid of:

Code:

<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "right_container")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init();
countries.onajaxpageload = function(pageurl){
	location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
	jQuery("a[rel=example_group]").fancybox({
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'titlePosition' : 'over',
		'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});
};
</script>

But there will still be at least one problem. I see that you're planning on using the same filename for antiques and probably repros as well for various items, just in different folders. So our original plan and this one will fail once that's established, unless you can use unique filenames for those pages, or we rethink the hash and/or how it's applied. We could perhaps include a rev attribute for those links requiring a folder.