Updating Clistview Containing Ctreeview Problems

SHORT STORY:

If I use $.fn.yiiListView.update() to update a CListView which contains a CTreeView, then the CTreeView looses its formatting.

If I don’t update the CListView and only injects an updated CTreeView, then I loose my dialog scripts (and maybe more), getting “$(…).dialog is not a function” error when I try to open a dialog.

MEDIUM STORY:

In the main page, i have a CGridView with all the parent records - each with a Tree button. If you click on a Tree button, a dialog opens displaying that parent record’s children in a CTreeView (which was loaded via a CListView).

The CTreeView rows also have buttons - with which you can add more child records.

After successful child record creation I want to update the CTreeView (via the CListView). Check the test results.

LONG STORY:

I have a main_layout file used for my main pages.

This file has the normal div with $content.

It also has a div containing dialog1 - which contains iframe1.

Views are displayed in iframe1 with a separate layout file called iframe1_layout.

This iframe1_layout also contains the normal div with $content, but it also has a div containing dialog2 - which contains iframe2.

Views are displayed in iframe2 with a separate layout file called iframe2_layout. It only has the normal $content.




main_layout.php

- $content

- dialog1 -> iframe1 -> iframe1_layout.php

			- $content (tree1.php)

			- dialog2 -> iframe2 -> iframe2_layout.php

						-$content (form)



In the main page, i have a CGridView with all the parent records - each with a Tree button.

If you click on a Tree button, dialog1 opens and iframe1 displays a view called tree1.php

tree1.php has a div with id = "tree1Div".

Inside tree1Div is renderPartial(tree1_a.php).

tree1_a.php uses a CListView which filters the parent records that must be printed via the model (in this case it is only 1 parent record). The CListView uses tree1_b.php which uses a CTreeView (id=“parent-tree-list”) to display all the parent-record’s children.

To create a new child for the parent, you click a button in a CTreeView row. This opens dialog2 and iframe2 loads a form in which you enter the new child data.

After successful child record creation I want to close dialog2 and update CTreeView in dialog1.

TEST RESULTS:

  1. If I use window.parent.$.fn.yiiListView.update(‘parent-tree-list’) in the controller or in the view:
  • the CTreeView is updated,

  • but it looses its formatting.

  • the buttons in the treeview rows still work and re-opens dialog2.

  1. If I render tree1.php from the controller;

and use window.parent.$(’#iframe2’).attr(“src”, response) in the view:

-the CTreeView is not updated (browser is busy as if something else is updated).

  1. If I render tree1.php from the controller;

and don’t update any div or element with js in the view:

-the CTreeView is updated perfectly and all buttons work, but the CTreeView is displayed in dialog2. The CTreeView in dialog1 is not updated.

  1. If I renderPartial tree1_a.php from the controller with the $processOutput parameter set to FALSE;

and I use window.parent.$(’#tree1Div’).html(response) in the view:

I get the same result as window.parent.$.fn.yiiListView.update(‘parent-tree-list’):

  • the CTreeView is updated,

  • but it looses its formatting.

  • the buttons in the treeview rows still work and re-opens dialog2.

  1. If I renderPartial tree1_a.php from the controller with the $processOutput parameter set to TRUE;

and I use window.parent.$(’#tree1Div’).html(response) in the view:

  • the CTreeView is updated,

  • its formatting is still good,

  • but, if I click on the button in the treeview row to open dialog2, I get error: $(…).dialog is not a function. So the dialog scripts are missing.

  1. Same situation as nr.5 above, but with a fake dialog included in tree1_a.php:
  • the CTreeView is updated,

  • its formatting is still good,

  • new error when clicking on the button in the treeview row to open dialog2: “cannot call methods on dialog prior to initialization; attempted to call method ‘option’.”.

Ps. Putting dialog2 inside tree1.php or removing the iframes, makes no difference to the test results.

Any other ideas?

I solved this with communication between the iframes.

Check my "Tip: communication from nested child iframe to parent iframe" comment on this wiki.