Avatar of smares323
smares323 asked on

Javascript Ajax Anchor down to Div

I have this Ajax script that I pick up on the Internet, how could I make it Anchor down to the Div Onclick.
New-Text-Document.txt
AJAXJavaScript

Avatar of undefined
Last Comment
smares323

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Rob

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.
See how we're fighting big data
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
Julian Hansen

how could I make it Anchor down to the Div Onclick.
Please explain what you mean by this statement.
Michel Plungjan

I am also not sure, but I am sure that the script is ugly and the invocation using javascript: href even more so.

Load jQuery and add this to the head of the page

$(function() { // page load
  $("#loadLink").on("click",function(e) {
    e.preventDefault(); // stop link
    $("#contentarea").load(this.href);
  });
});

Open in new window


where the link is

<a href="wcstory....." id="loadLink">....</a>
leakim971

how could I make it Anchor down to the Div Onclick.

Check lines 36 and 42 :
/***********************************************
* 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=1; //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);
	}
	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);
	return false;
}

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;
		setTimeout(function() { location.hash = "#"+containerid; }, 50);
	}
}

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
		}
	}
}

Open in new window


Check this : http://zeptojs.com/
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

how could I make it Anchor down to the Div Onclick.
Below, like this : setTimeout(function() { location.hash = containerID; }, 10);

Check this page:
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		#go {
			color:black;
			font-size:12px;
		}
		#contentarea {
			float:left;
			margin-left:10px;
			margin-right:10px;
		}
	</style>
	<script type="text/javascript" src="//cdn.jsdelivr.net/zepto/1.1.3/zepto.js"></script>
	<script type="text/javascript">

		var loadedobjects = "";
		var rootdomain = "http://"+window.location.hostname;

		Zepto(function($) {

			function ajaxpage(event){

				event.preventDefault();

				var bustcachevar = 1; //bust potential caching of external pages after initial request? (1=yes, 0=no)
				var bustcacheparameter = "";

				var containerid = $(this).data("containerid");
				var url = $(this).attr("href");
				function loadpage(page_request) {
					var containerID = "#" + containerid;
					$(containerID).html(page_request);
					setTimeout(function() { location.hash = containerID; }, 10);
				}

				$.ajax({ cache: !!bustcachevar, url: url, success: loadpage });
			}

			$("#go").click(ajaxpage);

		});

	</script>
</head>
<body>
	<a id="go" href="wcstory.cfm?eid=#qwebcastprofiles.eid#" data-containerid="contentarea">MY PAGE TO LOAD WITH AJAX</a>
	<div id="contentarea"></div>
</body>
</html>

Open in new window

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
smares323

Good advice.