I have a TextArea in a modal Window. When the modal window is displayed, I want the focus to be set to this TextArea. I also want the TextArea to have default text when it is displayed & the cursor to be at the beginning of this text.
I call focus() on TextArea when modal window is displayed & in the focus() handler, I set the text that I want & call setSelection(0, 0) to move the cursor to position 0.
This doesn't seem to be working as the cursor remains at the end of the set text.
I am using the latest version of the SDK.
It would be great if someone could help me fix this issue. Thanks!
Titanium SDK: 3.0.2 Target platform: IOS only
Here's the code:
// 'statusUpdateArea' is my TextArea
$.tabbedBarNav.addEventListener('click',function(e)
{
statusUpdateArea.focus();
}
statusUpdateArea.addEventListener('focus',function()
{
statusUpdateArea.setValue(" - I am here'");
//API to set cursor at beginning doesn't work!!!!!! [or I don'tknow how to use it :( ]
statusUpdateArea.setSelection(0, 0);
});
Don't focus. setSelection will focus the text area for you. Focusing is preventing the selection from being properly set. Uncomment the .focus call to see it not work.
Try the following. It works for me on iOS with Titanium SDK 3.x.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var textArea = Ti.UI.createTextArea({
value: 'Some text.'
});
win.add(textArea);
win.addEventListener('open', function(evt) {
// textArea.focus();
textArea.setSelection(0, 0);
});
win.open();
Use hintText for default..You cant set the text like that.. actual setSelection is not for cusor movement . it is used to select a part of value in text field...so u cant use that method...use hint text and let the user to type ..later on u can add the default text to value of text feild it might be useful..
I got the answer to this on the Appcelerator dev forum. There seems to be a bug with the implementation on IOS:
Appcelerator Dev forum
Related
I used map markers with parameter, First the marker and popup works fine.
And when I change the parameter, markers refreshed ok but, popup with data shows nothing.
I tried to solve, but nothing works. Kindly asking help
Marker Click function test JS:
function f(){
alert(this.dashboard.getParameterValue("status") +" you have clicked on");
//Dashboards.fireChange('status', e.vars.category.value);
}
Then you have to change the param values, check the alert box.
In the marker click function you have to write the alert function first.
I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.
I am writing FuncUnit for my application. I am browsing the application in Google Chrome. I have a textbox which is initially hidden. I need to make it visible and then clear the text already present in that textbox. I have the following code which makes the box visible but fails to clear the text in it.
S('#search').visible().clearText();
Can anyone tell what is wrong here?
Try to clear the textbox by typing - Ctrl+A and Delete.
var input = S('input.my-input');
input.type('[ctrl]a[ctrl-up][delete]', function() {
// Continue in test case after the text has been removed
});
Your statement is not accurate. visible() does not turn things visible. It is a wait function which waits for the source element to become visible before proceeding to the next action.
koalix's key sequence works. With the type() command you might need to first click into the text input before clearing it.
Try:
S('#search').visible().click().type('[ctrl]a[ctrl-up][delete]');
You could also try empty quotes <" ">
var input = S('input.my-input');
input.type('', function() {
// remove existing text
});
I don't know if you're still waiting for an answer.
I think you're not using visible() in the correct way.
In FuncUnit (see docs here), among other things, you can distinguish between "actions" and "waits". visible() is a wait, and should be used to wait for an element to become visible, like this:
S('#el').visible( function() {
// do something when element with id="el" becomes visible
});
I've created a dijit.TooltipDialog and everything works as it should. However, if another dialog is produced from within the tooltip dialog it shows up behind the tooltip dialog instead of on top of it. I checked the zIndex on the 2 dialogs and the tooltip dialog is 1000 and the other dialog is 950.
I've tried setting the zIndex on the respective container node and the tooltip dialog's "domNode" both with no luck. So does anyone know how to set the zIndex on the tooltip dialog?
as you will find if you inspect the dom after creating a programmatic tooltip - the tooltip is placed in an overlay container beneath <body>.
As mentioned, seek alternative methods for this.. But the answer is as follows; For you to successfully set a z-index you must find the correct node - which is not the domNode since the dialog has a 'layer' of its own via the dijit.popup design.
Here's the fiddle for it: http://jsfiddle.net/rQHSP/
In short, this is what you could do.
myDialog.onShow = function() {
node = this.domNode
// loop upwards untill we hit a wall or nodes class mathes popup
while (node
&& (!node.className || !node.className.match("dijitTooltipDialogPopup")))
node = node.parentNode
console.log(dojo.style(node, "zIndex")
}
Following mschr's answer I couldn't find the underlayAttrs property of dijit.TooltipDialog. But that did lead me to finding _popupWrapper which is the wrapper node of the entire popup. This node had a zIndex of 1000. The below code corrected the issue:
var dij = dijit.byId(dojo.query("[id*='_TooltipDialog_']")[0].id);
dij.onShow = function() {
dojo.style(dij._popupWrapper,"zIndex",900);
}
When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:
dojo.query(".star").parent().connect("onmouseover", function() {
dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
dojo.destroy(dojo.query("img", this)[0]);
});
The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?
Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)
$(".star").parent().hover(function() {
$("span", this).append("<img src='star-hover.jpg'>");
}, function() {
$("img", this).remove();
});
This will show the image when hovering, and remove only when moving the cursor outside the table cell.
The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:
dojo.NodeList.prototype.hover = function(over, out){
return this.onmouseenter(over).onmouseleave(out || over);
}
Then you'd just:
dojo.query("...").hover(function(e){ .. }, function(e){ .. });
The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.