Solved

Javascript Ajax Anchor down to Div

Posted on 2014-03-10
5
327 Views
Last Modified: 2014-03-17
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
0
Comment
Question by:smares323
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 39919607
I personally wouldn't use it.  Get your hands on jQuery and use it for your ajax requests.  It will also make it incredibly simplier to use

eg..

$.load("http://myurl.com");

see jquery api for more details https://api.jquery.com/load/
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39919664
how could I make it Anchor down to the Div Onclick.
Please explain what you mean by this statement.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39919682
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>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39920401
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

0
 

Author Closing Comment

by:smares323
ID: 39934683
Good advice.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question