typically when you refer to an object you would use a selector like this :
$(this).jqueryfunction()
if u would need an element within this object you would use :
$('typicalselector',this).jqueryfunction()
My question is how would I use jquery selector to select various objects something along the lines of :
($(this.fistobject) and $(this.secondObject)).jqueryfunction()
thanks for your help
When you wrap an object or run a selector, you get a set or collection. So this would return a collection and then add another collection to it, and then perform jqueryfunction() to the combined set:
$('someSelector').add('anotherSelector').jqueryfunction()
This works with contexts, too.
You can use a comma, just like in CSS. I.e.
$('div, a', this)
would select all div and a elements in 'this'.
I dont think you can work jQuery on Javascript objects, they should be jQuery-wrapped HTML Elements.
You can use multiple selectors like this:
$(selector1, selector2, ..., selectorn).jqueryfunction();
Related
I have created a extjs form which is divided into 2 parts using column layout and have almost 10-15 input elements in it. How can i disable all these input elements at a time depending on a condition. Currently i have created a function which fetchs all the components in a form and using ext.each loop through each element to disable them
Here is the function that i use
function prepare_form_view(form){
var f=Ext.getCmp(form);
var els=f.query('component');
Ext.each(els,function(o){
var xtype=o.getXType();
if(xtype=='textfield'||xtype=='combobox'||xtype=='datefield'||xtype=='textareafield'||xtype=='button'){
o.disabledCls='myDisabledClass';
o.disable();
}
});
}
Is there any alternative way so that I can disable all elements without looping through each and every elements. I want to use this function with other forms too. I looking for something like 'setFieldDefult' function.
If you are using FormPanel in ExtJs 4.x this is what you are looking for -
yourFormPanel.getForm().applyToFields({disabled:true});
The getForm() method returns the Ext.form.Basic object, with this class, you also could access to all the fields on this form with getFields(), then you could iterator all the fields to do anything.
Hope this helps and good luck:-)
What about panel's disable/enable method? This seems much easier.
panel.disable();
panel.enable();
Here is a suggestion.. Since, you say your form is divided into two parts why don't you put them in a FieldSet ? You can disable the fieldset as a whole with one method ie, setDisabled.
This will avoid the looping of components and disabling / enabling them one after the another.
You could use the cascade function of the form panel which is the ExtJs way to to do it but if you check the source code of the cascade function you will see that it uses a for loop also. The only benifit of using the cascade function is that it will work also for forms with nested panels. I think that your implementation will not work properly a case like that.
Does anyone know of an easy way, using jQuery, to select all <select> elements whose val() attribute yields a certain value?
I'm trying to do some validation logic and would like to just select all those elements with a single selector, then apply a warning class to each of their parents. This I know how to do once I select all the elements, but I didn't see a selector that handles this case.
Am I going to have to select all of the <select> elements into a selector, then iterate through them and check each of their values? I was hoping there would be a simpler way.
Thanks.
Why doesn't select[value=x] work? Well firstly because <select> doesn't actually have a value attribute. There is not a single value of a select box: there may be no selected options (there shouldn't normally be, but there can be in at least IE), and, in a <select multiple>, there can be any number of selected options.
Even input[value=x] doesn't work, even though <input> does have a value attribute. Well, it does work, it just doesn't do what you think. It fetches the value of the value="..." attribute in the HTML, not the current value you have entered into the form. The value="..." attribute actually corresponds to the defaultValue property and not value.
Similarly, option[value=x][selected] doesn't work because it is checking the <option selected> attribute from the HTML source (selected attribute -> defaultSelected property) and not the current selectedness of the option (selected property not attribute) - which might have changed since the page was loaded.
Except in IE, which gets the value, selected etc form attributes wrong.
Except (again): Tesserex's example may seem to work, and the reason for that is that that it's using a non-standard jQuery-specific selector, :has. This causes the native querySelectorAll methods of modern browsers to fail, and consequently jQuery falls back to its own (native JavaScript, slow) selector engine instead. This selector engine has a bug where it confuses properties for attributes, allowing [value=x] to do what you expected, and not fail like it should! (Update: this is probably no longer the case in newer jQuery versions.)
Summary: form field state checking and selectors don't mix. Apart from these issues, you also have to worry about escaping issues - for example, what if the value you want to test against contains quotes or square brackets?
So instead, yes, you should check it manually. For example using a filter:
$('select').filter(function() {
return $(this).val()==='the target value';
}).parent().addClass('warning');
(There is a value property in HTML5 and supported by modern browsers, that when you read it gives you the value of the first selected <option>. jQuery's val() is safe to use here because it provides the same method of getting the first selected option even on browsers that don't support this.)
The existing answers don't work on select tags, but I found something that does. Ask for a select that has a selected option.
$("select:has(option[value=blah]:selected)")
You can use :
$("select[value=X]");
where X is the value against which you want to check the select's value.
Attribute selectors Is what you're looking for I believe.
Something like $+('element[attribute="value"]')
See also:
*= anywhere
^= starts with
$= ends with
~= contains word
etc.
You can create a change event that puts the value in a custom attribute on the select element whenever the value changes. You can then use a simple selector to find all of the select elements that have that value. For example:
$("select").on("change", function (e) {
var $select = $(e.currentTarget);
$select.attr("select-value", $select.val());
});
And then you can do this:
var $matches = $("select[select-value='" + searchVal + "']");
$matches will have all of your matching selects.
This is a lot easier than having to iterate through elements. Remember to set select-value to the initial value when rendering the page so you don't need to trigger a change event for each select so the select-value is set.
In jquery is it possible to access a select element by simply using the div or span id plus the "select" selector? I ask because i have a series of auto-generated forms meaning I can't assign an id to the form elements plus the names are weird like "w24", I'd like to access a form element specifically a select using the surrounding span id and "select" selector example:
$("#hiv_care select").attr("disabled",true);
I've tried this but it doesn't work, forcing me to explicitly use the dropdown name.
Seems I was using the wrong div id. SLaks thanks for the link to jsfiddle.net it exposed my ways and is really helping me with testing out my jquery code.
I'm using an API that returns a JQuery Object which is a reference to a DIV container. I know my structure inside of the DIV container. I basically need to read some attributes from the first .
I've tried chaining the standard selectors off of my object but I get an error.
XML filter is applied to non-XML value ({selector:"div.panes > div.slice(0,1)", context:({}), 0:({}), length:1})
[Break on this error] var svideo = $(api.getCurrentPane()).('a').get(0);
Change your code to use .find() when you're going for descendant elements, like this for the DOM element reference directly:
$(api.getCurrentPane()).find('a').get(0)
//or..
$(api.getCurrentPane()).find('a')[0]
or if you want a jQuery object...
$(api.getCurrentPane()).find('a:first')
//or..
$(api.getCurrentPane()).find('a:eq(0)')
//or..
$(api.getCurrentPane()).find('a').eq(0)
$(this+"p").slideDown("slow");
$(this)+$("p").slideDown("slow");
$("this+p").slideDown("slow");
does not work.
Yeah, your syntax is bad. You should use the jQuery Sibling function:
$(this).siblings().find("p").slideDown("slow");
The jQuery API site is awesome for looking stuff like this up, I rely on it nearly daily. I'd keep an eye on it.
Next.
$(this).next("p").slideDown("slow")
Make sure that the "p" element is directly adjacent, though. Otherwise you'll want to use nextAll.
jQuery have not seemed to apply this? Possibly the syntax we are trying to use is incorrect.
next() can only select elements with an ID or Class - Not just a naked dom element as expected.
Instead use. > means select first level decends only.
$('body > div').hide();
But this gives the exact same result
$('body').children('div').hide();
But,
Next
$('body + div').hide();
and
Previous
$('body ~ div').hide();
Do not seem to work as expected? But jQuery use it as example for CSS selection...
Possibly there is a complex syntax to achieve this but I could not figure it out...