I am currently building a keyword bank to assist in tagging my in-house design assets. My idea is to have each keyword as a checkbox form element with one empty div at the bottom. You'd go through the entire list, check what you need and the text assigned to the id of that checkbox would populate in the empty div, separated by commas, and I can just copy/paste that text right into the metadata. I plan on having hundreds, so I'm hoping there is simple solution to this.
I have no problem setting up the html form/checkboxes, but I am unsure how to make this text populate in that empty div—or even IF it's possible. Would I use jQuery? Ajax? I also don't need a submit button—just that div to update immediately each time a checkbox is touched. Would I also need to have some server-side communication with a submit button to even make this work?
Thank you so much in advance for any help you can give or any direction you can point me in.
Here is a working fiddle
What you need is basically something like this :
$( ":checkbox" ).click(function() {
//alert($( this ).val());
$("#myText").append($(this).val() + ";");
});
You can forget the alert. This will add the value assigned to the checkbox in the div followed with a coma. :)
Related
I'm researching an easy way to make a free text input that can also contain multiple replaceable tags to create templates. As on this picture example
In that picture, the information witch player (tag) made the goal would be stored.
Later I would reuse that template and replacing the tag by a value.
Like: Goal of Iniesta, Goal of Rivaldo, ...
I couldn't find a lib that would do the job. The few attempts that I made to try to resolve it lead to extremely complex inputs with redefining selects (onClick, onKeydown, onSelect, maintaining current select) as the user can't edit the tag by hand (they are trigger by clicking buttons).
Does somebody already had to handle this kind of input?
Edit: As my question seems to be not clear, I will add a few details.
In fact, the input should work as it is a free text input but should also allow adding tags/chips that are provided by external triggers (onClick buttons)
Example: I will make [activity] on [day]
First I type "I will make " then I click the button "activity" that will add a "activity" tag/chip to the input. I continue with typing " on " and finaly click the button "day" to add the tag "day".
Then I will store this as template and reuse it in several scenarios by replacing the tags. Like:
I will make sandwiches on Monday
I will make sport on Friday
If somebody else have the same issue. I finally found the right lib Tagify. It has a mixed mode (text + tag)
I am little new with angular Grids, sorry if it looks silly. Here is a link of plnkr which I have created.
My issues:
I wanted to disable selction of those rows which has the property IsApplicable as false. As of now all are available for selection.
I tried to achieve the same by below code in onRegisterApi
$scope.gridOptions.isRowSelectable = function(row){
return row.entity.IsApplicable;
};
But it did not seem to work.
I wanted to give color to grouping Header and selection header.
I don't know if its possible, but it would have been good if I could make the width of first column("MetricName") as '0px'. As of now If I do that my group header also becomes '0px'. Because my first column is taking space, which is unused and I am forced to keep it because of group header.
Here is a plunker with 1+2
set this inside your gridOptions object (not after the api was registered)
isRowSelectable: function(row){
return row.entity.IsApplicable;
}
and the column`s color is in simple css... i dont know if you can add a class to those cells, for that you need to do some digging in the angular grid api documentation http://ui-grid.info/docs/#/api
http://plnkr.co/edit/9oexAuXeRfadOrImu1CJ?p=preview
im not sure what you want to do in 3... if you are trying to keep the header without taking space in the columns that not possible... since this is a table if you have a header and the row`s column has an empty value it is still going to take the width of the column
Open one web page say gmail.
Want to count that how many text field or buttons or checkbox or hyperlinks or other html elements are present.
The solution is very simple . This can be done using simple XPath.
Find the type of element count you need.
eg for text fields: xpath can be : input[type='text']
for radio buttons: xpath can be : //input[#type='radio']
for check box buttons: xpath can be : //input[#type='checkbox']
so find all the elements in the page by using simple command using the above xpath:
webdriver.findElements(By.xpath("REQUIRED_XPATH")).size();
will give you the number of elements in the particular web page.
I am using c#. If you use c# as well the followings is the something you want to use. And you decide what tags you need inside the selector. I am using all the tags so far.
ReadOnlyCollection<IWebElement> webElements = Driver.FindElements(By.CssSelector("input, select, textarea, a, button"))//and keep adding
//then do a simple count. The trick here is the selector and you need to make sure you are adding all the tag names are being used in your application
webElements.Count();
If you want to count all elements of a page, you can simply use * for that as shown below.
List<WebElement> items = driver.findElements(By.cssSelector("*"));
System.out.println(items);
Here is how to know instantly how many items in the list on the website, for example, languages in the wiki, using right-click "Inspect element".
Screenshot
I'm trying to use AngularJS and Angular-UI-Bootstrap to create a WebApp but as I'm rather new with all this, I need some help. I'm using ng-repeat and an array to create a Tab interface.
Depending on an action in the first Tab, a second Tab is added to the interface or should be refreshed if it's already open. I've got the Tab working and have a check to make sure it isn't added again when it's already open.
The basic structure is the following: One controller (TabController) to control the Tab interface, and one controller (Tab1 and Tab2) for each Tab that's added to the interface.
Now, I have the following problem, the content of the second tab should change depending on data changed in the first tab. When the user confirms the data in the first tab, I execute a function in the TabController (to add / activate the second tab) that also changes some data in the scope. I can't seem to be able to detect the change in this data in de second tab, I've created a watch for the field, but it's only fired the first time the tab is loaded. If I use the field itself, the data is changed, but the watch doesn't fire. Anyone got an idea how I can get this to work? The data that changes should be used to make changes to other information, that's the reason I'm trying to use a watch and execute a function...
I've created a Plunker that should demonstrate in a simple example what the problem is and what I'm trying to do (I hope...)
DEMO
On the first Tab, there is a button to add a second tab (or activate it), as an example, I just increase a count that's displayed on both tabs. On the second tab, I have a local field on the scope that I fill with the global field using a $watch.
When starting the first time, the global count is one, after adding the second tab, both the global as the local count on the second tab are 2. When I go back to the first tab and click the 'Add tab' button again, the global count on both tabs is 3, but the local count on the second tab remains 2 and the watch isn't fired.
As I'm new to Angular (and web programming) I might be trying to do something that goes against all the best practices, so if someone has a better / different way to do what I'm trying to do, feel free to make any suggestions.
Your watch expression was incorrect, the correct expression would be
$scope.$watch("tabCount",
function() {
$scope.localCount = $scope.tabCount;
})
}
instead of
$scope.$watch($scope.tabCount,
The first one means you want to watch on a variable tabCountdefined over the scope.
On the Cognos Report Results Page, we need to have a checkbox for each row.
The checkbox is designed using HTMLITEM tag.
However, the problem we face is that the state of the checkbox (checked or unchecked) is not persisted when we go to the next page/previous page.
I am very new to Cognos and I need to know if there is a way to do this.
I am fairly good at JAVAScripting and JSP, but since we only have access to HTML elements and not JSP Tags (Cognos uses CGI anyways), I cannot get the request object.
If there is some way to retrieve the request objects parameters of previous submit(previous page), that would help in solving the issue to a large extent, I feel.
Jonas
There isn't really enough information on what your end goal is to be able to assist you with this properly. There are a few ways that spring to mind that would allow you to use JS on the report to remember previously checked items, but there may be a much better way to do this depending on your requirements.
Without having more details, the first thing that leaps to mind is simply having some JavaScript set and unset cookie values on check/uncheck on the checkbox.
Note, there could be a variety of other ways to work this, including upping the number of visible rows per page, etc...
You can create a dataitem in a query where you can determine whether your checkbox should be checked or not. In the design of your list on the report page you can render a HTMLItem within the list, and base the HTMLItem on a DataItem. Your HTML must than be something like
<input type="checkbox" value="""+ [DataItemValueToPass] + """ " + [DataItemCheckedOrNot] ></input>