Forum Moderators: open

Message Too Old, No Replies

URL's not working on AOL

Modify URL onclick based on browser version?

         

ranjankumar17

5:37 pm on Aug 8, 2003 (gmt 0)

10+ Year Member



Hi,

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]

MonkeeSage

5:59 pm on Aug 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi, ranjankumar17,

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

ranjankumar17

7:53 pm on Aug 8, 2003 (gmt 0)

10+ Year Member



Thanks for the reply.

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]

MonkeeSage

8:25 pm on Aug 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ranjan:

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>

ranjankumar17

8:51 pm on Aug 8, 2003 (gmt 0)

10+ Year Member



Thanks again, but I am getting an Error (Object Expected)

<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]

MonkeeSage

8:55 pm on Aug 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ranjan:

Oh, Sorry about that, I forgot to mention to take out the onlick="..." from the link. Just call the formLinks() function and it will take care of the rest, nothing extra is needed in the links now.

Jordan

MonkeeSage

8:58 pm on Aug 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ps. If for some reason you still get the error, make the formURI() function like this:

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

ranjankumar17

9:08 pm on Aug 8, 2003 (gmt 0)

10+ Year Member




Thanks for your reply. It worked. Actually, I had to add something more to the URL to make it work.

Thanks,

Ranjan.

ranjankumar17

9:45 pm on Aug 8, 2003 (gmt 0)

10+ Year Member




I am not able to figure out how to use the formLinks function. It doesn't work the way I am trying to use it.

Thanks,

Ranjan.

MonkeeSage

10:01 pm on Aug 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ranjan:

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]

ranjankumar17

1:46 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



It still doesn't work for me. Here's my code:

<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]

ranjankumar17

1:51 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Here's the links.js file code:

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.

MonkeeSage

2:00 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

MonkeeSage

2:03 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ranjan:

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

ranjankumar17

2:23 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Thanks.

It worked.

Another question I had regarding to the same issue. We have certain forms with an Action parameter. Any ideas how to handle that.

Thanks Again for your help.

Ranjan.

MonkeeSage

2:41 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ranjan:

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

ranjankumar17

3:12 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Hi,

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.

ranjankumar17

3:16 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Sorry for not mentioning.... but the Forms thing also worked as you had mentioned.

Thanks,

Ranjan.

MonkeeSage

4:06 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

MonkeeSage

4:13 pm on Aug 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ps. I wasn't thinking before or something...there are already object collections for the forms and links on the page--there is no need for us to build our own array. Here are updated functions for links.js (replace the others):

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

ranjankumar17

4:25 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Hi,

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.

ranjankumar17

4:34 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Hi,

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> site and see if you have any different ideas on how to handle the whole thing.

Thanks for your time,

Ranjan.

[edited by: tedster at 4:42 pm (utc) on Aug. 11, 2003]

ranjankumar17

4:41 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Hi,

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.

ranjankumar17

7:29 pm on Aug 11, 2003 (gmt 0)

10+ Year Member



Hi,

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.