how to focus on javascript dynamic windows in webdriver - webdriver

How can the cursor be focus on a specific input box on page load?
The button is "Add new appointment" the script is:
<input type="button" onclick="open_win()" value="add new appointment"/>
WebElement ek = driver.findElement(By.xpath("//input[#value='add new appointment']"));
jse.executeScript("arguments[0].click();", ek);
This opens a pop up window. Now I need to focus on the window.
Ajax is used to retrieve information from this pop up.
I tried every aspect to focus on the new pop up. The input txt fields are hidden, The code that I've tried is:
jse.executeScript("window.focus();");
driver.switchTo().defaultContent();
driver.switchTo().activeElement().findElement(By.xpath("//*[#id='barge:bargeId:txtInput']"));
driver.switchTo().alert();
I thought to focus on the text field with the following code:
jse.executeScript("document.getElementById('barge:bargeId:txtInput')[0].setAttribute('type', 'text');");
driver.findElement(By.xpath("//*[#id='barge:bargeId:txtInput']")).sendKeys("suxs");
This also haven't worked.
Even jse.executeScript("document.title") has not worked.
the code for text field
<span id="barge:bargeId:input">
<input id="barge:bargeId:txtInput" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputbox doubleInputbox ui-state-hover" type="text" tabindex="" maxlength="17" accesskey="" name="barge:bargeId:txtInput" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"/>
</span>

to click on the button you can simple do this: driver.findElement(By.xpath("//input[#value='add new appointment']")).click();
By saying "This opens a pop up window" do you mean an actual new window, new tab or dialog like this or like this?
I think it opens up the dialog, and in this case usually it's just another element on the page. And in this case this should work:
driver.findElement(By.xpath("//*[#id='barge:bargeId:txtInput']")).sendKeys("suxs");
UPDATE:
Since it's a new window, there ways to switch to the new window described here:
driver.switchTo().window("windowName");
Also, it would be helpful to check the code of open_win() javascript function.

Related

ngBootstrap Capture click event on typeahead suggestions

when I type 'ala' it displays 2 states in suggestions 'alabama' and 'alaska'. Now what I need is as soon as I click on 'alaska'/'alabama' any item in list it should call my method
methodAbc(){
//Some complex logic
alert("Method called.");
}
Sample code link click here
I tried blur, focus, etc events on text box they didnt work way I need. Click do not triggers on item selection it triggers when I click inside text box.
You just need to use the selectItem event from ng-bootstrap's ngbTypeAhead API
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model"
[ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter"
(selectItem)="methodABC($event)" />
See updated sample code

Dialog window with text field in Jira serlvet

I made a Jira servlet that executes a search in an issue, but I want to be able to add a filter to that search, so I need to be able to get text as a parameter before I execute the search.
Is there a way for me to make it so a dialog window with a text field and an OK button pops up when I press the servlet button, and the request executes after I press the said button, with an empty string or the current string as a parameter?
Actually any way of dynamically setting a parameter before the request executes might help.
It sounds like you want to use the InlineDialog pattern. Have a look at Atlassian's AUI Sandbox for an example.
Something like this should do the trick in a recent version of JIRA
Button HTML:
<button class="aui-button " href="#" id="popupLink">
<span class="aui-icon aui-icon-small aui-iconfont-search-small">Search</span> Search on this issue
</button>
Behaviour JavaScript:
AJS.InlineDialog(AJS.$("#popupLink"), 1,
function(content, trigger, showPopup) {
content.css({"padding":"20px"}).html(
'<h2>Search something</h2>'
+ '<form action="/path/to/your/servlet" method="get">'
+ '<input name="q" placeholder="Search query..." >'
+ '<input type="submit" value="Search">'
+ '</form>'
);
showPopup();
return false;
}
);
This should give you an InlineDialog similar to the image below:
Also by adding a data-default-value attribute to your button, you could easily prepopulate the search field in the InlineDialog.

Is there a way in Meteor to immediately re-render?

I currently have a button that when pushed, opens up a text box. I want to do it so that the focus is automatically on this text box when the button is pushed.
I have the following HTML to render the button and input, and toggle between the button/input
{{#if modeIs 'edit' }}
<input class="col-xs-9" placeholder="Enter your new task and press enter" id="insertTask" type="text"/>
{{else}}
<button id="btnNewTask" class="btn btn-success btn-lg" role="button">New Task</button>
{{/if}}
Helper function to check the mode.
Template.insertNewTask.helpers({
modeIs: function (modeToCheck) {
return Session.equals('mode', modeToCheck);
}
});
This is the code I would like to use when the button is clicked to change the mode and focus on the input.
'click #btnNewTask': function (event, template) {
Session.set('mode', 'edit');
var input = $(template.find('#insertTask'));
if(input){
input.focus();
}
},
The bit to change the 'mode' works and the button changes to a text box when I click on it.
My problem is this query $(template.find('#insertTask')); returns nothing because although I've set the mode, it hasn't re-rendered the HTML yet and the text box doesn't actually exist yet.
Is there a way that when I set the mode to 'edit', to tell Meteor to just immediately re-render the HTML before proceeding with the rest of the function? Is there a better way to structure my code so that I can reference HTML components that don't exist until after Meteor re-renders the HTML?
Use the rendered hook:
Template.insertNewTask.rendered = function() {
var $input = $("#insertTask");
if (Session.equals('mode', 'edit')) $input.focus()
}
You could set another flag somewhere to indicate when you want to focus the input (eg. if you don't always want to focus it after rendering the edit view, just after clicking the button).

Radio Buttons are not applying style dynamically

I'm trying to refresh a list of radio buttons every time a user visits the tab menu. First time visit styling is okay, but they are behaving like checkboxes and can not be unchecked when other radio buttons are clicked.
I have tried to put refresh(); method but it still doesn't work.
You can see the demo on JSFIDDLE
Any suggestion? and Thank you.
$('.export_tab').click(function(){
$("#radios_wrapper").children().remove(); //Remove all previous radio buttons
for(var i in localStorage) //Looping through the localStorage
{
dataIndex = JSON.parse(localStorage[i]).index;
dataName = JSON.parse(localStorage[i]).name;
//Then insert a new one
$("#radios_wrapper").append('<input type="radio" value="'+dataIndex+'" name="'+dataIndex+'" id="radio'+dataIndex+'"/><label for="radio'+dataIndex+'">'+dataName+'</label>');
}
});
And this is the HTML
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" id='radios_wrapper'>
</fieldset>
</div>
Radiobuttons need the same name to become a group. So:
'<input type="radio" value="'+dataIndex+'" name="'+dataIndex+'"/>'
is not the right way. The name should be the same for all radios you want to group. It should be:
'<input type="radio" value="'+dataIndex+'" name="allTheSame"/>'
Here is an update to your Fiddle.
To tell jQuery to redraw use the trigger function like .append('whatever').trigger('create'). http://jquerymobiledictionary.pl/faq.html. Updated Fiddle.

Button to Show a Window from Listbox Row

I want to create a button that can show a window to show details of elements in listbox when it's clicked. the listbox itsetf was created from a list of JSONObject like this:
<listbox id="userListbox">
<listhead>
<listheader laber="Action"></listheader>
<listheader label="Id"></listheader>
<listheader label="Name"></listheader>
<listheader label="Address"></listheader>
<listheader label="Phone"></listheader>
</listhead>
<listitem forEach="${userController.list}">
<listcell>
<button label="Detail" id="detailButton"></button>
</listcell>
<listcell label="${each.id}" ></listcell>
<listcell label="${each.name}" ></listcell>
<listcell label="${each.address}" ></listcell>
<listcell label="${each.phone}" ></listcell>
</listitem>
</listbox>
for every row (listcell) there is always a button to show the details. but when I load the page, it failed to show the list with error message:
Not unique in ID space < Window cP8Q0#userWindow>: detailButton.
any idea to show a window when the button clicked? here is the code when button is clicked:
#Listen("onClick = #detailButton")
public void showModal(Event event) {
Component comp = Executions.createComponents("/widgets/window/modal_dialog/employee_dialog.zul", null, null);
if(comp instanceof Window) {
((Window)comp).doModal();
}
}
thank you for your help.
The problem is that if you click on different buttons you are running the createComponents again and again. Your employee_dialog.zul is only safe to include into the page once as it has IDs in it; if you do the operation twice you are creating a second set of components with the same ID and the IDs should be unique within a given idSpace (see the ZK developer guide for the theory).
There are other issues here: why create the components twice? Why not keep one and only one set around, showing and hiding them based on button clicks. That is more efficient.
Look at Button to Show a Window from Listbox Row which shows that you can:
<zk>
<!-- hidden -->
<window id="wnd" title="My Modal" visible="false" width="300px">
<button label="close" onClick="wnd.visible = false"/>
</window>
<!-- click button to pop the hidden window! -->
<button label="do it" onClick="wnd.doModal()"/>
</zk>
So you can use a
<include src="/widgets/window/modal_dialog/employee_dialog.zul">
to pull the model dialog into the bottom of the main page once and only once. Then in the code you can set the data into it and do
win1.doModal();
where win1 is the modal window defined in the fragment. You have to tell the model window what to display before you pop it but that is not hard. Use desktopScope.put( "myName", this) to have the controller/view-model of the dialog box register itself in a location where the controller/view-model in the main window can find it and talk to it to pass it the data to render.
Two other tips.
Hide your fragments as /WEB-INF/zul/employee_dialog.zul as anything under WEB-INF cannot be directly accessed by a browser for better security.
Try not to put any zul into your java. That is mixing behaviour with presentation. Sometimes it is unavoidable but always try first to keep the zul in the zul then interact with it via java IDs only (much like my suggestion). It is not always possible but separation of logic from layout is a core design pattern.
Simon
<button label="Detail" />
#Listen("onClick = listbox listitem listcell button")

Resources