ansaurus

Question

Answer 1

A:

In your Component, you don't need to change your own wicket:id. The "jqGrid1" id is internal to use. when using your Component, you add it to the page hierarchy using some 'external' id.

example:

add(new JqTable("table1");

and in html:

<div wicket:id="table1">this gets replaced with the JqTable component</div>

the generated combined output would be something like:

<div wicket:id="table1"> 
   <table id="jqGrid1" style="width:100%;height:200px">
</table>

So, you can add another JqTable by giving it another id (table2 ...)

hope that helped.

bert 2010-08-20 05:57:06

Not a valid solution: There would still be multiple jqGrid1 ids in the document

seanizer 2010-08-20 07:30:32

yes. but not on the same level. so yes, it is a valid solution. i have this working many times ..

bert 2010-08-20 08:09:40

I mean valid as in 'valid XHTML'. And no, it's not valid to have multiple dom elements with the same id on one page. If it works, that's a browser bug. Not everything that works somewhere is valid. (If you use them on separate pages that's something completely different)

seanizer 2010-08-20 11:34:50

Ah, ok. I was talking about the wicket:id, not the id. the last one must of course be unique. So far, i let wicket handle the creation of the id (by using setOutoutMarkupId()) Gruss nach Berlin aus Dresden

bert 2010-08-20 21:52:40

Gruss zurück. Wicket in Dresden? Spannend...

seanizer 2010-08-23 06:36:08

Answer 2

+2 A:

You're almost there, but let wicket manage the ids for you:

private Component gridComponent;

public JqTable(final String id){
    super(id);
    gridComponent = new WebMarkupContainer("grid").setOutputMarkupId(true);
    add(gridComponent);
}

@Override
public void renderHead(final IHeaderResponse response){
    final String options = "{json}"; // code stripped so I don't need to
                                     // include json in my classpath

    final String contextPath = "context"; // dito with servlet api

    response.renderJavascriptReference(contextPath
        + "/js/jquery.jqGrid.min.js");
    response.renderJavascript("$(document).ready(function() { options = "
        + options + ";$('#" + gridComponent.getMarkupId()
        + "').jqGrid(options); });", gridComponent.getMarkupId());

    // btw wicket has it's own domready mechanism, so you could also write it like this:
    response.renderOnDomReadyJavascript("options = "
        + options + ";$('#" + gridComponent.getMarkupId()
        + "').jqGrid(options);");
}

and the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
    <title></title>
</head>
<body>
<wicket:panel>
    <table wicket:id="grid" style="width:100%;height:200px">
    </table>
</wicket:panel>
</body>
</html>

seanizer 2010-08-20 07:46:38

ansaurus

tags:

views:

answers:

Wicket: writing own components

related questions