drop down tree problem

[okashaParticipant]

hello

i am using this ajax call to generate the tree ul in a popup window

$.ajax({
dataType: ‘html’,
url: base_url+’admin/pages/tree’,
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
//alert(data);
$(“#jqxTree”).html(data);
$(“#dropDownButton”).jqxDropDownButton({width: 150, height: 25, theme: theme});
$(“#jqxTree”).jqxTree({width: 200, theme: theme});

$(‘#jqxTree’).bind(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
var dropDownContent = ‘<div style=”position: relative; margin-left: 3px; margin-top: 5px;”>’ + item.label + ‘</div>’;
$(“#dropDownButton”).jqxDropDownButton(‘setContent’, dropDownContent);
});
//alert($(“#jqxTree”).html());
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});

when i click to show the popup window for the first time everything is ok

the problem is when i close the popup window and open it again the drop down tree displays the ul as if it is in a normal webpage and not formatted as a tree with arrows to expand and collapse it

i hope you will get what i mean

thank you

[Peter StoevKeymaster]

Hi okasha,

It seems that you want to dynamically re-create the jqxTree including its structure. However, you should do it in a different way:

1. When you call the constructor function of a widget, it will be initialized. Calling the same function again can be used for dynamically setting/getting properties or calling methods. Looking at your code, I suggest you to initialize the jqxDropDownButton outside of your Ajax function.
2. As you want to dynamically create jqxTree instances, you should dynamically remove the old instances, too.

The solution in your scenario would be:

– Initialize the jqxDropDownButton outside your Ajax function, otherwise you will set 3 properties on each Ajax call.
– Remove the jqxTree DIV tag. $(‘#jqxTree’).remove();
– Create a DIV tag with the same ID and dynamically append it to the dropDownButton using the jQuery’s appendTo method.
– Initialize the jqxTree’s DIV tag.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts