Невозможно выполнить Javascript из метода Wicket renderHead во второй раз

1

Я работаю над преобразованием компонентов даты (fromDate и toDate) в компонент Bootstrap Date. Для этого я создал текстовое поле в калитки, а затем выполнил скрипт в этом текстовом поле, чтобы создать требуемый вывод. Тем не менее, я получаю только первое текстовое поле, преобразованное в компонент даты, а второе - не так, как скрипт не был выполнен на нем. См. Изображение и код ниже.

Изображение 174551

HTML:

<span wicket:id="rangeDateValue" style="width:400px">
    <span class="input">
        <div class="input-group date">
            <input wicket:id="fromDateValue" class="std" />
        </div>
    </span>
    <span class="input">
        <div class="input-group date">
            <input wicket:id="toDateValue" class="std" />
        </div>
    </span>
</span>

Джава

public DateRangePicker(final MarkupContainer parent, String id, IModel<RangeDateModel> model)
    {
        super(id, model);
        this.startDateTime = addValueDatePickerNew(this, "fromDateValue", new PropertyModel<String>(model, "fromDate"));
        this.endDateTime = addValueDatePickerNew(this, "toDateValue", new PropertyModel<String>(model, "toDate"));
        this.add(new DateTimeRangeValidator());
        parent.add(this);
    }

private TextField<String> addValueDatePickerNew(final MarkupContainer parent, final String id, final IModel<String> model)
{
    final TextField<String> result = new TextField<String>(id, model) {
        private static final long serialVersionUID = 1L;

        public void renderHead(IHeaderResponse response) 
        {
            String jsDateField = "jQuery(function () {"
                    + "var idDate = jQuery(\"input[name*='dateValue' i]\").attr('id');\n"
                    + "console.log(\"idDate: \"+idDate);\n"
                    + "var calIcon = \"<span class='input-group-addon dateTimePick'><span class='glyphicon glyphicon-calendar'></span></span>\";"
                    + "var idDateValField = jQuery('#' +idDate);\n"
                    + "idDateValField.datetimepicker({\n"
                    + "useCurrent: false,\n"
                    + "collapse: true\n"
                    + "});\n"
                    + "idDateValField.after(calIcon);\n"
                    + "idDateValField.next('span.input-group-addon').click(function(e) {\n"
                    + "idDateValField.focus();\n" 
                    + "});\n"
                    + "});";
            response.renderOnDomReadyJavaScript(jsDateField);
        }
    };
    result.setOutputMarkupId(true);
    parent.add(result);
    return result;
}

Я получаю консольную инструкцию только для "fromDate", а не "toDate". Поскольку оба находятся в одной и той же DOM, и выполнение скрипта происходит после DOM Ready, я предполагаю, что оно применяется только для "fromDate" и не может получить правильный способ сделать это.

Теги:
wicket

1 ответ

2
Лучший ответ

Попробуйте "ввести" идентификатор разметки в код javascript:

 String jsDateField = "jQuery(function () {"
                    + "var idDate = '" + getMarkupId() +"';\n"
                    + "console.log(\"idDate: \"+idDate);\n"
                    + "var calIcon = \"<span class='input-group-addon dateTimePick'><span class='glyphicon glyphicon-calendar'></span></span>\";"
                    + "var idDateValField = jQuery('#' +idDate);\n"
                    + "idDateValField.datetimepicker({\n"
                    + "useCurrent: false,\n"
                    + "collapse: true\n"
                    + "});\n"
                    + "idDateValField.after(calIcon);\n"
                    + "idDateValField.next('span.input-group-addon').click(function(e) {\n"
                    + "idDateValField.focus();\n" 
                    + "});\n"
                    + "});";
            response.renderOnDomReadyJavaScript(jsDateField);
  • 0
    Потрясающие. Это более чистое решение, чем добавление моего способа создания уникального идентификатора через UUID. Thq @ Андреа Дель Бене

Ещё вопросы

Сообщество Overcoder
Наверх
Меню