#1
  1. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28

    creating and using request parameters in javascript


    Hi all, I'm trying to write myself a couple of functions. My attempt is shown below.

    Code:
    // call onSubmit when page is calling itself
    function setScrollValue() 
    {
    	if (document.documentElement && document.documentElement.scrollTop)
    		scrollValue = document.documentElement.scrollTop;
    	else if (document.body)
    		scrollValue = document.body.scrollTop;
    	else
    		scrollValue = window.pageYOffset;
    	document.forms[0].Scroll_Value.value = scrollValue;
    }
    
    //put at beginning of first form on page
    function gotoScrollValue()
    {
    	var scrollValue = request.parameter.Scroll_Value.value;
    	if (document.documentElement && document.documentElement.scrollTop)
    		document.documentElement.scrollTop = scrollValue;
    	else if (document.body)
    		document.body.scrollTop = scrollValue;
    	else
    		window.pageYOffset = scrollValue;
    	document.out("<input type='hidden' name='Scroll_Value' value='0'>");
    }
    The idea is then in any forms that submit to themselves (I have quite a few) where I want to scroll back to the same point as before the submit I would stick a call to gotoScrollValue at the beginning of the form and use onSubmit="setScrollValue();"

    Naturally enough it doesn't work. I was hoping someone could point out what I'm doing wrong.

    Cheers,
    Pete
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    I may be a bit thick here - but isn't

    request.parameter

    jsp (& friends)?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28
    Why yes it is. You don't know the javascript equivalent do you?
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    You don't know the javascript equivalent do you?
    I think it's: nada

    All seriousness aside, as Steve Allen used to say, I'm not exactly sure what you're trying to do, but it looks interesting.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28
    Ok, not being able to access the request parameters from javascript is a bit of a hassle.

    What I was hoping to do was create a couple of functions that could be incorporated easily into any page that was submitting to itself to preserve the scrollvalue at the time the submit was hit. Can you think of any cunning plans to do this?

    I'm looking for something that will be really simple looking the jsp. I don't care how ugly it looks in javascript coz hopefully it will get done once and never looked at again.

    Cheers,
    Pete
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Semi-cunning:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    function passScrollPos(oForm) {
         var scrollValue = (typeof document.getElementsByTagName('body')[0] != 'undefined') ?
                               document.getElementsByTagName('body')[0].scrollTop :
                           (typeof window.pageYOffset != 'undefined') ?
                               window.pageYOffset :
                               null;
         if (scrollValue) oForm.action = location.href.substring(0,location.href.indexOf('?')) + '?scrollpos=' + scrollValue;
         return true;
    }
    
    function gotoScrollValue() {
         var scrollValue = location.search.substring(location.search.indexOf('=') + 1);
         if (scrollValue) {
             window.scrollTo(0,scrollValue);
             document.forms[0].elements[0].value = scrollValue + 'px';
       }
    }
    
    onload = gotoScrollValue;
    
    </script>
    </head>
    <body>
    <form style="position:absolute;top:1200px;padding-bottom:1000px;" method="post" onsubmit="return passScrollPos(this)">
    <input type="text" value="HERE"> 
    <input type="submit">
    </form>
    </body>
    </html>
    A completely client-side solution. Since you're already using jsp, it makes much more sense to store scrollValue in a hidden field, and output the necessary JavaScript into the document server-side to do an onload scroll to the same spot.

    <form....onsubmit="return passScrollPos(this)">
    <input type="hidden" name="scrollValue">
    .........
    .........
    function passScrollPos(oForm) {
    var scrollValue = (typeof document.getElementsByTagName('body')[0] != 'undefined') ?
    document.getElementsByTagName('body')[0].scrollTop :
    (typeof window.pageYOffset != 'undefined') ?
    window.pageYOffset :
    null;
    if (scrollValue) oForm.scrollValue.value = scrollValue;
    return true;
    }

    ...and output this in jsp, inserting scrollValue:
    Code:
    <script type="text/javascript" language="javascript">
    
    onload = function() {
    window.scrollTo(0,scrollValue);
    }
    
    </script>
    Last edited by adios; May 13th, 2003 at 12:45 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28
    That's looking really close to what I'm after. I've got a couple of queries though.

    Is it possible to add the input field to the form without the line <input type="hidden" name="scrollValue"> in the form. i.e. add it in the passScrollValue function.

    Does the onload function you've defined get called automatically whenever the page is first loaded or do I have to specifically call it.

    I'm basically trying to write it so that there is as little modification as possible to existing forms. I'll be putting the javascript into a seperate file and then including it.

    I'm happy with the idea of using the onSubmit='passScrollValue'

    and i'm thinking of something along the lines of
    Code:
    <%
      if (request.getParameter("ScrollValue") != null) {
    %> window.scrollTo(0,<%= request.getParameter("ScrollValue") %>);
    <% } %>
    to set the scroll value. I'll probably put that in a seperate jsp file and include it in any pages that need it.

    That way the only modifications I'd need to existing pages would be an include at the top and an addition the onSubmit paramaters.
  14. #8
  15. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Is it possible to add the input field to the form without the line <input type="hidden" name="scrollValue"> in the form. i.e. add it in the passScrollValue function
    If you don't mind losing a few browsers...
    Code:
    function passScrollPos(oForm) {
    ............
         if (scrollValue) {
             var input = document.createElement('input');
             input.setAttribute('type', 'hidden');
             input.setAttribute('name', 'scrollValue');
             input.setAttribute('value', scrollValue);
             oForm.appendChild(input);
       }
         return true;
    }
    Does the onload function you've defined get called automatically whenever the page is first loaded or do I have to specifically call it.
    The window.onload event handler property (you can reference it as simply onload) is called on every page load - window.onload() - and it'll run whatever JS you've explicitly assigned to it. In this case, it's just a function literal (lambda function). Be sure and output it into the document as illustrated, in a JS block, called onload. You don't want it called while the page is still loading.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28
    Alrighty, here's my most recent attempt. It still doesn't work though.

    Code:
    <Script type='text/javascript' language='javascript'>
    <%
    	if (request.getParameter("Scroll_Value") != null) 
    	{ %>
    
    	onload = function()
    	{
    		window.scrollTo(0,<%= request.getParameter("Scroll_Value") %>);
    	}
    
    	<% } 
    %>
    
    	function passScrollValue()
    	{
    		var scrollValue = (typeof document.getElementsByTagName('body')[0] != 'undefined') ?
    			document.getElementsByTagName('body')[0].scrollTop :
    			(typeof window.PageYOffset != 'undefined') ?
    				window.PageYOffset :
    				null;
    		if (scrollValue)
    		{
    			var Scroll_Value = document.createElement('ScrollValue');
    			input.setAttribute('type', 'hidden');
    			input.setAttribute('name', 'ScrollValue');
    			input.setAttribute('value', Scroll_Value);
    			document.Forms[0].appendChild(Scroll_Value);
    		}
    	}
    </Script>
    There's something wrong with the javascript itself as trying to use the passScrollValue function stops all the other javascript from working.
  18. #10
  19. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Is this:

    var Scroll_Value = document.createElement('ScrollValue');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', 'ScrollValue');
    input.setAttribute('value', Scroll_Value);
    document.Forms[0].appendChild(Scroll_Value);

    ...the same as this?

    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', 'scrollValue');
    input.setAttribute('value', scrollValue);
    oForm.appendChild(input);

    OK to change variable names, as long as you're consistent - what happened to 'input'? (all the succeeding lines use it). And, it's document.forms[] (JS is case-sensitive). No such HTMLElement type as 'scrollValue' (document.createElement('ScrollValue')).
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28
    Alrighty, u were right of course, but that's not hte only problem. my cod enow looks like this

    Code:
    <Script type='text/javascript' language='javascript'>
    <%
    	if (request.getParameter("Scroll_Value") != null) 
    	{ %>
    
    	onload = function()
    	{
    		window.scrollTo(0,<%= request.getParameter("Scroll_Value") %> );
    	}
    
    	<% } 
    %>
    
    	function passScrollValue()
    	{
    		var scrollValue = (typeof document.getElementsByTagName('body')[0] != 'undefined') ?
    			document.getElementsByTagName('body')[0].scrollTop :
    			(typeof window.PageYOffset != 'undefined') ?
    				window.PageYOffset :
    				null;
    		if (scrollValue)
    		{
    			var Scroll_Value = document.createElement(Scroll_Value);
    			Scroll_Value.setAttribute('type', 'hidden');
    			Scroll_Value.setAttribute('name', 'Scroll_Value');
    			Scroll_Value.setAttribute('value', scrollValue);
    			document.Forms[0].appendChild(Scroll_Value);
    		}
    	}
    </Script>
    I think the code is still invalid
  22. #12
  23. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    First of all:

    This needs to be in the page that serves the form:
    Code:
    <script type="text/javascript" language="javascript">
    
    function passScrollPos(oForm) {
         var scrollValue = (typeof document.getElementsByTagName('body')[0] != 'undefined') ?
         document.getElementsByTagName('body')[0].scrollTop :
         (typeof window.pageYOffset != 'undefined') ?
         window.pageYOffset : null;
         if (scrollValue) {
             var input = document.createElement('input');
             input.setAttribute('type', 'hidden');
             input.setAttribute('name', 'scrollValue');
             input.setAttribute('value', scrollValue);
             oForm.appendChild(input);
       }
         return true;
    }
    
    </script>
    ............
    ............
    <form action="something.jsp" onsubmit="return passScrollPos(this)">
    Then, in "something.jsp":

    <%
    if (request.getParameter("Scroll_Value") != null)
    { %>
    [this is what you need to echo (out?) to the outgoing document]
    <script type="text/javascript" language="javascript">

    onload = function()
    {
    window.scrollTo(0,<%= request.getParameter("Scroll_Value") %> );
    }

    </script>

    <% }
    %>

    (don't quote me on that jsp, don't do jsp!). Any reason why you can't hardcode that form control? Makes it simpler...
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28
    Alrighty, a quick JSP tidbit relevant to what I'm trying to do.

    The Code in my last post I am planning on putting in a seperate jsp page.

    Then in any page I want to use the scroll value stuff in I'll go
    <%@ include="DoScroll.jsp" %>

    what that does can be thought of as a copy paste. When the jsp is compiled it'll go have a look at the DoScroll.jsp and dump it's contents whereever the include directive is.

    Or to put it another way, I can put the code in a file called DoScroll.jsp and use the include directive, or I can copy paste the whole section of code at the top of any jsp I want to use it in. The results will be the same.

    So at the top of my page I'll have
    Code:
    <Script type='text/javascript' language='javascript'>
    it will be followed by either
    Code:
    	onload = function()
    	{
    		window.scrollTo(0,<%= request.getParameter("Scroll_Value") %> );
    	}
    or nothing depending on whether request.getParameter("Scroll_Value" == null)

    and then the passScrollValue function
    Code:
    	function passScrollValue()
    	{
    		var scrollValue = (typeof document.getElementsByTagName('body')[0] != 'undefined') ?
    			document.getElementsByTagName('body')[0].scrollTop :
    			(typeof window.PageYOffset != 'undefined') ?
    				window.PageYOffset :
    				null;
    		if (scrollValue)
    		{
    			var Scroll_Value = document.createElement(Scroll_Value);
    			Scroll_Value.setAttribute('type', 'hidden');
    			Scroll_Value.setAttribute('name', 'Scroll_Value');
    			Scroll_Value.setAttribute('value', scrollValue);
    			document.Forms[0].appendChild(Scroll_Value);
    		}
    	}
    </Script>
    Does that look right to you?

    The reason I don't want to hard code the form is I want to be able to use the code in different pages without changing it.

    I'm also curious as to why you are returning true from the function. It can only ever return true so why bother?
  26. #14
  27. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Looks OK, I guess. It's standard practice to return some value from a JS function; since it's being called onsubmit="return...." the true return continues the event (submission). Would work with no return value (false cancels) but it's conventional. I'm familiar with php includes & SSI but my Java is shaky. I am curious about something: you've now posted this three times:

    function passScrollValue()
    {
    ....................
    ....................
    document.Forms[0].appendChild(Scroll_Value);
    }
    }

    ...and it was corrected above. JS may not be Java but it's unforgiving of syntax errors (document.forms[0]). You're also using 'scroll value' as a string, a variable, and another variable. The reason I named the DOM input object 'input' was...hey, it's an INPUT object (). Your site, your choice, just seems to confuse things a bit.

    The big Q: does it work?
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Location
    Brisbane, Australia
    Posts
    1,442
    Rep Power
    28
    Thanks for all your help adios. In this and over threads. You are a legend!! I've got it all working now.

    All I need to do is put

    Code:
    <%@include file="ScrollSet.jsp" %>
    somewhere near the top of my pages and add

    Code:
    onClick='passScrollValue()'
    to any buttons that submit back to the same form.

    I'm stoked with the result.

    I've included the completed code below in case you or anyone else are curious.

    Love ya work!!

    Code:
    <Script type='text/javascript' language='javascript'>
    <%
    	if (request.getParameter("Scroll_Value") != null) 
    	{ %>
    
    	onload = function()
    	{
    		window.scrollTo(0,<%= request.getParameter("Scroll_Value") %>);
    	}
    
    	<% } 
    %>
    
    	function passScrollValue()
    	{
    		var scrollValue = (typeof document.getElementsByTagName('body')[0] != 'undefined') ?
    			document.getElementsByTagName('body')[0].scrollTop :
    			(typeof window.PageYOffset != 'undefined') ?
    				window.PageYOffset :
    				null;
    		if (scrollValue)
    		{
    			var input = document.createElement('input');
    			input.setAttribute('type', 'hidden');
    			input.setAttribute('name', 'Scroll_Value');
    			input.setAttribute('value', scrollValue);
    			document.forms[0].appendChild(input);
    		}
    	}
    </Script>

IMN logo majestic logo threadwatch logo seochat tools logo