When tried to get the value from dijit widgets the command dijit.byId(eleId).value works fine but when the same dojo widget is in iFrame I get undefined value or null value. The work around for text widget works fine by using following command:
document.getElementById("iframeId").contentDocument.getElementById("eleid").value; but couldn't get value for TextArea and combo box. Using innerText for TextArea works fine but still not able to get value for selected option. It returns the text instead of value Ex. Actor I receive Actor instead of act. The widget type I am using is filterSelect.
Following is my sample code for main html, which calls the another html for iframe src.
<?xml version="1.0" encoding="UTF-8"?>
@import "/Users/surangini/dojo/dijit/themes/tundra/tundra.css";
@import "file://localhost/Users/surangini/dojo/dojo/resources/dojo.css";
@import "file://localhost/Users/surangini/dojo/dijit/themes/dijit.css";
...
dojo.require("dijit.form.FilteringSelect");
console.debug('Attempting to submit form w/values:\n');
var x = document.getElementById("subaglDiv_Contributor_1");
var ele = x.contentDocument.getElementById("Contributor1");
console.log("x: " + ele.value );
//console.log("x: " + x.contentDocument.getElementById("Description1").innerText );
}
<form action="" name="components">
<label class="mandatory" name="true">Item Title</label>
<input dojoType="dijit.form.TextBox" type="text" style="float: left; clear: none; display: block;" class="inputboxclass" id="Title1" name="true" maxlength="200"></input>
<label name="">First Publication Date</label>
<input type="text" dojoType="dijit.form.DateTextBox" required="true" style="float: left; clear: none; display: block;" id="First_Publication_Date" name="" maxlength="" constraints="
{datePattern:'dd-MM-yyyy', strict:true}"> </input>
<label name="">Contributor</label>
<button dojoType="dijit.form.Button" style="float:left; margin: 10px;" label="+" id="Contributor" onClick="getTextAreaValue()"></button>
<div class="iframeClass" id="Contributor_iFrameId">
<div class="subaglBox" id="div_Contributor_1" style="opacity:1;">
<iframe id="subaglDiv_Contributor_1" class="subaglComponents" src="/Users/surangini/Desktop/subagl.html" frameborder="0" marginheight="0" marginwidth="0" scroll="no" style="float: left; clear: left; height: 250px;"> </iframe>
</div>
</div>
<label name="true">Item Name</label>
<input dojoType="dijit.form.TextBox" type="text" style="float: left; clear: none; display: block;" class="inputboxclass" id="Title2" name="true" maxlength="200"></input>
<label name="">Synopsis</label>
<textarea dojoType="dijit.form.Textarea" class="textareaclass" id="EOC_Description" name="" rows="15" maxlength="50000"></textarea>
<label name="">Repeat</label>
<SELECT dojoType="dijit.form.FilteringSelect" style="float: left; clear: none; display: block;" id="Repeat" name="">
<option value=""></option>
<option value="true">True</option>
<option value="false">False</option>
</SELECT>
<label name="">Network Delivery Flag</label>
<SELECT dojoType="dijit.form.FilteringSelect" style="float: left; clear: none; display: block;" id="Network_Delivery_Flag" name="">
<option value=""></option>
<option value="true">True</option>
<option value="false">False</option>
</SELECT>
<label name="">Restriction Indicator</label>
<SELECT dojoType="dijit.form.FilteringSelect" style="float: left; clear: none; display: block;" id="TLT_Name" name="">
<option value=""></option>
<option value="R">Red</option>
<option value="Y">Amber</option>
<option value="G">Green</option>
</SELECT>
</form>
</node>
</body>
and the code for iFrame's src is:
<?xml version="1.0" encoding="UTF-8"?>
@import "/Users/surangini/dojo/dijit/themes/tundra/tundra.css";
@import "file://localhost/Users/surangini/dojo/dojo/resources/dojo.css";
@import "file://localhost/Users/surangini/dojo/dijit/themes/dijit.css";
....
dojo.require("doh.runner");
dojo.require("dojo.fx");
dojo.require("dojox.fx.easing");
dojo.require("dijit.form.FilteringSelect");
<form action="" name="components">
<label name="">Role Type</label>
<SELECT dojoType="dijit.form.FilteringSelect" style="float: left; clear: none; display: block;" id="Contributor1" name="">
<option value="act">Actor</option>
<option value="anc">Announcer</option>
<option value="arch">Archivist</option>
<option value="art">Artist/Performer</option>
<option value="prod">Associate Producer</option>
</SELECT>
<label name="">First Name</label>
<input dojoType="dijit.form.TextBox" type="text" style="float: left; clear: none; display: block;" class="inputboxclass" id="First_Name" name="" maxlength="200"></input>
<label name="">Last Name</label>
<input dojoType="dijit.form.TextBox" type="text" style="float: left; clear: none; display: block;" class="inputboxclass" id="Last_Name" name="" maxlength="200"></input>
<label name="">Title</label>
<input dojoType="dijit.form.TextBox" type="text" style="float: left; clear: none; display: block;" class="inputboxclass" id="Salutation_Short_Form" name="" maxlength="200"></input>
<label name="">Suffix</label>
<input dojoType="dijit.form.TextBox" type="text" style="float: left; clear: none; display: block;" class="inputboxclass" id="Suffix_Name" name="" maxlength="200"></input>
<label name="">Also Known As</label>
<input dojoType="dijit.form.TextBox" type="text" style="float: left; clear: none; display: block;" class="inputboxclass" id="Also_Known_As" name="" maxlength="200"></input>
<label name="">Description</label>
<textarea dojoType="dijit.form.Textarea" class="textareaclass" id="Description1" name="" rows="2" maxlength="200"></textarea>
</form>
</node1>
</body>
The main window and the
The main window and the iframe have different scopes. Actually, two separate dojo and dijit objects exist, as both frames are loading the dojo and dijit javascript files separatly. The widgets in the iframe are registered to the dijit object of the iframe.
If you want to get a widget of the iframe within a function of the main window, you have to call dijit.byId of the iframe's dijit object, e.g.: dojo.byId("iframeId").contentWindow.dijit.byId("foo") or, if the iframe has a name attribute: frames["iframeName"].dijit.byId("foo").
[Problem Solved] dojo widget value from iFrame
Many Thanks Helmchen, this has resolved my problem.