Category Archives for "Javascript/AJAX"

Cookiechoices cookie only set for specific page not whole website

When i first downloaded the the cookiechoices.js file from the link suggested by google and then installed it onto my site it didn’t really work correctly. It would display the message but when the user clicked on the ok button it only seemed to set the cookie for that specific page, so when a second page was visited the cookie message would be displayed a second time.

Cause of the Error

The reason for this was that the cookiechoices code was not setting the path correctly. You can see the Path that the cookie sets by going to “More tools->Developer tools” within Chrome and then selecting the Application tab and expanding Cookies within the Storage tree structure. As you can see in this example the path /abap has been included as part of the cookie properties. This is not what you want, it should just be a ‘/’ like all the others. In this case the cookie will only be set for all pages within the /abap directory rather than the whole website.

CookieChoices Path Error

CookieChoices Path Error

Solution

The solution is actually quite simple but took me a lot of messing around to find. You basically just need to hard code the path property to be the route  of your website. To do that within the cookie choices code recommended by google simply find the following section of code

document.cookie = cookieName + ‘=y; expires=’ + expiryDate.toGMTString();
Now simply add “path=/” after =y;

i.e.  Resultant JavaScript code will now look like this:
document.cookie = cookieName + ‘=y; path=/; expires=’ + expiryDate.toGMTString();

 

Test

Once you have implemented the above fix and uploaded the new file to you website try a page where the cookie choices message is displayed  and click the OK button again. The result should be that the cookie is set for the route of the website.

cookiechoices fix

cookiechoices fix

Remove and Add HTML element using Javascript

When creating your SAP BSP using HTML you may want to add and remove elements dynamically using JavaScript and sometimes simply setting the element to visible or not isn’t the solution you are after. Sometimes I have found that even though an element has been set to hidden its footprint is still left behind and interferes with the alignment of other fields. Yes you could maybe change the structure/style of your HTML code so this does not happen but it is possible to use JavaScript to add and remove elements as and when your require.

 

Original HTML code
<li id=”backButton”>
<a id=”mybackLink” href=”?OnInputProcessing(goback)” class=”myButton”  >Back to previous</a>
</li>


Remove HTML elements
Removing an element is easy simply use the following JavaScript code:

var delbutton = document.getElementById(‘myBackLink’);
delbutton.parentNode.removeChild(delbutton);

 

Add HTML elements
This is a little more tricky as you need to manually re-build the element again. I say tricky, it just needs a few more lines of code which you can copy and paste from below. Please note that there are other, maybe better ways to do this. This is just the method used after much Google searching. It will at least give you a start especially if your background is SAP and you are just getting into the world of JavaScript/HTML etc.

 

Re-adding Link (a href) back to your HTML page using  javascript
var addLink = document.createElement(‘a’);
var linkText = document.createTextNode(“Back to Index”);
addLink.appendChild(linkText);
addLink.title = “title”;
addLink.href = “index.htm”;
addLink.id = “mybackLink”;
addLink.setAttribute(‘class’, ‘myButton’);
document.getElementById(‘backButton’).appendChild(addLink);

 

Also here is the code required to add an input button instead of a link(a href)
var addbut = document.createElement(‘input’);
addbut.type  = “submit”;
addbut.value = “Back to previous”;
addbut.name = “backbut″;
addbut.id = “mybackButton″;
addbut.setAttribute(‘class’, ‘test’);
document.getElementById(‘backbutton′).appendChild(addbut);

 

Hide and display HTML element using Javascript

Within the JavaScript of your SAP BSP application or standard web page it is very simple to toggle a HTML element between hidden and display mode using the visibility attribute. You would just reference the elements ID and set the visibility attribute to ‘hidden’ or ‘visible’, see example below.


HTML Code:

<a id=”myBackButton” href=”?OnInputProcessing(goback)” class=”myButton”  >Back to Index</a>


JavaScript Code:

document.getElementById(‘myBackButton’).style.visibility = ‘hidden’;
or
document.getElementById(‘myBackButton’).style.visibility = ‘visible’;

Javascript to split a field value at a certain character

When implementing JavaScript within your SAP BSP you may want to capture an on screen field value, ID or name  and then split this value at a certain character. I.e. if you have the value 00001-345-bob stored in an HTML field with the ID “datafield” you can use the following code to capture this value and split it at the ‘-’ character.

var fieldvalue = document.getElementById(‘datafield).value;

var fields = fieldvalue.split(/-/);

var value1 = fields[0];

var value2 = fields[1];

var value3 = fields[2];