X Lines 1 Goal

Selecting Items in a list using DIVs instead of Radio Buttons

Problem: Radio buttons cannot be styled using CSS. Another problem is that they simply f*** up your design if used incorrectly. They are also not very useful if you would like a user to be able to click on a large item in order to select it.

Solution: A solution to this problem would be to allow the user to click on whole DIVs in order to select an item. This is done using some javascript, CSS and a hidden textbox. This is how it's done using ASP VB and Javascript. Obviously this can be done using other Server Side languages as the main work will be done by Javascript. So...

This is the javascript needed.

<script type="text/javascript">
    var selected = 0; //holds the selected div id... set to be the first selected item (in this case - 0)
    
    function selectDIV(newid)
    {
        document.getElementById('div' + selected).className = 'item'; //change previously selected item CSS
        selected = newid; //set 'selected' as the new id
        document.getElementById('div' + selected).className = 'itemselected'; //change the newly selected item CSS
        document.getElementById('selecteddivid').value = selected; //set value of hidden textbox to selected div id
    }
</script>

The highlighted part in this code is the most important thing. The 'selected' variable holds the ID Number of the selected DIV. It is important to set it by default as the item selected when the page loads.

This is the HTML/ASPVB code needed.

    <% for i = 0 to 5
        if i = 0 then
            myclass = "itemselected"
        else
            myclass = "item"
        end if
       
        divid = "div" & i
    %>
        <div class="<%= myclass %>" id="<%= divid %>" onclick="selectDIV(<%= i %>)">
            To select DIV #<%= i %> click here.
        </div>
    <% next %>
   
    <form action="default.asp" method="post">
        <input type="hidden" id="selecteddivid" name="selecteddivid" value="0" />
        <input type="submit" value="SAVE" />
    </form>

In this case, I used a loop from 0 to 5 to generate 6 divs. The ID of each DIV is 'divx' where x is a number from the loop. The onclick event calls the selectDIV function which we did above. As you can see a hidden textbox 'selecteddivid' is created here which will hold the selected div's id. This can later be read using request.form("selecteddivid") after the form posts.

Conclusion: Javascripts like this are easy to create and will help you create better-looking webpages by allowing the user to interact better with your website.

Code example will be coming soon.

Send Cookie in HTTP Header WebRequest

Problem: You are using a third-party web service to which you are connecting with your own web service. The third-party web service is divided into two phases. Phase 1 is dependent on nothing i.e. you just pass the parameters and the web service returns the details you would like. Phase 2 though is dependent on the first. The problem is that the second phase -- apart from the method parameters -- also requests that you pass on the JSessionID value which was returned to you in Phase 1. This value must be sent in a cookie. How can this be done?

Reason: When getting data from large databases it is impossible to save all possible combinations. For example, if you are getting all flights between London and Madrid, the data is being fetched from a database. That is Phase 1. But, the IDs sent to you which can be used to get further details on the particular ID of the response cannot all be saved in a database somewhere as it would be extremely redundant to hold all possible combinations. So instead, a session is created on the server and while that session is active the IDs for your particular search are saved. Temporarily. So in order to get the details in Phase 2 you must notify the server which search you are referring to from Phase 1.

Solution: Obviously, you must first execute Phase 1. From there get the JSessionID which will be passed on to the next Phase. The following is all the code you need to call the web service. In it you will find the code to create the JSessionID cookie highlighted in yellow.

byte[] buffer = Encoding.ASCII.GetBytes("fareId=123456"); //the data you want to send to the web service
HttpWebRequest WebReq = (HttpWebRequest)WebRequest.Create(url);
WebReq.Method = "POST";
WebReq.ContentType = "application/x-www-form-urlencoded";
WebReq.ContentLength = buffer.Length;
WebReq.Headers["Cookie"] = "JSESSIONID=4567845226"

Stream PostData = WebReq.GetRequestStream();
PostData.Write(buffer, 0, buffer.Length);
PostData.Close();
HttpWebResponse WebResp = (HttpWebResponse)WebReq.GetResponse();
Stream Answer = WebResp.GetResponseStream();
StreamReader _Answer = new StreamReader(Answer);

The most important part of the code is highlighted in yellow. In that line of code we are passing a cookie called JSESSIONID with the value 4567845226. When this request arrives at the web service, the first thing it does is it checks the cookie which was passed in the header. It then fetches the Phase 1 search response and continues Phase 2 from there.

Conclusion: The CookieContainer object does not work as intended when passing this JSessionID value. This is the only effective method which I found to this process. Note that the cookie name 'JSESSIONID' was used as an example. Various web services use various names for their SessionId cookie.