Hi Rick, There are several submit on my side. Each submit stores data and then builds up the same page. I am looking for a way in web-connection to set an #anchor behind the querystring so that after saving datas should be returned to the place of the submit. Is there any way? Thanks, Joachim Kumpa
Sure - it's just a URL add the #anchor at the very end after the query string. That should work to navigate the page when it returns assuming the content is server rendered and available and the anchor Id or Name is in the content immediately after load.
+++ Rick ---
Yes .. I know that I have to put an anchor at the end of the query. I do this when I put the query string for the next page to be called, befor Response.ExpandTemplate() is called:
Yes .. I know that I have to put an anchor at the end of the query. I do this when I put the query string for the next page to be called, befor Response.ExpandTemplate() is called.
The server/browser does not seem to be recognized. On the other hand, i can see the #Anchor is in the URL of the new page. Even if I check WebConnection-Status under "Display Request", I don't see that the #anchor behind the querystring is set ( in the wwrequestlog the same ). Therefore i think i put the #anchor in the wrong place in the program process. I hope I've explained my problem better now.
The server/browser does not seem to be recognized.
I'm not sure what that means in this context. You mean the URL does not want to navigate in the browser when the anchor follows a querystring?
Html Anchors are not part of the querystring so they aren't returned as part of that. The only way you'll see it is in the full Url, but there are no server APIs that pull out an anchor AFAIK - you'll have to parse the full Url.
+++ Rick ---
Yes, i mean the URL does not want to navigate in the browser when the anchor follows a querystring. I create the full URL with the anchor as querystring and put it as form action-attribute through methode Response.ExpandTemplate. If the page is then displayed for the first time, the anchor don't work, the page is displayed at the beginning. When i Submit now the page again the querystring in the form action-attribute is read and it works. I need a way to create a querystring ( for the first-time-display) that the URL navigate in the browser.
That's an issue with the browser doing something weird - it has nothing to do with what happens on the server. Assuming the Anchor is on the response url that should work. If it doesn't it's either because the content you're navigating to hasn't been rendered yet (and yes that's quite possible) or because the anchor is invalid or not in the document.
In my experience anchor navigation in browsers is not super reliable - there are lots of scenarios where it doesn't work or works inconsistently. Some of this is due to modern browser rendering optimizations that make the DOM available before the document has completely rendered in the browser.
If you want to be sure the page navigates internally add some JavaScript that waits for the page to load then manually focus that location in the page.
Something like this (off the top of my head):
<script>
// at bottom before </body>
document.addEventListener("load", ()=> {
const anchor = window.location.hash;
document.getElementById(anchor.substr(1)).scrollIntoView();
});
</script>
You might even want to add a little delay with setTimeout() to that just to make sure the element is there and in the right position.
+++ Rick ---
Thanks for your considerations. I tried them but without success. I myself have no idea to solve the problem.
But thanks for you, Joachim
You can't set an anchor on the server - it has to be done via the submission URL that is clicked or on executed via submit of a form. Once the request goes to off the URL can't be changed so you can't add anything to that Url after the fact based on what you do on the server. You can do that before you submit (onsubmit handler in JS) but not after.
You can change the behavior dynamically by way of injecting JavaScript code on document load like I showed in the last reply.
+++ Rick ---
Hi Rick, I used the code you showed me in your last replay. But it doesn't work. The difficulty is that there are 10 submits on page and only when sending a submit which anchor must be set at end of the querystring.
I give up further attempts and think about a different approach.
Many Thanks for you.
If anchors remain unreliable, and you are starting over, JavaScript could scroll to a specific element based on a query parameter instead of an anchor.
<form action="yourpage.wcs?param1=value1&scrollTo=section1">
<input type="submit" value="Submit">
</form>
<div id="section1">Target Section</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const params = new URLSearchParams(window.location.search);
const scrollTo = params.get('scrollTo');
if (scrollTo) {
const element = document.getElementById(scrollTo);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
});
</script>
I think what you want is window.location.hash not window.location.search (query string).
+++ Rick ---
I found the malefactor : bootstrap 5 My submit initiates a save routine. I write the result from this in a message. This message is opened as a modal dialog when the page is rebuilt. bootstrap is used for this:
$(window).on('load', function() {
$('#ergebnis').modal('show');
});
<div class="modal fade right"
id="ergebnis"
tabindex="-1"
aria-labelledby="exampleSideModal2"
aria-hidden="true">
<div class="modal-dialog modal-side modal-bottom-right"> .....
without this on('load') your code snippet works fine, likewise an anchor.
Well you can still make this work by putting the code I showed into that snippet before (or after) the modal runs.
Although if you bring up a modal there probably is no need to navigate. +++ Rick ---
it doesn't matter whether the code is before or after the snippet. As soon as boat trap is in the game, the snippet does not work.
As soon as the boottrap modal is missing, the snippet works.
If you're bringing up a modal why would you want to navigate the page? The modal will overlay that...
IAC, you can still do that if you delay the modal - ie. navigate where you want to go first, then fire the modal and use a timeout (ie. setTimeout(openModal(),400);)...
+++ Rick ---
Why i will navigate the page, ok listen:
On the page there are several accordions ( bootstrap)
when accordion "kommissionszuordnung" collapsed, the user have to scroll the page upwards,
change datas and then submit "save".
Over the form-action a method is called where save the datas, then the same page should displayed again. The user wants to have the accordion accessed without scrolling, to do this, an anchor or scrollto must be set to scroll for this desired accordion, in addition, a modal note with the result of the saving.
The problem is, at the time of the submit it is only known which anchor should be set or to navigate on the page. and at this time i have no access on the querystring to add the anchor or the scrollTo, or do I overlook something and don't find the right place? I think the querystring for the next page is already generated by the browser or is that wrong?
The Submit uses the form-action querystring where the required anchor or scrollTo for the next page is not included, i only know after the submit which anker must be used.
<script>
document.addEventListener("DOMContentLoaded", () => {
const params = new URLSearchParams(window.location.search);
const scrollTo = params.get('scrollTo');
if (scrollTo) {
const element = document.getElementById(scrollTo);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
});
window.onload = function() {
setTimeout(function() {
$('#ergebnis').modal('show');
}, 400);
};
</script>
The script works fine, but how i can manipulate the querystring for the next page?
First off you can combine both of those scripts into a single script. And if you need to scroll and use the modal just delay the modal long enough so you can scroll first - otherwise don't show the modal obviously and just scroll.
If you need to figure out after the submit where to go, embed the data for that into the script code of the page - you control the page so generate the data into the page as Json or explicit variable declarations.
I do this all the time and often have a loClientModel object on which I store values to 'send' to the client page. I then serialize that object to JSON and embed it into the script with a variable name.
loSer = CREATEOBJECT("wwJsonSerializer")
loViewModel = CREATEOBJECT("EMPTY")
ADDPROPERTY(loViewModel,"navigateto","#section2")
ADDPROPERTY(loViewModel,"dialogmessage","Wait for me!")
...
lcModelText = "var vm = " + ser.Serialize(loViewModel)
You can then write that out into your HTML in your template or Response.Write() or whatever you're using in your page and you can access all of it. If you just have one or two values, you can just write the values directly, but using an object can be nice if you're dealing with business objects and passing them say to a SPA application like VueJs or React on render.
+++ Rick ---
Of course I only use one script instead of two. As a test, I had separated the scripts. But now I am a personal problem. The basics for JSON are known for me, but I lack any experience and practice with JSON. I don't know how i can embed the data for that into the script code of the page. At the moment I simply lack the experience and use for that all.
I guess that depends how your FoxPro code is generating the HTML.
PRIVATE loViewModel, loSer
loSer = CREATEOBJECT("wwJsonSerializer")
loViewModel = CREATEOBJECT("EMPTY")
ADDPROPERTY(loViewModel,"navigateto","#section2")
ADDPROPERTY(loViewModel,"dialogmessage","Wait for me!")
If you use MVC templates:
<html>
<head>
...
<script>
var vm = <%= ser.Serialize(loViewModel) %> ;
function doSomethingWithData() {
alert("Value is: " + vm.navigateTo);
}
</script>
...
As I said you don't really have to use JSON and an object, but it is easier if you pass more than a few values into the script. Otherwise you can just directly expand the text into the script (although you have to watch out for string encoding issues in that case, which is another reason why JSON is useful for this).
So you could do:
pcNavigateTo = "#anchor"
<script>
var anchor = "<%= pcNavigateTo %>";
setTimeout(()=> $(anchor)[0].scrollIntoView(), 100);
</script>
Either way you can embed those values into the page from the server so you can change the navigation behavior from the server, which is not possible via the Url which can only use the Url that was sent to the server.
+++ Rick ---
No .. i don'u use MVC Templates. i will try embed the values into the page from the server.
I found a little bug - winApi in wwApi.prg
I use oApi.WinApi_Sleep(100) in my printout function. So far, this has made mistakes and did not work. Then i found the solution in wwApi.prg: Look for "DEFINE CLASS wwFileStream AS Custom". I mean befor that it must be set an "EndDefine". Can you check this please?
Win32_Sleep() is a standalone function not part of the class. In fact, most functionality of wwApi is not part of the class.
I've just cleaned up the documentation and separated out the Class wwApi as a separate topic tree, from the rest of the UDF functions that make up the wwApi Library.
+++ Rick ---