Page 1 of 1

Javascript how to jump to anchor tag created in webcontent

Posted: Sat Oct 09, 2010 8:05 am
by jdoe
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();

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;

?>