i create a div with heading and UL inside with dojo.create. how can i totaly delete this div with heading and UL children so that i can create a div with this id again (with different content)?
I create the div like this (i delete some attributes and the h1 and ul creation because it was too much code, i do it the same way like i create the div):
var newAlarmDiv = new dojox.mobile.ScrollableView({
id: "divAlarms",
dojoType: "dojox.mobile.ScrollableView",
});
newAlarmDiv.placeAt('mobileView','first');
i already tried it with the dojo.destroy command but when i create a new div after destroying it i get many different errors so it seems not to be deleted correctly.
How do i correctly "undo" the div creation?
greets
Tom
You are creating a "Widget", which has DOM elements associated with it. If you were destroying only dom elements you would use dojo.destroy.
Since you want to destroy the widget, you should use destroy or destroyRecursive. The API Docs have a good overview of what each method does.
var scrollableViewWidget = new dojox.mobile.ScrollableView({/*params*/});
scrollableViewWidget.placeAt('someDiv','first');
scrollableViewWidget.destroyRecursive();
Related
My question is probably really easy. I want to populate a Materialize select element with a few options. I don't want to put my options in the HTML, I want to do it from a JSON with javascript (I get the json from a different service). In my HTML file, I just have an empty select.
In the documentation, I see that during the select initalization, you can pass an options object. I assume this can be used to populate the select dropdown. A bit lower it is stated that the correct key is dropdownOptions, and you are supposed to pass an UL to it. I did so, but the UL is empty. Console log shows that the ul is built correctly. What am I missing?
let ul = document.createElement("ul");
arr.forEach(oddelek => {
let li = document.createElement("li");
li.appendChild(document.createTextNode("Four"));
ul.appendChild(li);
});
console.log(ul); // looks good
M.FormSelect.init(selects, {
"dropdownOptions": ul
});
What could be the reason that only an empty ul appears?
Because the above code didn't work, I decided to just add the elements to the HTML with javascript, and then run the init with an empty options object. But it doesn't work, the dropdown is still empty.
The init with empty options object works perfectly if the items are added manually in the html, but does not work if they are added through javascript. I have no idea why, I call the init after I add the elements. Inspecting the resulting html without the init looks just like in the documentation. Any advice?
I am trying to iterate a table to get the results. The structure of the table looks as mentioned in the picture
When I open the page, there is only one with role="presentation" and I am able to retrieve the data using the below css locator.
driver.findElement(By.cssSelector("div[id^=dojox_grid__View_] div.dojoxGridContent div.dojoxGridRow:nth-child(1) tbody tr:nth-child(1) td:nth-child(6)")).getText();
When I scroll the page manually another tag is created dynamically with role="presentation" and has many rows(div.dojoxGridRow). I want to iterate these rows too.
Selenium is able to go only to first level (first ) and get the details. I am not sure how to reach the second level
I'm not sure about which element you're trying to access.
But you can access to all div with 'presentation' role (return a list):
driver.findElements(By.cssSelector("div[role='presentation']"));
If you're trying to access to each row under div with role presentation:
driver.findElements(By.cssSelector(".dojoxGridRow"));
If you want to get rows child of div with role 'presentation':
List<WebElement> presentations = driver.findElements(By.cssSelector("div[role='presentation']"));
for (WebElement presentation : presentations) {
List<WebElement> rows = presentation.findElements(By.cssSelector(".dojoxGridRow"));
// DO SOMETHING...
}
Hope that helps.
On my site I have a DataList full of image thumbnails. The thumbnails are HyperLink controls that, when clicked, offer an enlarged view of the source image (stored in my database).
My client wants a facebook Like button on each image and I was hoping to put that in the lightbox window that appears when you click on a thumbnail.
My challenge here is that to generate the info for the Like, I need to create meta tags and each image should, preferably, create it's own meta tags on the fly.
What I can't figure out is how to make the HyperLink click open the lightbox AND create the meta tags at the same time.
Any help will be greatly appreciated.
For a live view of the site, go to http://www.dossier.co.za
The way that we approach similar problems is to hook the onclick event of the href in javascript.
Depending on exactly what you need to do, you can even prevent the standard browser behavior for the hyperlink from executing by returning false from the javascript method.
And in some cases, we just use the hyperlink for "show" by setting the href to "#".
Here is an example that combines all of these concepts:
File Name
In this case, the specified javascript is executed, there is no real hyperlink, and the browser doesn't try to navigate to the specified URL because we return false in the javascript.
Add a Classname to the opening table tag like class="tbl_images" so we can use JQuery to access it. Capture the click on the td and pickup the id of the item. Pass that id to your code as required to generate your meta tags. In the following when the user clicks on an anchor in a td, a function will run.
I use this all the time to access attributes in the td so i can run a function. You could use something like this to pickup values from your image/anchor and create something...
$("#tbl_images > tbody > tr ").each(function () {
//get the id of the tr (if required)
var id = $(this).attr("id");
var ImageTitle = $(this).find("img.Image_Class_Name").attr("title");
//on click of anchor with classname of lighthouse run function,
//passing in our id or other data in the row to our function
$(this).find("td: > a.lighthouse").click(function () {
//update script for this record
MyFunction(id,ImageTitle);
});
});
The TableContainer is declared in HTML like so:
<div dojoType="dojox.layout.TableContainer" jsId="myTable" id="myTable" cols="1">
<!-- stuff -->
</div>
I tried adding a row containing a TextBox programmatically like so:
var tb = new dijit.form.TextBox({
label: "Name"
});
myTable.addChild(tb);
The TextBox will be displayed below the table and no labels are shown. How can I place new rows with label inside the table?
I'm pretty sure this is a bug. It looks like once the TableContainer has been started the first time, adding children wont trigger a new layout() etc. A quick but hideous workaround would be to make the TableContainer "forget" that it has already been initialized and started, and then run startup() manually.
var tb = new dijit.form.TextBox({
label: "Name"
});
myTable.addChild(tb);
myTable._initialized = false;
myTable._started = false;
myTable.startup();
I take no responsibility for any unforeseen oddities this may cause though :-) Normally manipulating private members (the ones starting with an underscore) is a bad idea.
yeah there is some issue with tablecontainer ,the suggested work around for this issue would be
<div id='myTable'></div>
declare the div in the HTML but convert it into tableContainer in script then u can have the use of both the ways avoiding the bug
initialize the table container in script like
var myTable=new dojox.layout.TableCOntainer({cols:1},"myTable");
don't forget to startup our table container after adding the childrens
After this you can easily add any number of childs normally
I have two divs nested under a parent div and I want all these to be source as well as targets for dojo.dnd.
I want to be able to add nodes to the div over which the content was dropped and also allow the user to move this in between the 3 divs.
Something like this -
http://www.upscale.utoronto.ca/test/dojo/tests/dnd/test_nested_drop_targets.html
This is I gues implemented in older version of Dojo and doesn' seem to work with 1.4
Is the support for nested targets removed? Is there any way to achieve this?
Nested sources/targets are not supported currently. In most cases you can work around this restriction by using independent sources/targets, yet positioning them as you wish with CSS.
I used a workaround for this case. I create another DIV element which positioned at the same place of the nested target with same width and height but with higher z-Index value. Then the new DIV element covers the nested target. When user is trying to drop on the nested target, he actually drops to the above new DIV element. As long as the new DIV element is not nested in the parent drop target, Dojo's dnd operation works well. I usually put the new DIV element as a child of the body element.
What you need to do is to create the new DIV in onDndStart and destroy it in onDndCancel, then everything should work well.
Dojo version 1.10 still does not support nested Dnd.
CSS positioning and overlay div's didn't work for me. But I noticed that dragging an element out of a dndContainer into a parent dndContainer doesn't trigger onMouseOverEvent for the parent.
In case someone is still using dojo and has the same problem, here is my approach to solve this:
Declare your own dndSource e.g. nestedDndSource.js
define([
"dojo/_base/declare",
"dojo/dnd/Source",
"dojo/dnd/Manager"
], function(declare,dndSource, Manager){
var Source = declare("dojo.dnd.Source", dndSource, {
parentSource: null,
onOutEvent: function(){
if(this.parentSource != undefined)
Manager.manager().overSource(this.parentSource)
Source.superclass.onOutEvent.call(this);
}
});
return Source;
})
Use that nestedDndSource for the children instead of dojos and make sure to provide the dndSource of the parent as parentSource-Parameter:
var parentDndSource = new dojoDndSource(parentNode, {..});
var childDnDSource = new nestedDndSource(childNode,{
parentSource: parentDndSource,
onDropExternal: ...
});
Working example: https://jsfiddle.net/teano87/s4pe2jjz/1/