YUI Checkbox Button - retrieving the checked value - javascript

(I've tried posting this on YUI message group but without any luck)
Can anyone tell me how to retrieve the checked state of a yui Button? I've tried by creating the Button in code, which is then outputted as a HTML button but this only changes the title attribute.
When I use checkboxes instead, none of the checkboxes are checked (when iterating through them with jQuery).
Is there an easier way of doing it? Say with the 3.0 Node API, or Element?
EDIT:
To clarify how this problem came about, I'm using the YUI ASP.NET controls. They add controls to the page like this
Sys.Application.add_init(function() { $create(YUIAspNet.Button, {"ButtonID":"yuiMyButton_btn","ButtonName":"yuiMyButton$btn","TabIndex":0,"ButtonType":"checkbox","Text":"Technology"}, null, null, $get("yuiMyButton"));});
So as you can see, finding all buttons is not as simple as I'd like it to have been.

Sorry are you talking about checkbox buttons? Use:
myButton.get("checked")
where myButton is an instance of YAHOO.widget.Button.

Chris, I am the starter of YUI ASP.NET project. I watch the YUI mailing list regularly, I must of missed your question.
I have a more general answer for you and anyone else having the problem and ending up reading this, not just for checkbox button, but for all controls.
On the client, you can have access to the YUI object by calling the .get_YUIControl() method on the custom wrapper client object, then you have the control over the original YUI object. The YUI documentation is very good, and you can find a good description for what you'd like to accomplish.

Related

How to achieve suggestions in input field

Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.
There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.
This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.
Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.

Selectize Capybara acceptance testing

I am looking for some assistance with acceptance testing of the Selectize jQuery plugin using the Capybara test framework.
We are having a problem with the way Selectize lays out the HTML it generates, there is no definitive link between the select dropdown and the values contained within the dropdown
As you can see from my jsfiddle here : http://jsfiddle.net/et4t20wz/
$('.test').selectize({
create: false,
dropdownParent: 'body'
});
Viewing the source code, the containing div has the 3 selects within it and the values for the dropdown are contained within the body tag.
I need a way for our test team to be able to create a 1 - 1 connection between the two elements. So far we have come up with a rather weak connection, as we know the first Selectize values will be stored in the first div.selectize-dropdown we can use this logic to map to the first div.selectize-control
This is rather flimsy and probably not the best approach, but the best we can come up with thus far. We have found a few solutions on the web, but sadly they appear to be out dated or reliant on different DOM structures.
For example: http://climber2002.github.io/blog/2014/09/22/capybara-integration-tests-with-jquery-selectize/
Hopefully we are not the only ones to have come in contact with this problem and someone can offer some assistance / advice
Thanks in advance.
I believe the link is just positional in the html, the two divs that make up a a selectize control are inserted immediately after the select element that is converted. Therefore if you know the id of the original select you should be able to get the associated divs using the sibling selectors
page.find(:css, '#test + div.selectize-control + div.selectize-dropdown')
or
page.first(:css, '#test ~ div.selectize-dropdown')
if you've already clicked on the div.selective-control (or maybe the input in it) then the elements in the .selectize-dropdown should be visible and you can click on them
So we managed to fix this problem using a solution I found here :
Capybara integration tests with jquery.selectize
The code didn't really work, however. So I ended up using this script I wrote.
var selectize = jQuery('#key').selectize()[0].selectize;
jQuery(selectize.setValue(selectize.search('#value').items[0].id));

asp.net GetElementByid().value element/property not available

Here's another one that's got me ripping what's left of my hair out.
My latest asp.net page is something I just threw together for an in-house database tool. It uses the standard VS 2010 design template, which means it uses the site.master page. I mention this because it may be relevant to my problem.
I'm using asp:textbox controls instead of input type="text". When one textbox 'blurs,' I need to run a sub in code-behind that will do a database lookup based on the information typed in the textbox.
Everything I see about this is that I need to add a asp:hiddenfield to trigger the code-behind event to do the lookup. So I use document.GetElementById method in a JavaScript script to set the value in the hidden field. What it's supposed to do is: document.GetElementById('HiddenInfo').value = "yada-yada".
My problem is that the VS development environment doesn't recognize the .value property for GetElelmentById command. For example, as is its wont, VS will give code hints as you type. When I get to where I want to insert the .value parameter, it doesn't show up on the list of suggestions. See illustration:
As you can see, typing the v doesn't bring up the .value parameter.
I've tried getting it by ClientID and by using jquery, and nothing works. The crazy thing is that I have done this before with anther web page I developed, but the only difference is that one did not have a site.master page.
I've spent hours trying to find the answer online, and nothing is quite exactly the same as my problem.
Any ideas?
Thanks!
Well that's an asp .net element, so your going to have to get its clientid I believe. Here it is in jquery:
$('#<%=HiddenInfo.ClientID %>').val();
Hours and hours later, I finally found the answer. In the JavaScript function that changes the value of the HiddenInfo field, one line is added that (I guess) forces a postback, which then fires the _ValueChanged event in code behind:
<script language="javascript" type="text/javascript">
function CheckCC() {
document.getElementById('HiddenInfo').value="YES";
<%= ClientScript.GetPostBackEventReference(HiddenInfo, "") %>;
}
I dug up the answer here.
Seems like a pretty obscure solution.
The odd thing is that in a previous asp.net design of mine, this wasn't necessary. That's what was really confusing me, and I still don't understand it. But at least I can move forward now.
Thanks everyone for your suggestions.

Checkbox tree implementation - get selected checkboxes

I need to implement a Checkbox tree and I came across this component called jstree. It is a jQuery component and unfortunately I have no experience with Jquery. I followed the documentation and I have implemented my checkbox tree. The problem is with finding the selected checkboxes upon some event,say form submit. The API says,.get_checked ( context ), .get_unchecked ( context ).
But I am not sure on how to use this. In the sense, whichobj.getChecked()? And what is the context here? Can someone care to throw some light on this by giving an example ?
Also,is there any other non-jquery components for this?
Thanks!!
Re: any non-jquery components for this--
Yes, use the YUI Treeview with checkboxes
YUI is industrial strength (it's used on the Yahoo products), well documented, open source and a supportive community.

How to show/hide selected object like div?

So i'm trying out MVC after only playing with it some time ago.
Need to find the best way to selectively show and hide sections (divs, etc) on clicking or changing a value of a control, but not having to post back, i.e. javascript?
Any suggestions.
Use jQuery. You can use a jQuery Event to detect a click and then hide or show divs.
So, You have a button called "HideDiv" and "DivToHide" is the div you wish to hide.
$("#HideDiv").click(function() {
$("#divToHide").hide();
};
It's that easy. Can't really go in-depth here but check out their tutorials: http://docs.jquery.com/Tutorials or browse this site: http://www.learningjquery.com/category/levels/beginner
jQuery actually comes with ASP.Net MVC, check the scripts folder of a new MVC project and you'll see it in there. This site using jQuery and MVC :) So your browsing a sample of what is possible with it
You can use jQuery. It is included with the standard MVC project template.
$("#myButtonId").click(function () {
$("#myDivId").toggle();
});
See more at the jQuery docs for toggle.
You can do the same way as you are doing it with normal ASP.NET application using JavaScript. I think JavaScript is best as its fast and works on client-side.
If you are having a specific requirement then please put the specific requirement here.
You can use jQuery or MooTools if you want some animation.

Categories

Resources