Dynamically adding custom lightbox fields & adjusting height

Scheduler Javascript
#1

Hello,

I have a custom form sections in scheduler lightbox and was wondering if there is a way that I can dynamically added input fields and adjust the height of the containing section? My specific use case is that I have a drop down in a custom lightbox section and I want to create a link or button to add additional drop downs so the user can select multiple values. Is there a way to dynamically adjust the height of the lightbox section to fit new elements and add those elements (new input fields) through a helper? Or is this too complicated to do without creating a custom lightbox form?

Thanks,
Chris

#2

There are no helpers for new elements adding, but you can store reference to the container html element, which is received by set_value method element, and use normal html methods to add | remove inputs

As for size - scheduler.setLightboxSize() - will autoadjust lightbox after adding|removing its content.

#3

Thanks Stanislav - I’ve gotten this working. Now I have a new challenge and am hoping you can help… I’m dynamically adding dhtmlxCombo controls into a custom lightbox section. Right now, I’m doing it using a jQuery append(). I want to be able to do two things:

  1. Have a set of text inputs appear after the selection control (I’m guessing within dhx_combo_box control)

  2. Make sure that an array of the dhtmlxCombo values is returned in a way that allows me to tell which of the combo values are related to the text input values

Is there a way to do this? I wasn’t sure if I could just use jQuery to append <input type=“text” …> elements to the inner HTML of the combo div, and even if I did, I wasn’t sure how reliably this would work with the lightbox to return all of the values.

Any help is appreciated. Thanks!

Chris

#4

Hello,

If you have stored reference to the container html element which is received by set_value method of your custom section then you can use normal html methods to add or remove inputs.

As you will be adding dhtmlxCombo elements yourself you can save some kind of id or information about pairings of inputs and dhtmlxCombos.

We have extension which adds dhmlxCombo to the lightbox. You may check how we are adding it to the lightbox and getting it’s value in the “sources\ext\ext_editors.js” file.
Look for the following line:

scheduler.form_blocks['combo']={

Best regards,
Ilya

#5

Thanks Ilya, I’ve made quite a bit of progress with what you and Stanislav has suggested. I’m doing something like this inside of a function called when the user clicks the button to add a new combo box:

newNode = new dhtmlXCombo(servicesContainerId, "service_" + service_id,"250px");
newNode.enableFilteringMode(true);
newNode.loadXML("/services.xml",function(){newNode.setComboValue(value||"");});
newNode.attachEvent("onChange", function(){getServiceTime()});

$("input[name|=service_" + service_id + "]").parent().append("<input type=\"text\" id=\"service_text_" + service_id + "\"></input>");

servicesContainerUpdatedHeight = servicesContainerHeight + servicesContainerUpdatedHeight;
$("#" + servicesContainer.id).height(servicesContainerUpdatedHeight);
scheduler.setLightboxSize();

(obviously service_id and the logic to setup the lightbox section are not shown)

It is adding my input box as I can tell by browsing the HTML in Firebug. My problem now is that because of the block style and width of the div for the dhtmlxCombo, the input box won’t appear to the right of the dhtmlxCombo control. Instead it’s either underneath it.

Is there a way to make the input appear next to the combo control other than manipulating the DOM to set the style of the combo div to inline? (I haven’t tested that approach, I’m just assuming it would work?)

Thanks,
Chris

#6

Hello,

I believe you can add css class to your input:

$("input[name|=service_" + service_id + "]").parent().append("<input class='someClass' type=\"text\" id=\"service_text_" + service_id + "\"></input>");

and then in the css file configure dhtmlxcombo and this input to be displayed on the same line (if there is a container just for them then you can use float: left for both of them for example).

Best regards,
Ilya