Avatar of jftf
jftf
Flag for United States of America asked on

jquery address + AJAX template

Does anyone have a template w/ jquery address and ajax triggers built in? Like this: http://www.asual.com/jquery/address/samples/accordion/ except more simplified without the accordion? Thanks.
Scripting LanguagesJavaScriptAJAX

Avatar of undefined
Last Comment
Michel Plungjan

8/22/2022 - Mon
Michel Plungjan

can you please elaborate?

The link you gave IS an accordion and nothing else
jftf

ASKER
I'm looking for an extremely simplified example of jquery address (found in the link http://www.asual.com/jquery/address/samples/accordion/ ). It is more than an accordion.

So jquery address uses hashbang code to update a page's content AND the page's URL (aka "deep linking". When you click the accordion the URL reflects the state of the accordion. If you were to copy the URL after clicking around for a while and pasted it into a fresh browser, cache cleared, you'd arrive at the state of the accordion when the URL was copied.

Let's say I was building my company's portfolio. A prospective client wants to see the work I did for clientX but with my jquery/Ajax powered site that means clicking through the first 13 clients. If each client could bs bookmarked however, and the URL executed the appropriate JavaScript to load the proper Ajax state, then everything would bs perfect.

That's what I'm going for here. If you need further explanation I'll do my best to comply. Thanks
Michel Plungjan

But that is extremely simple.

$(document).ready(function() {
  var hash = location.hash;
  if (!hash) hash="#defaultDivId";
  $(".clients").each(function() {
    $(this).hide(); // hide all items with class="clients"
  }
   
  $(hash).show();
}

whatever is now behind the # will be shown, if nothing then defaultDivId will be shown

<div id="defaultDivId" class="clients">this is default stuff</div>
<div id="Client1" class="clients">this is client 1</div>
<div id="Client2" class="clients">this is client 2</div>
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
jftf

ASKER
I think what I'm really trying to shoot for is something more like this:

function LoadURLHash(){
	var urlHash = location.hash;
	urlHash = urlHash.replace(/^#\//,"");

	if (urlHash == ""){
		$.address.value("/home");
	} else if (urlHash == "home"){
	
	  return false;
	}
	var idHome = $("#"+urlHash).attr("id"); 
	if (idHome != undefined)
		{	
			$("#"+urlHash).click();
		} 
		else {
			
			$("#"+urlHash).click();
	
		}
		$("#"+urlHash).click();
	}
	

	
function portfolio(){
	/* Create NAV Active State, Show Category column */
	$('a.ajax').click(function(){
		if (identHash == 0)
			{
			}	
		
		ClickURLHash($(this),0);
		
			
		
		$(this).addClass('active');
		var namePage = $(this).attr('id').replace('btn-','');
		
		$('#main-content').contents().remove();
		$.ajax({
			url:"pages/"+ namePage +".html",
			dataType:"html",
			cache:false,
			error: function(data){
				alert("Sorry, "+namePage+" was not found.");return false;
			},
			success: function(data){
				$('#main-content').append(data).hide().fadeIn(300);
			}
		});
	}); 
	
}

$(document).ready(function(){
		    
	portfolio();	
	
	$.address.externalChange(function(event) {
	   LoadURLHash();	   
	});
	 
});	 

Open in new window


As you can see by the code, the LoadURLHash() allows the script the load what's in the Address Bar as soon as Javascript starts. If there's a hashcode in there it'll direct you to the proper place.
ASKER CERTIFIED SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
jftf

ASKER
This was 85% of what I needed to know to make my solution work. Without this answer I'd still be lost, with it I was able to take it the rest of the way, thank you!
Michel Plungjan

Yeah, I was coding something else first
I meant

$(document).ready(function() {
  var hash = location.hash;
  if (!hash) hash="#defaultContent";
  $("#content").load(hash.substring(1)+".html");
}
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.