CODEWITHSUNDEEP
javascriptjqueryajaxcheckboxwicket
Василий Пупкин
Василий Пупкин

Reputation: 33

Ajax debug Error

i have problem ,when i bind two components (checkbox and label) by adding tag attribute "for" to label , and tag attribute "id" to checkbox, it throws ajax debug error : " Cannot bind a listener for event "click" on element "variantBox4" because the element is not in the DOM".

Here is checkbox code:

      AjaxCheckBox checkBox = new AjaxCheckBox("variantBox", variantModel) {

                    @Override
                    protected void onUpdate(AjaxRequestTarget target) {
                        if (variantModel.getObject()) {
                            target.appendJavaScript(";utils_showElement(" + item.getModelObject().getId() + ");");
                        } else {
                            target.appendJavaScript(";utils_hideElement(" + item.getModelObject().getId() + ");");
                        }
                    }



                };

i add attribute modifier to checkbox in this code:

checkBox.add(new VariantElementAttributeModifier("id",Model.of("checkbox_"+Long.toString(item.getModelObject().getId()))));

here i do the same operation with label:

      Label headerLabel = new Label("content", Model.of(item.getModelObject().getContent()));

      headerLabel.add(new VariantElementAttributeModifier("for",Model.of("checkbox_"+Long.toString(item.getModelObject().getId()))));

here is html:

    <!DOCTYPE html>
     <html lang="en" xmlns:wicket="http://maven.apache.org/FML/1.0.1">
      <head>
      <meta charset="UTF-8">
       <title>Title</title>
      </head>
      <body>

      <wicket:panel>




      <section class="column column_form">
        <div class="column__title">Опросный лист</div>
        <div wicket:id="container" class="column__content" style="height: 
       475px;">
            <div wicket:id="list" class="form">
                <div wicket:id="contentArea"></div>
                <div wicket:id="helpLabel"></div>

                <wicket:fragment wicket:id="variantFragment" 
         class="form__item checkbox">
                    <div class="checkbox__label" wicket:id="content">
        </div>
                    <input class="checkbox__input"   type="checkbox" 
        wicket:id="variantBox" />

                    <!--<input class="checkbox__input" type="checkbox" 
           name="input-name" id="checkbox_1"/>-->
                    <!--<label class="checkbox__label" for="checkbox_1"><b>текст</b><span>текст текст</span><span>текст текст</span></label>-->
                </wicket:fragment>
                <wicket:fragment wicket:id="Textfragment" 
        class="form__item form__textfield">
                    <label wicket:id="textlabel">лейбл</label>
                    <input type="text" wicket:id="textfield" />
                </wicket:fragment>
            </div>
        </div>
    </section>


</wicket:panel>
</body>
</html>

Here is attribute modifier code:

      package ru.simplexsoftware.constructorOfDocuments.Utils;
      import org.apache.wicket.AttributeModifier;
      import org.apache.wicket.model.IModel;


       public class VariantElementAttributeModifier extends AttributeModifier {
       public VariantElementAttributeModifier(String attribute, IModel<?> replaceModel) {

        super(attribute, replaceModel);
       }


       }

Thanks for help.

Upvotes: 1

Views: 318

Answers (1)

Tekki
Tekki

Reputation: 508

If you want to manually change the ID of an element, you have to use Component#setMarkupId(String).

Using the AttributeModifier basicly just adds whatever attribute and value you want to the generated HTML. It doesn't tell Wicket about the new ID you want to use though, so Wicket internally still uses its own ID to generate the JavaScript for the AjaxCheckBox.

Btw: If you have an HTML label tag and a corresponding HTML form component, you can also use the wicket:for attribute as in this example:

<label wicket:for="nameInput">Name</label>
<input wicket:id="nameInput">

This tells Wicket which label and form component belong together, so it can generate the correct attributes and values on its own without any extra code in you Java class.

Upvotes: 1

Related Questions