johndoe2005 Posted October 11, 2010 Share Posted October 11, 2010 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; ?> Quote Link to comment https://forums.phpfreaks.com/topic/215604-javascript-how-to-jump-to-anchor-tag-created-in-webcontent-returned-via-ajax/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.