Add jQuery tokenInput to an element in the parent window from a child window (IFrame)

Add jQuery tokenInput to an element in the parent window from a child window (IFrame)

I need to pass some selected contacts from a child window (IFrame) to the parent window. But in the parent window, the selected contacts need to be shown using jQuery token input. From the parent page, it can be done by following:

From parent:

  1. $("#parentTokenInputId").tokenInput("add",{id: contactsArray[index], name: contactsArray[index]});


Now, I need to do the same from the child window. I tried the following but it doesn't work.

From child:

  1. $("#parentTokenInputId",  top.document).tokenInput("add",{id: contactsArray[index], name: contactsArray[index]});


I can set the value of an input field of text type in parent window from the child window using the following code:

From child:

  1. $("#textInputId",  top.document).val("some text");


As it's a simple text input field, it successfully sets the text in the parent input field. But this method is not working for setting the input tokens.

I also posted this question at stackoverflow