I'm working on an ASP.Net webpage which will use the jQuery Dropdown Checklist (http://code.google.com/p/dropdown-check-list/). I'm fairly inexperienced with JavaScript and completely new to jQuery.
What I want to do is collect the values of the selected items every time a checkbox is checked/unchecked.
Here's what I have so far:
var values = "";
$("#s1").change(function () {
$("#s1").dropdownchecklist(function(selector) {
for (i = 0; i < selector.options.length; i++) {
if (selector.options[i].selected && (selector.options[i].value != "")) {
if (values != "") values += ",";
values += selector.options[i].value;
}
}
});
});
I think the problem is in the 3rd line, but I'm not sure exactly what is wrong.
If anyone could point me in the right direction, I'd appreciate it. Thanks in advance.
Response to zod...
Thanks that was pretty much exactly what I needed. However, I still have some kind of syntactic error. Here's my code:
var values = "";
$("#s1").change(function () {
$("#s1 option:selected").each(function () {
if (values != "") values += ",";
values += $(this).value();
});
alert(values);
});
When I run it, the jQuery Dropdown Checklist looks like a regular list, so I must still have something wrong.
This is somewhat off-topic, but are there any tools that make working with JavaScript and jQuery any easier? I've been spoiled working with Visual Studio and using its debugger and intellisense. Is there anything like that for JavaScript and jQuery?
Response to Ender...
Wow. I like your solution. Yeah, I tend to over-complicate things.
I'm not sure what I did wrong when I tried zod's solution, it probably also works, but I think I'll go with the simpler one.
Thanks for you help.
You don't need to get anywhere near as fancy as you are. Inside your .change() event, simply access the .val() of the select to get the values of the checked items. Like this:
$(function() {
$("#s1").dropdownchecklist();
$('#s1').change(function() {
alert($(this).val());
});
});
See a live demo here: http://jsfiddle.net/Ender/ZsMc4/
Did you try .change()
check this
http://api.jquery.com/change/
http://www.texotela.co.uk/code/jquery/select/
Related
I have researched my problem and tried many different solutions yet I can't seem to find my issue, I assume it has something to do with the way I am calling my variable since it says syntax issue.
When first loading my results page, all results are displayed with a select drop down above those results. What I want to do is when a user clicks on an option on my drop down select is to filter the results based on what they select.
$("#locale").on("change", function(){
for(i = 0; i < storeTitles.length; i++){
if(storeTitles[i].innerText != $("#locale > option:selected").text())
$(".store-item:not(:contains(" + storeTitles[i].innerText + "))").hide();
else
$(".store-item:contains('" + storeTitles[i].innerText + "')").show();
}
});
I have tried many different ways..filter() and using :not() and :contains() combined. My code seems to work when I hard code a value into my :not(contains()). Can anyone spot my syntax issue or suggest a better way to go about this?
You can try this instead
if(~$("#TextBox1").val().indexOf($("#TextBox2").val()){//Contains True}
In coffee script I'm trying to figure out if something is included in an array or not. But can't seem to figure out the correct syntax. Is there not a way to do this without have to iterate over them?
Thanks,
if $(this).val() is in ["needs_cover","comatose"]
$("#head_count").hide()
else
$("#head_count").show()
Just drop the is:
if $(this).val() in ["needs_cover","comatose"]
$("#head_count").hide()
else
$("#head_count").show()
That would translate to the following JavaScript:
var _ref;
if ((_ref = $(this).val()) === "needs_cover" || _ref === "comatose") {
$("#head_count").hide();
} else {
$("#head_count").show();
}
If this is a common use case, you could write a function, which would also allow you to write a routine that is a bit more compact as well, like so:
hideShowFn = (valSelector, hideShowElSelector, compareArr) ->
if $(valSelector).val() in compareArr then return $(hideShowElSelector).hide()
$(hideShowElSelector).show()
I prefer doing the above as it flattens the code a little bit. This is my preference.
You would call the function like so:
hideShowFn this, '#head_count', ['needs_cover', 'comatose']
I have this js code
elem=$(this);
var tester_names="";
tester_names=$("#release_tester_tokens").val();
alert(tester_names)
if (elem.attr('checked')==true)
**tester_names=tester_names+", "+ elem.attr("title");**
alert(elem.attr("title"))
alert(tester_names)
I want to have tester_names=tester_names+", "+ elem.attr("title"); to have the combination of testers_names (a,b,c,d,e) and elem.attr("title") (f) to become (a,b,c,d,e,f)
The alerts that I used is for debugging to see what values are stored in the variable.. They all store correctly, but they don't combine together when I call the bolded function... I just want to know why. I am using formtastic textarea instead of the normal textbox... do I have to adjust to that? Or maybe what the tester_names and elem.attr are outputting are of different type?
I tried it using this type of code (this is nearly the same with different variable names
function updateTextArea() {
var allVals = [];
$('.taglist :checked').each(function(i) {
allVals.push( $(this).val());
});
$('#video0_tags').val(allVals).attr('rows',allVals.length) ;
}
$(function() {
$('.taglist input').click(updateTextArea);
updateTextArea();
});
});
why does this add to checkbox values to the textarea perfectly whenever I check checkboxes when mine just outputs same results before and after using the starred function?
(I don't understand why ppl keep voting this down... its seems like a decent question after the first mishap and fix) :S
Use elem.attr('checked')=='checked' in if statement. There is no case elem.attr('checked')==true will be true. So the body of your if , will never be executed.
I have been using jQuery's find method and it's been very useful.
However, I came across an example where the find seemed to be duplicating things and not returning elements in the order they appeared in the document. (I'm not sure if find is supposed to do this - I doubt it).
However, it shouldn't have duplicates in the elements it finds and show the wrong order, surely?
Full example can be found here: jsFiddle - Notice how span[9] and span[10] are in the wrong order and duplicated.
Why is this the case?
Update
Updated so that output is written to document, please use new link above.
.find() returns elements in document order. More info here: http://docs.jquery.com/Release%3ajQuery_1.3.2
I think the anomaly has something to do with the wildcard selectors. Are those necessary? Removing them seems to resolve the issue.
you add unused * in your code, replace this find with your code:
$('#div1').find("*[class=w_line_" + i + "]").each(function () {
and have this, have good time;
I can´t find anything strange with the order.
$(document).ready(function() {
for (var i = 1; i <= 10; i++) {
console.log(i);
$('#div1').find("*[class*=w_line_" + i + "]").each(function() {
console.log(i, $(this));
});
}
});
This selector seems to return the elements in the same order as yours and I can´t see any duplicates.
$('#div1 *[class*=w_line_' + i + ']')
Ok guys/girls.
Below is some jQuery that runs in Firefox but no IE. I have no idea why it craps out in one and not the other.
Anyone??
function SwapTextAssetforPOS() {
$("*").each(function () {
if ($(this).children().length == 0) {
$(this).text($(this).text().replace('Assets', 'POS'));
$(this).text($(this).text().replace('Asset', 'POS'));
$(this).text($(this).text().replace('assets', 'POS'));
$(this).text($(this).text().replace('asset', 'POS'));
}
});
}
Sorry folks - the error that I get is:-
SCRIPT65535: Unexpected call to method or property access.
jquery-1.6.min.js, line 16 character 60352
EDIT:------------------------------------------------------------------------------------
Ok so an update - I removed the * selector and IE no longer blows up, my issue now is that I cant figure how to get it to do the replace on the element. I have the following code to ping up all the text elements in the object:
function SwapTextAssetforPOS() {
var containerElementByID = $("#assetDetailContents");
containerElementByID.children().children().each(function () {
var $this = $(this);
alert($this.text());
});
This chucks me up an alert for every bit of text, however some is contained within a table, some is within a span, and some is just there. I have no control over a majority of this stuff so my new question is how do I get the previous replace to work using this type of selector. -- I can believe how painful this is..
Cheers again
I see the problem in my IE browser. When you do the $("*").each... it takes every single element in the page (including title, script, etc). When you do .text(), looks like it fails for some elements in IE for which .text() doesn't make sense. Replace "*" for "div" and it should work for the divs for example.Maybe you could do something like if ($(this).text()) {$(this).text($(this).text().replace('Assets', 'POS'));} to make sure the text() is defined for that element.
Still, going through the whole DOM is overkill. Can you add a class to the elements that can have the text?, like class="replaceable" so you could just do a $(".replaceable").text(...
Ok folks - so firstly thanks for the help.
I have resolved the issue by cobbling a number of suggestions together and by doing a little bit of investigative work.
In a nutshell IE was crapping out when it ran up against an tag. I no not why but this is where it fell over every time.
function SwapTextAssetforPOS() {
var overlaycon = $("#jq-selectionHelper").find("*:not(img)"); //This line simply looks at the div surrounding the template and returns (to an array I believe) every element therein except for img tag
//as this breaks in IE when tying to do the replace text stuff below.
overlaycon.each(function () {
var $this = $(this);
if ($this.children().length == 0) {
$this.text($(this).text().replace('Assets', 'POS'));
$this.text($(this).text().replace('Asset', 'POS'));
$this.text($(this).text().replace('assets', 'POS'));
$this.text($(this).text().replace('asset', 'POS'));
}
});
}
This code runs and I believe is a lot more efficient than my original offering. Any further suggestions for performance re-factoring are welcome but thank the lord this is now working.
Thanks again for all the help.
Regards
This code has no problem as seen here . I tested in IE and FF both works fine
http://jsfiddle.net/wKWRC/
You should use F12 developer tool for IE and see what error you are getting that way others can know what exact problem is . You can debug script and see where you are getting error . IE is sensitive to javascript errors and its possible there is some error before you are calling this function .
http://msdn.microsoft.com/en-us/library/gg699336%28v=vs.85%29.aspx
Just a hunch but you might be running out of memory in IE.
First, using $('*') is never advisable, its better that you narrow it down with a selector like $('p').
Also, every time you call $(this) you create a new jQuery object, so if there are a lot of elements on your page you're making 9 objects every time.
The convention is to set $this = $(this) at the begining of the function so you only use one object.
function SwapTextAssetforPOS() {
$("*").each(function () {
var $this = $(this);
if ($this.children().length == 0) {
$this.text($this.text().replace('Assets', 'POS'));
$this.text($this.text().replace('Asset', 'POS'));
$this.text($this.text().replace('assets', 'POS'));
$this.text($this.text().replace('asset', 'POS'));
}
});
}
try it like this
for (var i = 0, replacements = ['Assets','assets','asset','Asset']; i < 4; i++)
$("*:contains('" + replacements[i] +"')").map(function() { this.innerHTML = this.innerHTML.replace(/asset(s){0,1}/igm, 'POS'); })