CODEWITHSUNDEEP
javascriptjquerywicketwicket-1.5
Kevin D.
Kevin D.

Reputation: 1510

Wicket Updating Image using JavaScript

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!

Upvotes: 1

Views: 486

Answers (1)

jordeu
jordeu

Reputation: 6821

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()));
}

Upvotes: 1

Related Questions