Jump to content

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


johndoe2005

Recommended Posts

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;

?>

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.