Forum Moderators: open
We have a website which has been developed using SAP's proprietary development environment called ITS.
This website does not work on the AOL browser for some reasons. There are two different versions of URL's:
[sub.example.com...]
which doesn't work in AOL and
[sub.example.com...]
which works in AOL.
So, basically we found out that if we follow the second pattern for all the links in our pages for AOL we will be able to browse the site.
We can detect the browser version using Javascript. Now, the issue I am having is that I want to modify the URL when the user clicks on any of the links at the time he leaves the page.
So, if he clicks on any link on the page, we should modify that particular URL based on the browser and then request the next page.
Is it possible?
Thanks,
[edited by: tedster at 6:29 pm (utc) on Aug. 8, 2003]
[edit reason] switch URL for example.com [/edit]
Welcome to WebmasterWorld!
If I understand your question, it is not only possible, it is relatively easy to do also.
In an external JavaScript file (e.g., yourfile.js) add a function to do the conversion:
function formURI(URI) {
URI = URI + 'something or other';
return URI;
}
Include this file in every page you need to alter the links for:
<script type="text/javascript" src="yourfile.js"></script>
Then implement the function in an onlick handler on the links, like so:
<a href="http://somewhere.over/the/rainbow/!" onclick="location.href=formURI(this.href); return false;">Link</a>
Jordan
Another thing I had was that the next page has the links in the following way:
<a href="/scripts/wgate/z_bic_offc13347d26/~ flN0YXRlPTIyMzk2Mjk4MjA=?~next_template=bic_prod_details& cmd_prod_guid=3D04644FA6FB1541E1000000CD8621B8
& cmd_obj_guid=3B22B9BE84030C7EE1000000CD86219A& prod_lst_area=ZPRINT1">
Now, if this URL fails in AOL, but the following one works:
<a href="/scripts/wgate/z_bic_offc/!?~next_template=bic_prod_details&cmd_prod_guid= 3D04644FA6FB1541E1000000CD8621B8&
cmd_obj_guid= 3B22B9BE84030C7EE1000000CD86219A&prod_lst_area=ZPRINT1">
Can we change the URL from the above one to the bottom one when the user clicks on one of these links?
Basically, just replace whatever is there between z_bic_offc and? by /!
Thanks,
Ranjan.
[edited by: korkus2000 at 11:40 pm (utc) on Aug. 8, 2003]
[edit reason] fixed sidescroll [/edit]
See if something like this is what you are aiming for.
Script:
function formURI(URI) {
var frontIdx = URI.indexOf("z_bic");
if (frontIdx!= -1) { // was found
var backIdx = URI.indexOf("?", frontIdx);
if (backIdx!= -1) { // was found
frontIdx = URI.substring(0, frontIdx);
backIdx = URI.substring(backIdx);
URI = frontIdx + '/!' + backIdx;
}
}
return URI;
}
function formLinks() {
var lnks = document.getElementsByTagName("a");
for (var n=0;n<lnks.length;++n)
lnks[n].href = formURI(lnks[n].href);
}
If you detect AOL, just call formLinks() and all the links on the page will be fixed (in theory at least ;) ).
Jordan
<edit>Oops, changed lnks[n].src to lnks[n].href...vapor lock of the brain there for a minute</edit>
<a href="http://sub.example.com/scripts/wgate/z_bic_offc12328279sb/ ~fiwhedduih26gs==?~template=bic_prod_heir&prod_cat_area=ZCat01" onclick="location.href=formURI(this.href); return false;">Test</a>
The function is:
function formURI(URI) {
var frontIdx = URI.indexOf("z_bic");
if (frontIdx!= -1) { // was found
alert("First Step");
var backIdx = URI.indexOf("?", frontIdx);
if (backIdx!= -1) { // was found
alert("Second Step");
frontIdx = URI.substring(0, frontIdx);
backIdx = URI.substring(backIdx);
URI = frontIdx + '/!' + backIdx;
}
}
return URI;
}
Any suggestions here.
Thanks,
Ranjan.
<fix sidescroll, edit url>
[edited by: tedster at 3:34 am (utc) on Aug. 9, 2003]
function formURI(URI) {
var newURI = URI;
var frontIdx = URI.indexOf("z_bic");
if (frontIdx!= -1) { // was found
alert("First Step");
var backIdx = URI.indexOf("?", frontIdx);
if (backIdx!= -1) { // was found
alert("Second Step");
frontIdx = URI.substring(0, frontIdx);
backIdx = URI.substring(backIdx);
newURI = frontIdx + '/!' + backIdx;
}
}
return newURI;
}
Jordan
Try putting this in the <head>:
<script type="text/javascript" src="links.js"></script>
And this right before the </body>
<script type="text/javascript">
<!--
void(formLinks());
//-->
</script>
And this in links.js:
function formURI(URI) {
var frontIdx = URI.indexOf("z_bic");
if (frontIdx!= -1) { // was found
var backIdx = URI.indexOf("?", frontIdx);
if (backIdx!= -1) { // was found
frontIdx = URI.substring(0, frontIdx);
backIdx = URI.substring(backIdx);
URI = frontIdx + '/!' + backIdx;
}
}
return URI;
}
function formLinks() {
var lnks = document.getElementsByTagName("a");
for (var n=0;n<lnks.length;++n)
lnks[n].href = formURI(lnks[n].href);
}
---
This works for me on a test page, repeating this link about 12 times:
<a href="/scripts/wgate/z_bic_offc13347d26/~flN0YXRlPTIyMzk2Mjk4MjA=?~next_template=bic_prod_details& cmd_prod_guid=3D04644FA6FB1541E1000000CD8621B8&
cmd_obj_guid=3B22B9BE84030C7EE1000000CD86219A& prod_lst_area=ZPRINT1">Link</a>
Hope that helps.
Jordan
[edited by: korkus2000 at 11:40 pm (utc) on Aug. 8, 2003]
[edit reason] fixed sidescroll [/edit]
<html>
<head>
<title>Sample code</title>
<script type="text/javascript" src="links.js"></script>
</head>
<script type="text/javascript">
<!--
void(formLinks());
//-->
</script>
<body>
<p><a href="http://sub.example.com/scripts/wgate/z_bic_offc12328279sb/~fiwhedduih26gs==?~template=bic_prod_heir&prod_cat_area=ZCat01">Brother Office Commercial Division</a>
<a href="/scripts/wgate/z_bic_offc13347d26/~flN0YXRlPTIyMzk2Mjk4MjA=?~next_template=bic_prod_details& cmd_prod_guid=3D04644FA6FB1541E1000000CD8621B8&
cmd_obj_guid=3B22B9BE84030C7EE1000000CD86219A& prod_lst_area=ZPRINT1">Link</a>
<a href="/scripts/wgate/z_bic_offc13347d26/~flN0YXRlPTIyMzk2Mjk4MjA=?~next_template=bic_prod_details& cmd_prod_guid=3D04644FA6FB1541E1000000CD8621B8&
cmd_obj_guid=3B22B9BE84030C7EE1000000CD86219A& prod_lst_area=ZPRINT1">Link</a>
</body>
</html>
[edited by: tedster at 4:39 pm (utc) on Aug. 11, 2003]
I changed the following:
lnks[n].href = formURI(lnks[n].href); to
lnks[n].href = formURI(lnks[n].src);
function formURI(URI) {
var frontIdx = URI.indexOf("z_bic");
if (frontIdx!= -1) { // was found
var backIdx = URI.indexOf("?", frontIdx);
if (backIdx!= -1) { // was found
frontIdx = URI.substring(0, frontIdx);
backIdx = URI.substring(backIdx);
URI = frontIdx + 'z_bic_offc/!' + backIdx;
}
}
return URI;
}
function formLinks() {
var lnks = document.getElementsByTagName("a");
for (var n=0;n<lnks.length;++n)
lnks[n].href = formURI(lnks[n].src);
}
Thanks,
Ranjan.
Sorry, I should have been more clear!
This part:
<script type="text/javascript">
<!--
void(formLinks());
//-->
</script>
...has to go before the closing
<body> tag--</body>. That is the problem. Put it right before the </body> tag and everything should work (the function has to be called after all the links have been parsed into the DOM already--so below all the links in the code). ...cmd_obj_guid=3B22B9BE84030C7EE1000000CD86219A& prod_lst_area=ZPRINT1">Link</a>
<script type="text/javascript">
<!--
void(formLinks());
//-->
</script>
</body>
</html>
Let me know if that does it. :)
Jordan
The lnks[n].href part was right, go ahead and change it back or it won't work once the formLinks() call is in the right place. The lnks variable is an array of all of the links on the page the [n] is the number of the current link in the array as we iterate through it, and the .href is the href= on the link (e.g., <a href="...">).
Jordan
No problem, glad it all got working.
A slight mod. of the formLinks() function should do the trick for the forms as well (put in links.js):
function formForms() {
var frms = document.getElementsByTagName("form");
for (var n=0;n<frms.length;++n)
frms[n].action = formURI(frms[n].action);
}
Then:
<script type="text/javascript">
<!--
void(formLinks());
void(formForms());
//-->
</script>
Ps. I'm not totally familiar with the <form> element, so if that doesn't work, please post an example of your form so I can see what we have to work with.
Jordan
Here is a sample of the Forms tag:
<script language='javascript'>
function CHK_CAT_SELECT(){
var CAT_SLC = document.frm_cat_lst.prod_access_area_frm_slc.value;
if (CAT_SLC!= ""){
document.frm_mdl_lst.prod_access_mdel_frm_slc.value = "";
return true;
}
}
function CHK_MDL_SELECT(){
var MDL_SLC = document.frm_mdl_lst.prod_access_mdel_frm_slc.value;
if (MDL_SLC!= ""){
return true;
}
}
</script>
<form name="frm_cat_lst" action="/scripts/wgate/z_bic_offc133478ee/~flN0YXRlPTM1NDM0Mzgw====?~next_template=bic_prod_access_lst&~event=get_models&prod_cat_area=ZROOT" method="post" onSubmit="return CHK_CAT_SELECT()">
<select name="prod_access_area_frm_slc" onChange="document.frm_cat_lst.submit()">
<option>select a product category</option>
<option value="ZCAT01" >Printers</option>
<option value="ZCAT02" >Fax</option>
<option value="ZCAT03" >Multi-Function</option>
<option value="ZCAT04" >P-touch Labeling</option>
<option value="ZCAT05" >Laminators</option>
<option value="ZCAT06" >Stamp Creator</option>
</select>
</form>
I don't understand where the value selected is getting passed to the Form tag?
I tried the following:
<form name="frm_cat_lst" action="http://njitswgt.brother.com/scripts/wgate/z_bic_offc/!?~template=bic_prod_access_lst&~event=get_models&prod_cat_area=ZROOT" method="post" onSubmit="return CHK_CAT_SELECT()">
It went to the next page successfully, but did not fill the Model Values on the next page.
Thanks,
Ranjan.
I don't understand where the value selected is getting passed to the Form tag?
From what I can see, this:
<select name="prod_access_area_frm_slc" onChange="document.frm_cat_lst.submit()">
...is what is getting the selected value. It is calling this function:
function CHK_CAT_SELECT(){
var CAT_SLC = document.frm_cat_lst.prod_access_area_frm_slc.value;
if (CAT_SLC!= ""){
document.frm_mdl_lst.prod_access_mdel_frm_slc.value = "";
return true;
}
...which wants to get the selected value into the variable CAT_SLC...but it needs to be done slightly differently in order to work. Also, it looks to me like
document.frm_mdl_lst.prod_access_mdel_frm_slc.value = ""; is the value that needs to be set once you have CAT_SLC. Give this a try:
function CHK_CAT_SELECT(){
var CAT_SLC = document.frm_cat_lst.prod_access_area_frm_slc.options[document.frm_cat_lst.prod_access_area_frm_slc.selectedIndex].value;
if (CAT_SLC!= ""){
alert(CAT_SLC); // make sure it works
// document.frm_mdl_lst.prod_access_mdel_frm_slc.... // set me
return true;
}
Jordan
function formLinks() {
for (var n=0;n<document.links.length;++n)
document.links[n].href = formURI(document.links[n].href);
}
function formForms() {
for (var n=0;n<document.forms.length;++n)
document.forms[n].action = formURI(document.forms[n].action);
}
Jordan
When I add an alert in the following code it does nothing:
function CHK_CAT_SELECT(){
var CAT_SLC = document.frm_cat_lst.prod_access_area_frm_slc.value;
if (CAT_SLC!= ""){
document.frm_mdl_lst.prod_access_mdel_frm_slc.value = "";
return true;
}
}
Even if I hardcode the alert as alert("Testing") even this doesn't show up.
Thanks,
Ranjan.
I don't know if I mentioned this before or not. Actually, the reason I am following this up is because previously SAP was saying that they don't support AOL browser. But then we found out that another website developed on SAP ITS runs fine on AOL browser.
I don't know whether it will help or not. The site is <edit>{/1]. If you click on Product Catalog link you will see that the URL is somewhat similar to the one I have been posting here. Can you see what those guys have done to make this work on AOL browser. The problem at our end is: If the URL has the following format: [njitswgt02...] it doesn't work on AOL... after analysis we found out that the following part of the URL is giving the problem: 133438d3/~f1N0YXR1PTEyNjkyMTM4Nzg= and that is why I was trying to replace the URL with our own value. All this is working fine on AOL based on your suggestions but now I am stuck with the Form part. I tried to follow the same approach there. It opens the next page but it doesn't get the Models under the Categories. Can you take a brief look at the [1]<edit>
Thanks for your time,
Ranjan.
[edited by: tedster at 4:42 pm (utc) on Aug. 11, 2003]
I was also thinking of the following approach:
I will have an ASP Page which is nothing but a controller. The user will always call the ASP page and will pass the URL as request parameters. After that the ASP page will redirect the response to the appropriate ITS page.
Basically, create a MVC architecture type of a scenario. Let me know your thoughts on this too. I don't know how I will do it, but before starting I just want to know whether it is worth the shot.
Thanks,
Ranjan.
The following does not work. Any clues....
<html>
<head>
<title>Sample code</title>
</head>
<body>
<script language='javascript'>
function CHK_CAT_SELECT(){
var CAT_SLC = document.frm_cat_lst.prod_access_area_frm_slc.value;
alert(CAT_SLC);
if (CAT_SLC!= ""){
document.frm_mdl_lst.prod_access_mdel_frm_slc.value = "";
return true;
}
}
function CHK_MDL_SELECT(){
var MDL_SLC = document.frm_mdl_lst.prod_access_mdel_frm_slc.value;
if (MDL_SLC!= ""){
return true;
}
}
</script>
<form name="frm_cat_lst"
action="http://njitswgt02/scripts/wgate/z_bic_offc/!?~template=bic_prod_access_lst&~event=get_models&prod_cat_area=ZROOT"
method="post" onSubmit="return CHK_CAT_SELECT()">
<select name="prod_access_area_frm_slc" onChange="document.frm_cat_lst.submit()">
<option>select a product category</option>
<option value="ZCAT01" >Printers</option>
<option value="ZCAT02" >Fax</option>
<option value="ZCAT03" >Multi-Function</option>
<option value="ZCAT04" >P-touch Labeling</option>
<option value="ZCAT05" >Laminators</option>
<option value="ZCAT06" >Stamp Creator</option>
</select>
</form>
</body>
</html>
Thanks,
Ranjan.