Filling pop-up windows with content

dhtmlxPopup can have various content, such as:

• DHTMLX components;
• DOM elements;
• HTML markup;

The table below presents DHTMLX components you can attach to a dhtmlxPopup object and code samples of such attaching.

var myPop = new dhtmlXPopup(...);
var myAcc = myPop.attachAccordion(350, 300);

var myPop = new dhtmlXPopup(...);
var myCalendar = myPop.attachCalendar();

var myPop = new dhtmlXPopup(...);
var myForm = myPop.attachForm([
	{type: "input",    label: "Email Address", name: "email"},
	{type: "password", label: "Password",      name: "pwd"}
]);

var myPop = new dhtmlXPopup(...);
var myGrid = myPop.attachGrid(350,300);

var myPop = new dhtmlXPopup(...);
var myLayout = myPop.attachLayout(350, 300, "3L");

var myPop = new dhtmlXPopup(...);
var myTabbar = myPop.attachTabbar(350, 300);

var myPop = new dhtmlXPopup(...);
var myTree = myPop.attachTree(350,300);

To attach a Dom element to a dhtmlxPopup instance you should use the attachObject method:

<div id="myObj">any custom text here</div>
 
<script>
     var myPop = new dhtmlXPopup(...);
     myPop.attachObject("myObj");
</script>

To add the HTML markup to a dhtmlxPopup instance you should use the attachHTML method:

var myPop = new dhtmlXPopup(...);
myPop.attachHTML("any custom text here");

dhtmlxPopup provides a handy way to present list-like structures inside it.

To present data in the tabular view you should use the attachList method as in:

var  myPop = new dhtmlXPopup(...);
myPop.attachList("name,price", [
		{id: 1, name: "Audi A5 Coupe", price: "€ 31,550"},
		{id: 2, name: "Audi A5 Sportback", price: "€ 30,990"},
		myPop.separator, // use this struct for separator
		{id: 3, name: "Audi A6", price: "€ 30,990"},
		{id: 4, name: "Audi A6 Avant", price: "€ 37,450"},
		{id: 5, name: "Audi A6 Quattro", price: "€ 55,360"}
]);

where

• “name, price” - a comma-separated list of data properties that will be rendered in the list;
• [{id:.., name:…, price:…}] - the data available for rendering in the list;
• myPop.separator - a special property of dhtmlxPopup that draws a single line.

To get the list's items you should use the getItemData() method.

To get a specific item you should call the method with the row id inside:

myPop.attachList("name,price", [
	{id: 1, name: "Audi A5 Coupe", price: "31550"},
	{id: 2, name: "Audi A5 Sportback", price: "30990"}
]);
 
var data = myPop.getItemData(1);
// data = {id: 1, name: "Audi A5 Coupe", price: "31550"}

To get all the items of the list you should call the method with no parameters:

myPop.attachList("name,price", [
	{id: 1, name: "Audi A5 Coupe", price: "31550"},
	{id: 2, name: "Audi A5 Sportback", price: "30990"}
]);
 
var data = myPop.getItemData();
// data = [
//     {id: 1, name: "Audi A5 Coupe", price: "31550"},
//     {id: 2, name: "Audi A5 Sportback", price: "30990"}
// ]