how to handle OPTIONS of SELECT using DOJO - dojo

I want write DOJO statement equivalent to following javascript statement:
document.form_name.select_name.options[0]=new Option("Q3","Q4",false,false);
can u help me please!

Dojo is a JavaScript library, so JavaScript is still valid when using Dojo. An alternative would be the use of the dojo/dom-construct module which allows you to create DOM nodes. An example:
require(["dojo/dom-construct", "dojo/domReady!"], function(domConstruct) {
domConstruct.create("option", {
value: "Q4",
innerHTML: "Q3",
defaultSelected: false,
selected: false
}, "test");
});
In this example I create an option based on the settings you provided. The placement of the <option> is based upon the third parameter "test". This means that this option will be placed as the last option of a <select> with an ID called "test".
An example JSFiddle can be found here. There is also a reference guide and the API documentation which might help you.
Pre Dojo 1.7
If you need to make this to work on pre-Dojo 1.7, you need to remove the require() statement since this is a new feature since Dojo 1.7 and is called the AMD loader.
All modules (at least, most of them) have an alternative in pre-Dojo 1.7. dojo/dom-construct would become dojo.create.
dojo/domReady! would become dojo.addOnLoad but this works slightly different than the module (actually dojo/domReady! is a plugin) introduced in Dojo 1.7. I recommend reading the old documentation for more information.

Related

OpenTest support for Dojo toolkit

I'm trying to use OpenTest with web applications created with IBM EGL using the Dojo toolkit. The issue with dojo is that it dynamically generates id's every time so they cannot be used as a locator. In addition many elements do not have an xpath so that can't be used either.
It seems like this is a common issue when I search for "dojo" and "selenium" but I haven't found any solutions yet.
Other testing tools have "explicit" support for specific frameworks (e.g. like dojo) so I assume it's technically feasible.
Here is an excerpt from a website where this same question was asked and OpenTest supports building out macros that do just what this indvidual was able to do with .NET code. Please reference the blockquote below as well as the source
I use Selenium to Test my web application which is built by dojo/dijit
and asp.net MVC, so far it works fine.
I've faced the same issues with yours before. My way is "don't think
about dojo widgets" when writing steps interacting with them. Treat
them as normal complex html elements. You need to browse your dom tree
on the client after dojo parse your widgets, locate the real dom
element which dijit's value node or interactive part corresponding to
and do thing (Click, SendKey or GetId in your case) to it.
It is also good to wrap some common actions to widgets into Helpers
which can be reused in your project.
Below is a simple .NET example I use to test whether a button exist in
a dGrid, I just use css selector to find the cell, hope it helps:
[Then("I can delete it at row '(.*)'")]
public void Then_I_can_delete_it_at_row(int rowIndex)
{
var nthRow = Browser.FindElementsChecked(By.CssSelector(".dgrid-content .dgrid-row-table")).ElementAt(rowIndex - 1);
var deleteBtnsInRow = nthRow.FindElementsChecked(By.XPath(".//span[text() = 'Delete']"));
Assert.AreEqual(1, deleteBtnsInRow.Count);
}

How to check a dijit checkbox with javascript

I am working a very old codebase. It is using an old version of dijit, so I am having a hard time finding out how to do what I need to do.
There is a dijitcheckbox on a modal, it uses aria-pressed instead of checked, I need to check this box when a user selects a value elsewhere, but I can't get the box to check.
depends a bit on how old the dojo version is....
usually you can do something like
var w = dijit.byId(myWidgetId);
// or var w = dijit.byNode(checkboxDomNode);
w.set('checked', true);
for dojo 1.3 you need to use more specific functions:
w.setChecked(true)
the aria-pressed should be an additional attribute for screenreader, there will be a hidden "real" checkbox that is checked.
btw., the dojo api documentation even has entries for v1.3: http://dojotoolkit.org/api/1.3/dijit/form/CheckBox

dojo internalize html templates

When using filter and pagination plugins for EnhancedGrid, the HTML templates for the same are loaded from dojox\grid\enhanced\templates.
Is there any way by which I can avoid the server requests for these HTML files by making them part of the Enhanced Grid's inline javascript?
You should make a custom dojo build that creates one js file as a result. follow this instructions from a previous QA:
How to build Dojo into a single file, given a list of dependencies?
EDIT:
The build should add those html files inline, but doesn't. I googled a bit and found this link related to your problem:
http://grokbase.com/t/dojo/dojo-interest/121e536t64/enhancedgrid-filter-problem
It suggests a fix using this link
http://dojo-toolkit.33424.n3.nabble.com/Custom-build-including-CSS-and-HTML-files-td3536573.html
Citation:
If you are using the AMD style of module definition, then you can specify a text dependency like so:
define(["dojo/text!some/file.html", "other/module"],
function(template, otherModule){
...
// to use the contents of the html file, treat template as if it were a normal string
someNode.innerHTML = template;
...
});
The build system should automatically convert the text dependency to an inline string literal. Most Dojo files are already formatted to use this feature, but I can't account for dojox modules. I'm not sure whether similar functionality is possible with the dojo.require/dojo.provide system of dependency declaration.
I have got the solution. Those struglling from this issue pls. note that there is bug with Dojo 1.7.1 and we need to use Dojo 1.8.3 and use internStrings option with the build command. You should see HTML files being interned in the build-report.

dgrid pagination example

Can anyone point me to an example of using the Pagination extension of dgrid with a dgrid? This could be a reference link or a simple example you type up. I've defined it in my code, used it with an OnDemandGrid where it is added to the declare mixin for my custom grid. I see arrows for page navigation, I see the page size setting menu, but my specification of rowsPerPage: 3 does nothing. I still see my 7 sample records.
I'm using a modified Cache (data object store) that wraps a JsonRest and Memory store for my dgrid.
I think the issue is that you can't use OnDemandGrid with pagination since the OnDemandGrid has it's own internal virtual paging logic. From the dgrid extensions wiki:
In contrast to the OnDemandList and OnDemandGrid modules, the
Pagination extension implements classic discrete paging controls. It
displays a certain number of results at a given time, and provides a
footer area with controls to switch between pages.
Note: the Pagination extension should be mixed into List or Grid, not
one of the OnDemand constructors, since those contain their own
virtual scrolling logic. Internally, Pagination inherits from the same
_StoreMixin module inherited by the OnDemand prototypes for common integration with dojo/store.
What you want to do instead is mixin Pagination into a plain Grid. The Pagination Mixin includes the properties you're interested in such as number of rows. The Paginator extension handles talking to the provided store for retrieving and rendering the set of rows to display. A define for a class like that might look like:
define(['dojo/_base/declare','dgrid/Grid', 'dgrid/extensions/Pagination'],function(declare,Grid,Pagination){
return declare('mine.PaginatedGrid',[Grid,Pagination],{
//various default you can set
pagingLinks: false,
pagingTextBox: true,
firstLastArrows: true,
minRowsPerPage: 5,
rowsPerPage: 5,
pageSizeOptions: [5, 10, 15, 25, 50, 100]
});
});
The best examples of DGrid and its extensions can be found in the test folder of the DGrid project. They can be found here:
DGrid Tests
Specifically the Paginations Tests can be found:
Here,
here,
and here
To run them:
Clone the git repo
Drop it on your webserver
Navigate to the html page

Google's hosted dojox.gfx

I'm using the following html to load dojo from Google's hosting.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("dojo", "1.1.1");</script>
<script type="text/javascript">
dojo.require("dojox.gfx");
...
This errors out on the requre line with an error like dojox.gfx is undefined. Is there a way to make this work, or does Google not support the dojox extensions?
Alternatively, is there another common host I can use for standard dojo releases?
Differently from when you reference the .js files directly from the <script> tag (note that google js api also supports this, see here), google.load is not synchronous. This means that when your code reach google.load, it will not wait for dojo to be fully loaded to keep parsing; it will go straight to your dojo.require line, and it will fail there because the dojo object will be undefined.
The solution (if you don't want to use use the direct <script> tag), is to enclose all your code that references dojo in a start function, and set it will as a callback, by doing:
google.load("dojo", "1.1.1", {callback: start});
function start() {
dojo.require("dojox.gfx");
...
}
or
google.setOnLoadCallback(start);
google.load("dojo", "1.1.1");
function start() {
dojo.require("dojox.gfx");
...
}
A better question is - why would you want to? If you are developing on your localhost then just use a relative path, if you're developing on an internet facing server - stick the dojo files on that.
Also - make sure you're not falling foul of the same origin policy
I believe that google becomes the namespace for your imported libraries. Try: google.dojo.require.
Oh! And as pointed out below, don't forget to use google.setOnLoadCallback instead of calling your function directly.
dojox is practically unmaintained, and will be taken out from dojo-2. There are major problems with most widgets in dojox, there is only a few good.
IMHO dojo should be self-hosted, because there are always things what you need to overwrite - for example, you need some fix in this dojox.gfx.