What I try to do is to have 2 blocks, one with all "field types" available and an other where they can be drop and sort. It must only work in one way, From the field types To the droppable zone.
For the moment I achieved to do 2 things, make my list of fields in the droppable zone sortable, and make the drag and drop working (I used the mootools doc http://mootools.net/demos/?demo=Sortables).
BUT, and here is the problem, my user need to drag the field to my droppable zone, and then after he can sort it. I can't find a way to make the field sortable directly during the drag moment.... It's a nightmare.
I hope you can understand my problem and help me. I've searched all over the internet but it seems nobody made example for this.
Thanks !
So after a looooooooong search and test in all ways possible I found a solution :
Create a sortable bloc for the droppable zone
Create a drag and drop bloc from the field type zone to the sortable bloc
In the new Drag.Move add onEnter and onLeave, and in that use sorter.addItems to add the item directly to the the sortable zone on entering it and at the opposite sorter.removeItems when leaving
One last thing is to start the sorter after adding an item and ending it after removing one (onEnter/onLeave)
That's it ! I hope it will help some other people.
#Mushr00m : could you give a jsfiddle example of your implementation ?
It could be very useful !
Related
Let's say I need to print the full name of a person. What I originally did was to separate the first name and last name into two elements and placed them side by side since they needed different styling (this is just an example):
Lastname, Firstname
However, I found out after that I can't actually make their width dynamic because the developers made an effort not to allow it. So now I'm wondering if I can present the name with two different styles inside one element. Is this possible? How would I accomplish that? I hope you can help, thanks!
Okay so apparently you can. All you need to do is setup the markup attribute on the text field.
Refer here for more details: http://jasperreports.sourceforge.net/sample.reference/markup/
Excuse the confusing language but hopefully this makes sense: (see code for more clear explanation)
I have a requirement to display a list of "spare parts" in an sap.m.Table but there is the ability if one of these "spare parts" has a related "spare part" (e.g. A heavy duty version, a light version, etc) , that you can click a button on the row and display these related "spare parts" by inserting them immediately below the "spare part" in question.
While I can get the sap.m.Table doing what I want to do, I would like to take advantage of templates and binding to create a temporary sap.m.Table; bind it to the relationship that returns these alternate spare parts; and reuse the template for a row to give me an array of ColumnListItems which I can insert into the Table at the right place.
Unfortunately, doing this, a sap.m.Table has a feature that if it is not displayed, it doesn't actually make the Odata call and leverage the template function.
To explain possibly much clearer, refer to this jsbin:
http://jsbin.com/sihofu/4/edit?html,js,output
Any better ideas on how to generate template output for a binding without using a sap.m.Table; or alternative, getting the sap.m.Table to make the call without placing it on the screen visible (temporarily)?
The specific code to look at is as follows:
var oTable2 = new sap.m.Table();
oTable2.attachUpdateFinished(function() {
console.log("But this one doesn't");
// What I'm trying to do here is insert these entries below Key 1
});
oTable2.bindAggregation("items", {
path: "/ExampleSecondaryValues",
template: oTemplate,
});
Thanks,
Matt
Back from Holidays now and solved this problem with a bit of brute force by simply enhancing/extending the sap.m.table control slightly.
The problem was if the control was invisible, nothing was rendered, and some optimisation within UI5 core means that in the case nothing is rendered, the AfterRender event is not called on the control and this event is what fires the UpdateFinished event.
I won't debate whether that optimisation is appropriate or not, but to fix this I simply extended the table control with a new control which looks like as follows:
sap.m.Table.extend("my.InvisibleTable", {
renderer: function(oRm, oControl) {
oRm.write("<span");
oRm.writeControlData(oControl);
oRm.write("></span>");
}
});
e.g. Simply always rendering something in the render function, causes the AfterRender event to be called; which in turns allows the sap.m.Table to fire the UpdateFinished event which allows me to then safely get the rendered template items to insert in my visible table.
Would love to know a much better way of doing this (possibly using the template control or similar), but this works okay to solve the problem.
Cheers,
Matt
What's the correct XPath syntax to check if an option element is currently selected, or just to get the selected option element from a select element, on an open page with which the user, and JavaScript, may have interacted? Is this even possible with XPath, or does it lack the ability to look at DOM properties?
I can't find any documentation on this, and have (speculatively) tried:
//option[#selected=true]
//option[#selected="selected"]
//option[#selected]
but none of these work; they simply don't match any elements.
(In case it matters, I've tried this both using the $x function in the Chrome developer console, and using the find_elements_by_xpath method in Selenium for Python.)
Short answer: it's not possible.
Longer answer: XPath can look at HTML attributes, but it can't look at DOM properties. Selecting an <option> element in a <select> changes the selected property of the <option> to true, and also changes the value property of its parent <select> element, but it doesn't affect the attributes of either, so it is invisible to XPath.
To find <option> elements that have the selected attribute set, which is often how a page author might determine which option is initially selected, you can use //option[#selected]. But this does not find the currently selected <option>; changes that the user makes to the selection are invisible to XPath. There's no guarantee it will even find the initially selected option, since it's possible that the page author didn't put the selected attribute on any elements and either let the browser select the first option by default or had some JavaScript select the initial option via the selected property.
The multiple other answers here claiming that a selector like //option[#selected] can detect selection changes made by the user after the page loads are simply completely wrong.
Of course, if you're able to use CSS selectors instead of XPath selectors, then option:checked will do the job.
The problem could be the " (double quotes).
//select/option[#selected='selected'] - Will match the selected option, i am using this successfully.
//select/option[#selected='selected' and #value='specific value'] - Will only match the selected option if it has a 'specific value', i'm also using this.
If you are still having trouble, it could be an entirely different problem, perhaps there is no option node. I hope this helps.
I think we can use a knowledge from #Mark's answer and account that. Let's just find a node which HAS desired attribute:
tree.xpath('//select/option[#selected]/text()')[0].strip()
I tried "//option[#selected=''] and it has worked for me.
it is able to highlight the selected option within Page objects model.
I would try //option[#selected='true']
i.e. driver.findElements(By.xpath("//option[#selected='true']")).getText();
I've created a simple form containing two selectbox elements. I also have a button which dynamically adds these selectboxes at the user's discretion. The selectbox options will be quite long, so I've applied the jQuery Chosen plugin to be more useful.
Everything works fine until a new element is dynamically added using jQuery clone. I am unable to select any options in my new element selectboxes, and they also carry the prior results.
In searching the forum, others have 'reset' Chosen after a selection, by calling: $("#form_field").trigger("liszt:updated"); . I tried this as well, but it will just clear all the selections (which I don't want) and continue to freeze the dropdown action.
Anyone have experience with using Chosen (or any other autocomplete-type selectbox enhancement) with dynamic elements?
Found a solution that works - albeit without using the Chosen plugin.
I changed my dynamically created form elements by replacing the selectboxes with input fields tied to a basic jQueryUI autocomplete plugin. Here is a link to their implementation : http://jqueryui.com/autocomplete/#default.
The main difference is that the select "options" in this case, were listed as the source from which the box would look for autocomplete options. My list was 70 items long, so the initial setup took some time.
The jQuery text was generically as follows:
$("input#search").autocomplete({
source: [item1, item2, item3, item 4, ... item5]);
I am stumped beyond belief.
I have a select box being generated by the cakephp form helper. I am feeding it an array of options, and passing an empty value... pretty standard stuff.
However, my "empty" field is showing up at the very bottom of the list.. not the top. So when the field loads, it just defaults to the first option... which is not the "empty" option.
Not a whole lot of room for error on the code here..
echo $this->Form->input('whatever',array('empty'=>'Choose One','options'=>$categories));
The only small item that might be important, is that $categories is a multi-array, so the select box has optgroups & options.
Is there some quirk/bug out there that I do not know of that is trying to force me to sneak into my scotch supply a few hours ahead of schedule?
edit: using the latest release of cakephp 1.3.x
I think that I once had the same problem.
It turned out to be the data (options array).
Is there an option with an empty key? probably the last one then.
this lead to the scenario I remember and seems to be the exact same thing.
the form helper will override this empty key value pair then and not create a second one.
without more infos from your end this will be difficult to solve.