Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Reloading a Page with an Anchor

Posted on 2012-08-31
10
Medium Priority
?
512 Views
Last Modified: 2012-08-31
Hi,
I have a page with 5 logical several sections.  In each section, the user can submit the page to itself via a button.

The server side code (ColdFusion 8 in this case) will do some processing and then redisplay the same page with some updated values in the section they picked.

When redisplaying the page I'd like to position the user to the section they hit the submit button.

I can set up anchors at the top of each section but I'm not sure when I load the page, how or where to designate (in the <FORM> ?)  which anchor to use?

Please advise.

Thanks in advance,
hefterr
0
Comment
Question by:hefterr
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 9

Expert Comment

by:WebDevEM
ID: 38354349
One way would be to not have the submit buttons be <input type="submit"> but make each of them <input type="button"> and use an onclick to call a quick javascript function with the anchor.  Something like this:
<script>
function submitForm (newValue) {
  var changeAnchor = document.getElementById('whatAnchor');
  changeAnchor.value =newValue;
  document.myform.submit();
}
</script>
<form name="myform">
<input type="hidden" name="whatAnchor" id="whatAnchor" value="">
<input type="button" value="Submit" onclick="submitForm('Section1');">
<input type="button" value="Submit" onclick="submitForm('Section2');">
</form>

Open in new window

Then you'd just need to make sure your server-side logic reads in the value of whatAnchor from the query string or post (depending which way you submit the form) and include it in the URL when you send the user back to it.  I don't know ColdFusion code, but in other languages what I'd do it process the data as needed and redirect the user to the same page.  

To prevent the server-side code from being run every time the page loads, I'd set another hidden field and only run the server-side code if that 2nd hidden field is a certain value (like Action=Process)
0
 
LVL 1

Author Comment

by:hefterr
ID: 38354400
Hi WebDevEM,
I sort of get it but where in your example is an anchor in the page?

hefterr
0
 
LVL 9

Accepted Solution

by:
WebDevEM earned 1600 total points
ID: 38354444
Sorry, from the description of the question I thought you understood that part so I left it out to keep the code shorter...
<script>
function submitForm (newValue) {
  var changeAnchor = document.getElementById('whatAnchor');
  changeAnchor.value =newValue;
  document.myform.submit();
}
</script>
<form name="myform">
<input type="hidden" name="whatAnchor" id="whatAnchor" value="">

<a name="Section1"></a>
... other items in section one go here ...
<input type="button" value="Submit" onclick="submitForm('Section1');">

<a name="Section2"></a>
... other items in section two go here ...
<input type="button" value="Submit" onclick="submitForm('Section2');">
</form>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:hefterr
ID: 38354502
Hi WebDevEM,

and include it in the URL when you send the user back to it.

Would this be in the <Form action=myProg#Section2?date=08312012,method="post">
for example?  of couse the anchor (Section2) would be dynamically determined.  Is this the correct syntax within the FORM statment?

Thanks again,
hefterr
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 38354582
By creating the hidden input "whatAnchor", that will get passed back to your form along with all the other form fields when the form is submitted, so you don't need to include them in the <form> tag itself.
<form name="myform" action="URLofThisPage" method="post">

Open in new window

Doing it this way, with the javascript above, each button will return a different value of "whatAnchor" when the form gets submitted.

Then  your ColdFusion code would need to read the POST variables.  I've been looking at a few pages to see how CF would do this, and honestly I don't know.  (If I had to make a CF page I'd be asking for help here probably.)

Once you've done all the CF processing you need to, you can probably use CF code somehow to redirect the user to URLofThisPage#<theValueOfwhatAnchor>  

When you're doing your server-side processing, you might also want to check if there is anything in the POST variables and skip processing if they're empty.  This way you won't do extra work if the user  is coming from another page, or during a redirect (after processing)

If anyone else is reading this thread and knows the ColdFusion code he'd need, can you please chime in?  At least we have a start on the HTML side of things...
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38354599
Just a note - anchors are no longer required to position a page you can just use an id. So if you have sections

<div id="section1">...</div>
<div id="section2">...</div>
<div id="section3">...</div>

http://yourserver/page.html#section2 will position at section 2.

So what you could do is this (See attached)

Working version here http://www.marcorpsa.com/ee/t93.php. To test scroll down to the bottom of the page and click submit.

What is happening: hidden fields in each form contain the section to return to - server side script outputs a javascript variable (scrollTo) which is used by a generic script to scroll the content to the required section when the page returns.
t92.php
0
 
LVL 36

Assisted Solution

by:SidFishes
SidFishes earned 400 total points
ID: 38354834
the cf part is simple

determine which section you want to go back to

<cfswitch expression="#form.someid#">
<cfcase value="123">
<cflocation url="formpage.cfm##section123">
</cfcase>
<cfcase value="223">
<cflocation url="formpage.cfm##section223">
</cfcase>
etc
</cfswitch>


(two ## are required to escape the #)
0
 
LVL 1

Author Comment

by:hefterr
ID: 38354897
@SidFishes
<cflocation url="formpage.cfm##section123">

I guess i can do that, I was just falling through the page with the HTML/CF display code.  This is convenient when there is an error to display on the page.  But in this case, I don't think it's a factor.

  I assume I can also add URL variables to this eg:
<cflocation url="formpage.cfm##section123?startdate=20120830&type=slideshow">

hefterr
0
 
LVL 36

Expert Comment

by:SidFishes
ID: 38354923
if i remember right the anchor is after the url vars
0
 
LVL 1

Author Closing Comment

by:hefterr
ID: 38355430
Thanks to all.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question