Jump to content

Javascript how to jump to anchor tag created in webcontent returned via AJAX

johndoe2005

By johndoe2005
in Javascript Help

Recommended Posts

johndoe2005 Newbie

johndoe2005

Posted
Posted

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.

 

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.

 

 

 

<!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();


<?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;

?>

 

 

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.