CoffeaElectronica

A smooth well-coded brew.

Posts Tagged Prototype

Accessing Ajax Response Headers

Nov 3

Posted by Christopher J. Stehno in Programming | No Comments

One way to handle error responses with Ajax requests is to add an HTTP Response Header to the response, denoting the resulting command status, while still returning content or data related to the error in the response. Generally when using Ajax calls you don’t want a raw exception or server error to bubble up to your JavaScript handlers.

Let’s say we have a simple quote service at “blurb.jsp”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@page import="java.util.Random"%>
<%!
    private static final Random rng = new Random();
    private static final String[] quotes = {
        "I regret that I have but one life to live for my country.",
        "To be or not to be, that is the question...",
        "I drank what?",
        "I am what I am and that's all I am"
    };
%>
<%
    try {
       // WARNING: intentional random error below
        final String quote = quotes[rng.nextInt(quotes.length+1)];
       
        response.setContentType("text/plain");
        response.setHeader("X-Status","OK");
        out.write(quote);
       
    } catch(Exception e){
        response.setHeader("X-Status","ERR");
        out.write("Something bad has happened: " + e.getMessage());
    } finally {
        out.close();
    }
%>

All this does is setup some simple quote strings and randomly provide one of them as a text response. I have added an error condition by allowing the random number generated to exceed the maximum index of the array so that we can get a random error response. In both cases, success or failure, the response header “X-Status” is given a value of “OK” or “ERR” respectively to denote the type of response being sent.

Handling this response with Prototype is pretty simple:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
    <head>
        <script type="text/javascript"
           src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window,'load',function(){
                $('quote').observe('click',handleClick);
            });
           
            function handleClick(evt){
                new Ajax.Request('blurb.jsp', {
                    onSuccess: function(response) {
                        var quoteElt = $('quote');
                        if( 'ERR' == response.getHeader('X-G-Status') ){
                            quoteElt.setStyle({color:'red'});
                        } else {
                            quoteElt.setStyle({color:'black'});
                        }
                        quoteElt.update(response.responseText);
                    }
                });
            }
        </script>
    </head>
    <body>
   
        <blockquote id="quote" style="border:1px dashed green;padding:4px;">Click me for a quote...</blockquote>
   
    </body>
</html>

Basically, in your “onSuccess” handler function you just pull the header value out of the response object. You could conceivably do any kind of response handling you wanted for an “error” response. In the little demo, you will get a quote from the server each time you click on the quote box; successful quotes will be black, while errors will be in red text.

For the heck of it, I decided to try the same thing in JQuery (without making a whole separate post about it). I am just including the script sections, since they are the only difference:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(function(){
        $('#quote').bind('click',handleClick);
    });
   
    function handleClick(evt){
        var jqr = jQuery.get(
            'blurb.jsp',
            function(text){
                var quoteElt = $('#quote');
                if( 'ERR' == jqr.getResponseHeader('X-Status') ){
                    quoteElt.css('color','red');
                } else {
                    quoteElt.css('color','black');
                }
                quoteElt.html(text);
            },
            'text'
        );
    }
</script>

Surprisingly enough, this was a bit more difficult (or convoluted) to do with JQuery since JQuery does not seem to provide any wrapper access to the response itself. You have to use the XMLHTTPRequest object, which works fine but as you can see in the Ajax callback it leads to some interesting code; the jqr varible contains the request object and is used inside the callback function. It just feels a lot less clean.

Maybe I am not clear on how to use the JQuery Ajax support yet and I am missing something simple… or the developers of JQuery decided that since the times you actually need the response object itself are pretty limited, they could get away without providing direct access. Ultimately though, the support is there and that’s what’s really important.

Popularity: 2% [?]

  • Share/Bookmark

Tags: , , , ,

Highlight Text with JavaScript

Sep 15

Posted by Christopher J. Stehno in Programming | No Comments

A question arose recently about how to highlight a word or words in the text of a div element. It turns out that it’s actually pretty easy using Prototype.

The example below is the code needed to highlight each occurrance (up to ten of them) of the word ‘pick’ in the div. The operation will be performed when the content div is clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
    <head>
        <style type="text/css">
            #content span { background-color: yellow; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window,'load',function(){
                $('content').observe('click',highlight);
            });
           
            function highlight(){
                $('content').innerHTML = $('content').innerHTML.sub('pick','<span>pick</span>',10);                
            }
        </script>
    </head>
    <body>
   
        <div id="content">
            Peter Piper picked a peck of pickeled peppers.
            How many peppers did Peter Piper pick?
        </div>
   
    </body>
</html>

Note: I used to Google-hosted version of the prototype library which is handy.

This could easily be refactored to do any sort of style operation to the selected text, or replace it altogether. I will have to give this a try with JQuery as a comparison.

Popularity: 9% [?]

  • Share/Bookmark

Tags: , ,

Floating and Following Div

Oct 28

Posted by Christopher J. Stehno in Programming | No Comments

I needed one of those DIVs that appears on call and then stays in view even when you scroll, until you close it. For lack of a better name, I call it the floating following div, and it’s pretty easy to make. With a little help from Prototype we can even make it work across the major browsers.

First you need to put the div to be floated somewhere on your page. The page itself can be anything you want.

1
<div id="movable">This is my floating area</div>

and then you need to give it some initial style:

1
2
3
4
5
6
7
#movable {
    position: absolute;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: red;
}

Once all that is on the page, you will need some JavaScript to do the fancy stuff:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">          
    Event.observe(window,'load',function(evt){
        $('movable').hide();
           
        Event.observe('showme','click',showDiv);
             
        Event.observe(window,'scroll', function(evt){
            $('movable').setStyle({ top: 8 + document.viewport.getScrollOffsets().top + 'px' });
        });
    });
           
    function showDiv(evt){
        $('movable').show();
    }
</script>

This causes the “movable” element to be hidden. Once the button with an id of “showme” is clicked, the element will be shown and will then follow along with vertical scrolling, staying up near the top of the view port. The key to this following motion is the function mapped to the window scrolling event:

1
$('movable').setStyle({ top: 8 + document.viewport.getScrollOffsets().top + 'px' });

The document.viewport.getScrollOffsets() function is provided by Prototype.

It’s nothing exciting, but it works… just another thing posted here for future reference.

Popularity: 57% [?]

  • Share/Bookmark

Tags: , , ,

Switch to our mobile site