I have a web application in Vaadin 7, I use JavaScript and it works on Google Chrome, but doesn't on IE 11. This is my way of to use JavaScript (I don't want doing it with Java if it's possible)
com.vaadin.ui.JavaScript.getCurrent().addFunction("left", new JavaScriptFunction(){
private static final long serialVersionUID = 1L;
#Override
public void call(JsonArray arguments) {
zinkonaux.executeJs(""
+ "var box = document.querySelector('.divobjetos');"
+ "var pos = window.getComputedStyle(box,null).getPropertyValue('left');"
+ "pos = parseInt(pos);"
+ "pos = pos + 300;"
+ "box.style.left = pos+'px';"
);
}
});
My problem is:
In IE the javascript function does not work, I want to click on one of the previous div, another scroll, like a carousel effect, but in IE when clicking does not make the effect and in the development window there are no errors
I would suggest moving your Javascript into a separate file. If you want the JS method to be available throughout your application you could use the #JavaScript annotation on your UI class.
package com.company
#JavaScript("test.js")
public class MyUI extends UI
{
...
Then you need to put test.js into your resources folder (if you're using maven) in the folder /com/company/test.js which would look something like this.
function left()
{
var box = document.querySelector('.divobjetos');"
var pos = window.getComputedStyle(box,null).getPropertyValue('left');"
pos = parseInt(pos);"
pos = pos + 300;"
box.style.left = pos+'px';
}
I could not solve the JavaScript error in IE, specifically to change the position of the inner div between the left and right containers, use in each one a button that in its ClickListener modified the style with:
Styles styles = Page.getCurrent().getStyles();
styles.add(".divscroll .divobjects { left: "+positionInfoTags+"px !important }");
My html code was this:
<div class="container">
<div class="left" location="moveLeft"></div>
<div class="right" location="moveRight"></div>
<div class="divscroll">
<div class="divobjects" location="infoTags">
</div>
</div>
</div>
Related
Big fan of your work.
I am building a Blazor WASM application utilizing the HTML5 Drag and Drop API. I am having the strangest issue that I've been trying to fix for hours.
This app allows one to put objects into "groups". A group can contain other groups, and so on.
I've got it mostly working, but two issues are leaving me scratching my head.
SOLVED See comment 1) When I drag a group UP from underneath into another group, the group is migrated into the destination but the subitems in the original group disappear.
Before I drag the bottom group up:
https://i.imgur.com/t7rGReI.png
After:
https://i.imgur.com/t5rIS1Y.png
When I drag a group DOWN from above into another group, the destination group's GUID overwrites the source and I am left with one group.
Before:
https://i.imgur.com/zC34cyT.png
After:
https://i.imgur.com/lSr4hGk.png
Groups are the orange shapes, Interfaces are the blue shapes. They are rendered via the Field class.
I've tried every permutation of the code I can think of and nothing has made it any better. I must be missing something here.
Group.razor
#inherits Item
<div id=#Uid class="tb-group tb-draggable #CssClass"
draggable = "true"
ondragover="event.preventDefault()"
#ondragstart:stopPropagation
#ondragstart="#(()=>HandleOnDragStart(this))"
#ondragend="HandleOnDragEnd"
#ondragenter="HandleOnDragEnter"
#ondragleave="HandleOnDragLeave"
#ondrop:stopPropagation
#ondrop="HandleOnDrop"
#onclick:stopPropagation
#onclick="Debug_Output">#Title : #Uid : #Parent.Uid
#foreach(Item item in Items){
if(item.GetType() == typeof(Group)){
<Group Uid=#item.Uid Title="#item.Title" Field=#Field Parent=#this></Group>
} else if(item.GetType() == typeof(Interface)){
<Interface Uid=#item.Uid Title="#item.Title" Field=#Field Parent=#this></Interface>
}
}
</div>
This code is responsible for OnDrop behavior (HandleOnDrop)
Group.razor.cs -
public partial class Group : Item {
public List<Item> Items;
protected override void OnInitialized()
{
Items = new List<Item>();
base.OnInitialized();
}
public void HandleOnDrop(){
if(Payload.Uid != this.Uid){
Console.WriteLine("Removing item " + Payload.Uid);
Items.Add(Payload);
Payload.Parent.Items.Remove(Payload.Parent.Items.Find(x => x.Uid == Payload.Uid));
}
CssClass = "";
this.Field.Refresh();
Payload.Parent = this;
}
...
Interface.razor
#inherits Item
<div id=#Uid draggable="true" class="tb-interface tb-draggable #CssClass"
#ondragstart:stopPropagation
#ondragstart="#(()=>HandleOnDragStart(this))"
#onclick:stopPropagation>#Title : #Uid : #Parent.Uid</div>
Could it be how I initialize these components (via constructor)? Maybe they're getting cleaned up by the GC?
Field.razor.cs -
public partial class Field : Group {
protected override void OnInitialized()
{
base.OnInitialized();
}
public void AddGroup(){
Group grp = new Group();
grp.Parent = this;
Items.Add(grp);
StateHasChanged();
}
public void AddInterface(){
Interface iface = new Interface();
iface.Parent = this;
Items.Add(iface);
StateHasChanged();
}
public void Refresh(){
StateHasChanged();
}
}
I'm at my wits end here. If anyone could give me some advice it would be much appreciated.
Issue #1: Needed to pass the Items object into Group on instantiation
Issue #2: Needed to use #key to maintain reference
I am trying to click a button on a webpage with WebDriver which uses JavaScript to expand a menu revealing other links:
<div id="menu">
<div id="security_bt" class="advanced_white_close_button" onclick="open_or_close_sub('security');
security_open++;"><b> <span languageCode = "13">Security</span></b></div>
<div id="advanced_bt" class="advanced_white_close_button" onclick="open_or_close_sub('advanced');
advanced_open++;"><b><span languageCode = "3011">Advanced Setup</span></b></div>
...etc
I have tried using methods suggested on this site including Xpath and CSS
Browser.Driver.FindElement(By.XPath("//div[#id='advanced_bt']/b/span")).Click();
or
Browser.Driver.FindElement(By.CssSelector("#advanced_bt > b > span")).Click();
and also tried with IJavaScriptExecutor:
var executor = (IJavaScriptExecutor)webDriver;
executor.ExecuteScript("arguments[0].click();", element);
Neither have worked. The test does not fail to locate the elements, so I'm out of ideas why the can't be clicked. If anyone can shed any light that would be appreciated. Cheers.
Oh and this is the onclick= code:
function open_or_close_sub(name)
{
var button_name= name+"_bt";
var sub_name= name+"_sub";
var open_flag= top.document.getElementById(sub_name).style.display;
close_all_sub(sub_name);/* fold all menus first, except the menu which user click*/
var button_div = top.document.getElementById(button_name);
var content_length = button_div.getElementsByTagName("span")[0].innerHTML.length;
if( open_flag == "none")
{
settingClass(button_div, content_length, "advanced_white_open_button", top.region_class.white_triple, top.region_class.white_double);
top.document.getElementById(sub_name).style.display="";
}
else
{
settingClass(button_div, content_length, "advanced_white_close_button", top.region_class.white_triple, top.region_class.white_double);
top.document.getElementById(sub_name).style.display="none";
}
change_menu_height();
}
Try the code below:
Browser.Driver.FindElement(By.Xpath("//div[#id='advanced_bt']//span[.='Advanced Setup']")).Click();
It will click on the 'span element', under div tag with id 'advanced_vt', and having exact innerHTML/text as 'Advanced Setup'
Or try the below code using Actions class:
Actions action = new Actions(Browser.Driver);
action.MoveToElement(Browser.Driver.FindElement(By.Xpath("//div[#id='advanced_bt']//span[.='Advanced Setup']"))).Click().Perform();
EDIT 07.12.14
In case, that still doesn't work, then using IJavascriptExecutor, set the attribute of the submenu to be visible, and then proceed on taking further actions on the submenu. From the image in the comments, the below code will reveal the submenu under 'Advanced Setup':
IWebElement element = Browser.Driver.FindElement(By.Xpath("//div[#id='advanced_sub']"));
var executor = (IJavaScriptExecutor)webDriver;
executor.ExecuteScript("arguments[0].style.display='block';", element);
I'm using CKEDITOR in version 4.3 and got sections of a html as input.
Now i need to make sure, that the costum-data always got a root tag (in my case a div with the class='CKEDITOR-autoadd).
so when my input is:
<p>jkdhgjkhngvkh</p>
<p>shgnuvzv</p>
my output has to be
<div class='CKEDITOR-autoadd'>
<p>jkdhgjkhngvkh</p>
<p>shgnuvzv</p>
</div>
Does anyone got an idea how i could solve this?
I had the idea of adding a custom plugin like
if(!root-tag found){
add div
}
Summary 2 Problems:
1. How do I surround my custom-data with tags?
2. How do I check / search a root-tag?
regards Sebastian
Edit: the failure in the Java-Applikation happens when:
public Element addSection(String title, String xmlAsString, String lang) throws IOException, JDOMException {
Content content = null;
try {
SAXBuilder saxBuilder = new SAXBuilder();
StringReader reader = new StringReader(xmlAsString);
→ Document doc = saxBuilder.build(reader); ← ERROR = JDOMParseException
content = doc.getRootElement();
content.detach();
}catch (JDOMParseException jdomParseExc) {
content = new Text(xmlAsString);
}
return this.addSection(title, content, lang);
}
I have problem to put my own Javascript in a separate file and use it from JQWicket (testing Drag & drop plugin). Here is myscript.js:
com.mycompany.Test = function() {
return {
test_func: function() {
$('#msg').text('X position = ' + ui.position.left + ', Y position = ' + ui.position.top);
}
}
}
And in the java I want to call test_func:
DraggableOptions drop = new DraggableOptions().dragEvent(
"com.mycompany.Test.test_func()");
But it does not work! I think the problem is that myscript.js is included before jquery.js and I do not know how to reorder include statements.
I'm very grateful if anyone has a working example with a separate javascript file that is called from jqwicket!
Thanks in advance!
Add an JQBehavior instance referencing "myscript.js" to your component/page like this:
JQBehavior behavior = new JQBehavior();
behavior.addJsResourceUrls("myscript.js");
Component comp = .... ;
comp.add(behavior);
I have the following code to smooth animation on a collapsiblepanel, and it works splendidly:
<script type="text/javascript">
function pageLoad(sender, args) {
smoothAnimation();
}
function smoothAnimation() {
var collPanel = $find(("<%= CollapsiblePanelExtender.ClientID %>"));
collPanel._animation._fps = 30;
collPanel._animation._duration = 0.5;
}
</script>
Now, I also have a listview, separate from the above panel, that has a collapsible panel extender inside each of its items. I would like to apply that "smoothAnimation()" function to each of them, but I don't know how to do that, since databinding gives each item a unique ID.
Does anybody know how to approach this in javascript? Any help is greatly appreciated.
Use the OnItemCreated event, and use the following:
protected void ListItems_Created(object sender, ListViewItemEventArgs e)
{
CollapsiblePanelExtender cpe = (CollapsiblePanelExtender)e.Item.FindControl("collapsePanelID");
cpe.Attributes.Add("onload", cpe.ClientID + "._animation._fps = 30;");
cpe.Attributes.Add("onload", cpe.ClientID + "._animation._duration = 0.5;");
}
This code is untested but it's all you should need to get this working.