I am a front-end designer and developer with limited JS and jQuery experience. I always know I could learn more, but time has never allowed for that (I could also be using this as an excuse. ; ) Nonetheless, I have an issue on a website I'm currently developing that I need some JS/jQuery help on.
https://dl.dropboxusercontent.com/u/63777185/screenshot.png
This image represents subproducts on a product page. When a user opens the selection box and selects an option, it doesn't automatically check the checkbox. I was able to find something here on StackOverflow that worked with minor tweaks, but the problem comes when there is more than one product. The script that I was using selected all the checkboxes instead of the unique one that I needed.
Another problem is that this code is dynamically generated, so I don't control the output. So, I thought the best way to tackle this was to do addClass to the elements I needed, with an integer to make it unique (since they need to be unique). From there, I didn't know how to get the two pieces of code to work together. This is horribly wrong and you're free to laugh, but this is what I have:
<script>
$(function(){
$('select').each(function(i,j) {
$(this).addClass('selection'+i);
});
$('input').each(function(i,j) {
$(this).addClass('check'+i);
});
$('.selection'+i).change(function() {
var selected = $('select option:selected');
if (selected.val() == "null") {
$('.check'+i).prop('checked', false);
}
else {
$('.check'+i).prop('checked', true);
}
});
});
</script>
Any help is greatly appreciated! : )
Related
I'm fairly new to JS and am trying to write my own library using this blog post, and would like a hand. (Apologies if this is too vague for an SO question)
I'm trying to write a function that shows or hides a queried element based on the status of a queried checkbox (and another for a radio button if I can't do it in one method) on a form.
So I'm looking to end up with something like this:
$(divId).checkToggle(checkBoxId);
So the div will start as hidden. When the checkbox is clicked, the div will toggle to visible. When the checkbox is unchecked, I'd like the div to hide again and any input fields inside it to be cleared (the probably will be only one input field).
I know that this function isn't really going to be very combine-able or reusable, but I would use it so often for just that one thing that I'm going to overlook it.
Okay, enough preamble. Here's what I have so far.
Could I have some suggestions on how to change/finish my checkToggle method? Thanks!
This worked for me:
$(document).ready(function(){
$('#checkbox1').change(function() {
if($(this).attr('checked')) {
$("#myDiv").slideDown(1000);
}
else
{
$('#myDiv').slideUp(1000);
}
});
});
I am looking for JavaScript to hide a webpart based on a field value in a display form.
Scenario: I have added 2 webparts to display form from different lists and I need to hide webpart 2 based on webpart 1's value.
Example: Webpart 1 has status = "Approved" and need to hide the webpart 2 if not equal to "Approved".
There are a couple ways you can go about this, and it really depends on exactly what you are doing. You haven't given us a ton of information to go with.
The JavaScript itself to do what you are looking for is pretty simple. You could do it with something like this:
$(document).ready(function () {
$("#theButton").click(function () {
var txtInput = $("#txtInput").val();
if (txtInput == "Approved") {
$("#two").show();
} else {
$("#two").hide();
}
});
});
See it in action: http://jsfiddle.net/tadams88/6Mmb9/
Instead of making it a click function you could just have it run on document.ready.
The other way that I see you could go about this is using connected web parts. You can read up on that here: http://msdn.microsoft.com/en-us/library/ms469765(v=office.14).aspx
Connected web parts lets one web part pass a value to another, which could mean the first web part could tell the second whether or not to display.
I'm building a simple asp page on which I have list of peoples with checkbox on left of every name.
I've managed to create a simple jQuery script that allows hiding and showing rows of table based on input:
http://jsfiddle.net/Tq97v/ (first part)
As You can see I can enter part of name and then specific row are hidden.
Using red "x" I can uncheck all checkboxes.
What I'm trying to do now is to change that static red "x" into tristate checkbox.
Don't have idea how to even start.
Do I must add change listener to every checkbox in my list?
Second thing - how to create multiple instances of the same "plugin" on site.
Right now I'm identifying input by it, but it would be nice to call function with that input as param, and it would fine table after that input and create necessary logic.
This way I could call function multiple times on page to have more than one list.
I'm not asking for whole solution (of course it is always welcome :) ) but what I need is idea how to accomplish this in efficient way and as optimized as possible, because sometimes my list has 500+ elements.
P.S. don't look at HTML code, it is ASP generated.
I found this plugin: https://github.com/bcollins/jquery.tristate, but I have no idea how to use it with my list.
UPDATE:
I've managed to turn my code into functions, but right now I must call 3 functions for every list.
Here is my updated code: http://jsfiddle.net/65MEV/4/
How can I change it to one function? Will it be better?
This is my updated code. Still thinking about way of doing that Indeterminate Checkbox instead of my remove image.
UPDATE2
I build working code :)
http://jsfiddle.net/65MEV/9/
But I would like to improve it as much as possible.
Any suggestions are welcome!
A tristate checkbox is like the Three-Portal Device: an illusion.
What you actually want is to make the checkbox indeterminate (by setting the property of the same name to true). To implement this, you will need a change (or click) handler on each checkbox, then you'll need to check if all of them are in the same state, and if not then you set the indeterminate property. It's a hassle, really, because you rarely see indeterminate checkboxes and so most users don't know what to do with them. To be avoided, if possible.
To create multiple instances of the same plugin access elements relatively to an other element.
For example: in your case instead of keeping the item in a jQuery object var $tableRows = $('table.myList tr'); access them in the event.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
and you only have your actual list.
And for the tree state checkbox you don t need a plugin just add a button or link and every click check it status you can keep the status by jQuery data and change the element image according to this data.
I need to create a form which has 2(Yes/NO) options and if the user clicks one of the option then he should get a collapsing subform with more specifics regarding to that particular selection. If he selects other option then he should get another collapsing subform with related info. I know that we have to use JavaScript or Jquery(to get the collapsing effect), but I am new to both. Any simple tutorials or info for beginners is greatly appreciated.
PS: I have seen many questions for this requirement but the fact is me being a beginner makes it tough to understand them.
Thanks,
Basically, you are going to need to wrap the two different subforms in divs and then use the jQuery .show() and .hide() functions to show and hide them when the right radio button is clicked.
Here is a useful tutorial on showing and hiding: http://papermashup.com/simple-jquery-showhide-div/
EDIT: More specific answer for user..
$(document).ready(function(){
$("#check-box").click( function(){
if( $(this).is(':checked')) {
$('#div1').show();
} else {
$('#div1').hide();
}
});
});
You have to render the entire form and hide all the subforms, each with a different ID. Depending on the button/choice pressed, you call $.show() on the corresponding div with code like this:
$("#choice1_subform").click(function(){
$("#div1").show();
});
I am trying to make a very simple dynamic form. I am using Rails 3.1 and formtastic. Basically, I want to change a couple of fields based on a radio button.
It would look something like..
What kind of a shape are you making?
(Radio Button with a choice of square or rectangle)
If square is selected one new field for size is displayed. If rectangle is selected two fields are displayed for size.
The table will actually have only one size column, so the model will munge the potentially two fields into one before the ultimately hit the database (i think, still working on this issue as well)
Anyway, it is my understanding that I would need to use javascript in order to change the form. I am pretty javascript illiterate and really don't understand how to use it with formtastic. Any pointers would help.
Thanks!
Yes, you should use js to do that. If you're new to js don't hesitate and learn jQuery, it's becoming sort of js standard for rails now.
To do what you want you should display both size fields in your view and show/hide second field depending on radio values. It can be something like that:
$(function() {
var $radios = $("input[name=radioName]");
var $size2 = $("#size_field_2");
function toggleSizeField() {
$size2.toggle($radios.filter(":checked").val() == 0);
}
$radios.click(toggleSizeField);
toggleSizeField();
});