Javascript how to jump to anchor tag created in webcontent
Posted: Sat Oct 09, 2010 8:05 am
Hi,
I need help. I have 3 files:
1. A html file that contains the DIV element to display web content using innerHTML via AJAX
2. A javascript file (myscript2.js) that handles the AJAX and update the DIV.innerhtml and also 'jumps' to an anchor tag created by the 3rd file, process.php
3. A php file (process.php) to generate the anchor tag and to return content.[/li][/list]
What i want to achieve:
1. When the content is returned to client, I wish the content to jump the anchor tag, which was defined at the server.
2. I tried to use the document.getElementById('myLink').click() to have Javascript to jump to it. This works in IE, but it doesn't work in FF and Chrome.
Request for help:
How can I solve this for all browsers?
Note:
i. For the Ajax I am using prototype.js.
ii. The codes are attached.
Thanks.
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>classic-ish</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="myscript2.js"></script>
</head>
<body onload="sendRequest('');">
<div id="DisplayBlog"></div> <!-- For AJAX power! -->
</body>
</html>
/*******************************************************************************
Filename: myscript2.js
Function: sendRequest
Date : 18/09/2010
Purpose : To send request to server (using prototype.js)
********************************************************************************/
function sendRequest(myText) {
new Ajax.Request(
"process.php",
{method: 'post',
parameters: {string: myText},
onSuccess: showResponse
});
}
/*******************************************************************************
Filename: myscript2.js
Function: showResponse
Date : 18/09/2010
Purpose : To show response on the browser.
********************************************************************************/
function showResponse(req){
text = req.responseText;
//displays the content returned from server.
document.getElementById('DisplayBlog').innerHTML = text;
//Automatically clicks on the link.
//The browser should shows starting page as "This is where the link will jump to".
//My problem is this works in IE.
//But it is not working in Chrome and FF. It shows at the starting page as
//"This link will jump to the anchor named jump"
document.getElementById('myLink').click();
I need help. I have 3 files:
1. A html file that contains the DIV element to display web content using innerHTML via AJAX
2. A javascript file (myscript2.js) that handles the AJAX and update the DIV.innerhtml and also 'jumps' to an anchor tag created by the 3rd file, process.php
3. A php file (process.php) to generate the anchor tag and to return content.[/li][/list]
What i want to achieve:
1. When the content is returned to client, I wish the content to jump the anchor tag, which was defined at the server.
2. I tried to use the document.getElementById('myLink').click() to have Javascript to jump to it. This works in IE, but it doesn't work in FF and Chrome.
Request for help:
How can I solve this for all browsers?
Note:
i. For the Ajax I am using prototype.js.
ii. The codes are attached.
Thanks.
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>classic-ish</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="myscript2.js"></script>
</head>
<body onload="sendRequest('');">
<div id="DisplayBlog"></div> <!-- For AJAX power! -->
</body>
</html>
/*******************************************************************************
Filename: myscript2.js
Function: sendRequest
Date : 18/09/2010
Purpose : To send request to server (using prototype.js)
********************************************************************************/
function sendRequest(myText) {
new Ajax.Request(
"process.php",
{method: 'post',
parameters: {string: myText},
onSuccess: showResponse
});
}
/*******************************************************************************
Filename: myscript2.js
Function: showResponse
Date : 18/09/2010
Purpose : To show response on the browser.
********************************************************************************/
function showResponse(req){
text = req.responseText;
//displays the content returned from server.
document.getElementById('DisplayBlog').innerHTML = text;
//Automatically clicks on the link.
//The browser should shows starting page as "This is where the link will jump to".
//My problem is this works in IE.
//But it is not working in Chrome and FF. It shows at the starting page as
//"This link will jump to the anchor named jump"
document.getElementById('myLink').click();
Code: Select all
<?php
/*
Filename: process.php
Function: To process and return content to the client
*/
//Below I define the link to jump from. This link will be automatically called in javascript
$strMessage = "<A id=\"myLink\" HREF=\"#jump\">This link will jump to the anchor named jump</A>\n";
for ( $counter = 1; $counter <= 100; $counter += 1) {
$strMessage = $strMessage."<p>This is a sentence. Repeated 100 tmes. </p>";
}
//Below I define the anchor
$strMessage = $strMessage."<h1><A NAME=\"jump\">This is where the link will jump to</A></h1> ";
for ( $counter = 1; $counter <= 100; $counter += 1) {
$strMessage = $strMessage."<p>This is another long sentenace. Repeated 100 times.</p>";
}
echo $strMessage;
?>