Programmatically change a select though option event - javascript

Ok. No one is listening to me, so I'm going to try rephrasing the question by showing you WORKING CODE that does what I want, but not in the way that I want.
NOTE: I am not asking how to do this. I am asking more like...what's the best way...
// First I need the proper value
$select.find("option:selected").prop("selected", false);
$select.find("option:first").prop("selected", true);
// Now I need the event to fire
$select.trigger("change");
I'd like to do this in one line though...like the last line of code on this question.
Please don't tell me anything that you would expect someone that's been doing front end stuff for 10 years to know.
ORIGINAL - DONT ANSWER BASED ON THE BELOW
Doesn't really have to be jQuery, but I'm using it so it might as well be.
Basically, what I'd like to do is say
var $option = $select.find("option:first");
$option.trigger("click");
But that doesn't really work. I mean, it sort of does, but it doesn't seem to also fire the change event on the select...so I'm thinking I should actually be doing something more like...
$select.triggerEvent(new Event({
type : "change",
target : $option
});
But that can't be right.

Use .val() to change the value of a select dropdown:
$select.val($select.find('option:first').val());

You can use the .attr method
var $option = $select.find("option:first");
$option.attr('selected', true);
OR use the .val() for the select
var $option = $select.find("option:first").val();
$select.val($option);

You can use the prop() jQuery method as follows :
$select.find('option:first').prop('selected',true);
This is semantically the right way to set an option as selected, it's also seems to be right way to set properties in jQuery since 1.6.
If you are using jQuery prior to 1.6, you should do that instead :
$select.find('option:first').attr('selected',true);
If you need to trigger the change event on your select, you can do this :
$select.find('option:first').prop('selected',true);
$select.change();
Here is a working example
If you need to do it one line, you can extend jQuery in some ways (not tested code) :
;(function($){
$.fn.changeToOption = function(n) {
var option;
option = this.find('option').eq(n);
if (option.prop('selected',true)) {
this.change();
}
return this;
}
})(jQuery)
and then simply :
$select.changeToOption(0);

Related

Add multiple elements to a single var and detect if any of those are clicked?

I have a page that can have one of three possible elements. I would like to assign whatever element exists to a var and then check if the var is clicked.
I tried using the add(), but it has confused me:
var testingVar = $('#element-one').find('.object').add('#element-two').find('.object').add('#element-three').find('.object');
$(testingVar ).click(function() {
alert('works');
});
It seems to me that the add() overwrites the previous add()? if I am on a page that has #element-three, it works, if on a page with element-one or element-two, it doesn't. If I change the var to
var testingVar = $('#element-one').find('.object');
Then a page with element-one works.
Can someone help me understand how to use the add() properly in this case?
Thanks
I think what you're looking for is this:
$('#element-one .object').add('#element-two .object').add('#element-three .object');
.find() returns a new jquery object.
However, I think this would be easier in this case:
$('#element-one .object, #element-two .object, #element-three .object');
Or even easier, if you can change markup, is to give each element you're currently selecting by id a common class, and do this:
$('.common-class .object')

Control textbox with JavaScript by adding a string to dynamic id

I don't know why I am struggling with this. Should I be taking a different approach?
I have a form being generated in vb based off a database and then I am trying simply to make a text-box be disabled unless you check a checkbox.
Here is what I have so far. It needs to be dynamic (what I have commented out).
I can't seem to get it to work. The difficult part is referencing
document.form1.el.id.toString() + "_other".disabled
disabled is a binary property, not an attrbute.
You must use disabled='disabled' or remove the attribute to enable the element. It is not a true/false value.
Here is one way:
http://jsfiddle.net/C2WaU/1/
If I understand you correct, this should work for you:
function enable_text(el) {
var textbox_name = el.id.toString() + "_other";
document.getElementById(textbox_name).disabled =
(el.checked) ? "" : "disabled";
}​
A working example: http://jsfiddle.net/ve9Gz/3/

jQuery load issue. Don't know how to approach this AJAX call

$("[littleBox]").load("ajax.php?eid="+$(this).attr("littlebox"));
the $(this).attr("little box") portion of the code returns undefined.
I'm trying to get the individual attribute of the initial $("[littleBox]").
this particular line of code is called as the soon as the document is ready.
when I put predefined values, such as
$("[littleBox]").load("ajax.php?eid=1");
It works as expected. Unfortunately, I need it to load specific content based on that element's attribute. Any idea how to make this work?
Loop through all items with proper this:
$("[littleBox]").each(function() {
var $this = $(this)
$this.load("ajax.php?eid="+ $this.attr("littlebox"));
});
this will not refer to $("[littleBox]") in that context, you'll have to repeat the selector - or select the element already and re-use it:
var $box = $("[littleBox]");
$box.load("ajax.php?eid=" + $box.attr("littlebox"));
post yout html that cotnain attr "little box" in it.
is it like
<a attr="little box" id="test">test<a/>
then it work like
$('#test').click(function(){
alert($(this).attr('little box'));
});

Find Data in jquery

I'm currently working on my Stretchbox Plugin and trying to optimize and shorten the code.
I've used the jquery data method to attach data to certain divs.
For instance:
$('#thumbs div:last-child').data('active', true)
which sets a certain div to the active state.
If i know want to find this div, i have to check each .thumb class
in order to find it:
$('.thumb').each(function() {
if($(this).data('active')){
//Do Stuff
}
}
This works fine, but I'm quite sure there should be a much easier way, since checking up every single .thumb div(out of 10-30) will take some performance too.
$(".thumb[data-active='true']");
As far as I know there is no other way to do it. You could, however, create a new jQuery selector. I was going to give it a shot, but it looks like someone has already thought of it (scroll down to "Querying element data").
It will allow you to do things like this:
$(':data(active)'); //Selects all elements with "active" data
It probably won't be faster, but it might make your code neater!
Am I missing something? Just save it in a variable:
jQuery(function($){
var activeDiv = [];
$('#selector').click(function(){
activeDiv = $('#thumbs div:last-child')
...
});
$('#executor').click(function() {
activeDiv.each(function() {
...
});
}
});

Search submit button in all forms with textareas with jquery

I'm working on a Firefox-plugin which searches a webpage for all textareas and places a warning before the submit button.
my code looks like this
var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document).each(function() {
var form = $(this, window.content.document).parents('form:first');
$(form, window.content.document).children('input[type=submit]').each(function() {
form.insertBefore(submitWarning, this);
});
});
if i search all submits with $('input[type=submit]'.each it works fine but since i added the thing with the textarea and the form:first i got problems (nothing happens)
p.s. i use the window.content.document thingy because its a ff-plugin and it won't work nothing without it
You need to change it a bit, like this:
var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document)
.closest('form')
.find('input[type=submit]')
.before(submitWarning);
The argument syntax is $(selector, context), when finding the form, first there's .closest() which makes this easier, also when you have an element, you can just use $(this) inside it's .each(), no need to search for it again. Also, you can use .before() to make it easier :)
The :has() selector is the best choice for me. Get rid of your extensive code and use this instead.
var buttons = $("form:has(textarea) input[type=submit]", window.content.document);
$("<div>").html("Fancy Message").insertBefore(buttons);
Try var form = $(this, window.content.document).closest('form');. Not sure if that's the ticket, but it's the first thing off my head.

Categories