Wicket Updating Image using JavaScript

Question

I'm trying to update an image using JavaScript when the user focuses on a text field. Currently have the following HTML/Wicket code:

<div class="input-prepend">
    <span class="add-on">
        <wicket:link>
            <img src="img/username-img-1.png" id="username-img"/>
        </wicket:link>
    </span>
    <input type="text" id="username" placeholder="User Name" wicket:id="username" />
</div>

And the following JavaScript code:

$(document).ready(function() {  
    $('#username').focus(function() {
        $('#username-img').attr("src","img/username-img-2.png" );
    });
});

Obviously, this does not work, since Wicket has it's own way of referencing resources. I'd like to know my other options. Thanks!

Answer 1

I understand that you have the image in webapp folder. So the problem is that you need to rewrite the URL to be context relative using UrlUtils.rewriteToContextRelative.

Something like this might work:

public void renderHead(IHeaderResponse response) {

    StringBuilder script = new StringBuilder();
    script.append("$('#username').focus(function() {");
    script.append("$('#username-img').attr(\"src\",\"");
    script.append(UrlUtils.rewriteToContextRelative("img/logo.png", RequestCycle.get()));
    script.append("\");");
    script.append("});");

    response.render(OnDomReadyHeaderItem.forScript(script.toString()));
}