We Keep Coding

Jquery $('input[name=""]').change(function WILL NOT FIRE in Chrome unless there is an uncaught error after it

So, here's a script that I've written to make some inputs dependent on an affirmative answer from another input. In this case, the 'parent' input is a radio button.
You can see that it hides parent divs of inputs when the document is ready, and then waits for the pertinent option to be changed before firing the logic.
If you'll look at the comment near the bottom of the javascript, you'll see what's been stumping me. If I remove the if statement, the change function does not fire. If I set the variable so that there is not an error logged in the console, then the change event does not fire.
If I change the jquery selector to $('select').change... the event fires, but obviously won't work on a radio button. Changing it to $('input').change... also fails.
<script type="text/javascript"><!--
$(function(ready){
$('#input-option247').parent().hide();
$('#input-option248').parent().hide();
$('#input-option249').parent().hide();
$('#input-option250').parent().hide();
$('#input-quantity').attr('type', 'hidden');
$('#input-quantity').parent().hide();
$('input[name="option\\[230\\]"]').change(function() {
if (this.value == '21') { //If yes, display dependent options
$('#input-option247').parent().show().addClass('required');
$('#input-option248').parent().show().addClass('required');
$('#input-option249').parent().show().addClass('required');
$('#input-option250').parent().show().addClass('required');
} else if (this.value == '22') { //If no, hide dependent options
$('#input-option247').parent().hide().removeClass('required');
$('#input-option248').parent().hide().removeClass('required');
$('#input-option249').parent().hide().removeClass('required');
$('#input-option250').parent().hide().removeClass('required');
}
});
//I don't know why this is necessary, but the input.change() event WILL NOT FIRE unless it's present. If I set the variable, then it breaks the change function above. If it's not here, it breaks the change function above. I'm stumped.
if(poop){}
});//--></script>
I'm really hoping that someone will see something rather obvious that my tired brain won't see. This is such a simple script, and I'm pulling my hair out over what seems like a rather annoying bug.

If you selector has special characters you need to use \\ before those characters.
$('input[name="option[230]"]')
should be
$('input[name="option\\[230\\]"]')
See http://api.jquery.com/category/selectors/

This may or may not be a good answer, but I managed to get the problem solved. I have another script on the page that is firing on the change event using this selector: $('select[name^="option"], input[name^="option"]').change(function() {
My best guess is that both functions cannot fire using a single change event from the same element. I moved the functional part of the code above to be within the second script, and it seems to be working as expected. If anyone wishes to contribute an answer that explains this behavior, I will accept it.

How to remove() and undo remove() on page width conditional ? I don't need a hide or toggle

I'm using select2 which takes in rails instance variables. Due to the design layout, I can't just scale down the original select2 input. I have to create another.
The problem: A rails partial including the logic for the select2 interferes with the logic I need for the mobile select2 feature. So, it needs to not exist, not simply to be hidden (display: none) , etc..
I was able to get the mobile to work by using remove() on the original partial, but how can I get it back. Maybe something with a page-width conditional, but I'm not sure how that would work.
this is the element / render I neeed to have removed then to have it 'un-removed': (haml markup)
.divider-row
.row-border.vOne
#vCompare
= render 'compare', :categories => #categories, :v_friends => #v_friends
my JS:
if (screen.width < 760){
$('#vCompare').remove();
}
how would I get this information back, when the screen size was over 760? append?
Im trying to use detach and appendTo() as some have suggested below:
$('.compare-searchM').on('change', function () {
$('#vCompare').detach();
})
$(window).resize(function() {
$('#vCompare').appendTo($('#vAppend'));
sizing();
});
haml / markup :
.row-border
#vAppend
#vCompare
= render 'compare', :categories => #categories,
the detach is working, but I must not be understanding something with appendto()

Instead of using .remove() you can use .detach() and store the jquery object in some other variable, like
$vCompare = $('#vCompare').detach();
in your media queries, Later you can use this depending upon your media queries. for more info look .detach() | jQuery. hope this would help you.

When you add the item to the page, try storing it as a variable first and then adding it from there, somewhat like this:
var vCompare = $("<div/>",{id:"vCompare"});
vCompare.appendTo("body");
The div object will be stored in the variable vCompare, so you can still remove it with .remove();:
$('#vCompare').remove();
And then add it back later with the .appendTo(); line seen in the first code snippet.
Hope this helps!

Yes, you should use append here. But before you should get proper position from where you removing the element. You can do it via .index()
So, when you want to restore removed element, use .before() on the found by index element.
If lists, or whatever, have a big difference between mobile and desktop, I'd prefer to create two lists, one of which is shown for mobile and another for desktop.

Disable Jquery UI widget completely

How do I do such a thing? I need to disable the widget completely, meaning that all of the instances should be disabled and NO MORE instances can be created after the disabling. I tried searching, but nothing comes up.
Will appreciate any help.
EDIT:
A more lively example.
Say, I have three instances of my widget placed on three elements. Then I want to turn my widget off. I invoke a static method turnOff, which leads to
a) all working instances to be disabled
b) prohibit any other instances of that widget to be created if they are later called via ajax i.e.
Then I want it to work again, so i invoke a turnOn().
My widget is a hint pugin, so if the user switches hints off, they should be switched off everywhere, and there are places in the app where hinted parts of the page are still being loaded asynchronosly.
That's pretty much what I need to do.

The answer depends on if your widget is obvious when not active -- for example if it's a 'hint' type tooltip that shows on hover then all you need to do is not show the tool tip when it's inactive. However if it also adds formatting to show where the hints are you need to undo that as well.
Let's take the simple case first -- suppose we have a simple widget filler that just adds a class (filled) when the mouse is over the element. Then just have a variable in global scope:
enableFiller = true;
and then check that in your widget:
$.widget( "spacedog.filler", {
_create: function() {
var progress = this.options.value + "%";
this.element.hover(
function() {
if (enableFiller) {
$(this).addClass("filled");
}
},
function() {
$(this).removeClass("filled");
}
);
}
});
Fiddle.
Note that I don't check the flag in the removeClass because the widget might be disabled while the mouse is over a widget and you probably don't want the hover color to accidentally 'stick on'.
From there it's pretty easy to extend to the case where your widget alters the element even when off. I'll do the logic as pseudo-code:
When creating the widget add a base-widget class to the element (even if inactive)
If the widget is on add the active-widget class and do whatever is required
To turn off remove the active-widget class from all base widgets: $(".base-widget").removeClass('active-widget'). You might also need to do some other changes to all the elements -- but they're easy to find.
To turn on add the active-widget class back and adjust everything else
You can embed the turnOn/turnOff functionality into the widget, as long as it uses the global variable as the flag. See this answer for other options for storing the global: How to declare a global variable in JavaScript?
If you get stuck you could post (a simplified version) of your widget code and what you've tried so far and someone can probably help further.

Hiding TinyMCE with jQuery

I have a TinyMCE textarea inside of #container
When I use $('#container').hide() and then $('#container').show(), tinyMCE throws:
Cannot read property 'selection' of undefined
I'm using the jquery plugin, so this is how I set it up:
$('#container textarea').tinymce({ /* options */ });
What should I be doing differently?

The correct command to use here is
// editor_id is the id of your textarea and
// tinymce will use this id to uniquely identify this editor instance
editor_id = $("#container textarea").attr('id');
tinymce.get(editor_id).hide();
to make it visible again use
tinymce.get(editor_id).show();

This question is about hiding and showing tinymce editor but if anyone came here about removing and re-adding tinymce editor without error then my solution can work for them.
To remove existing tinymce editor and add new needs clearance of tinymce.EditorManager.editors array. This solution works in both cases : 1. If you have only one editor and you want to remove and add it again. 2. If you have multiple editors and you want to remove some special editor and add it again.
console.log(tinymce.EditorManager.editors);
This will give you a view of the array and exact index of you desired editor which you want to remove. For example one sample output of above console can be:
Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]
This is the output of the console when i have two tinymce editors on textareas : #textarea-1 and #textarea-2 Lets suppose I want to delete #textarea-2 and re-add it then it can be done as follows:
tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array
Then you can add it again simply using init:
tinymce.init({
selector:'#ts-textarea-2'
});
If you have only one textarea associated with tinymce editor lets say : #textarea-1 and you want to remove and re-initialize it then you can just empty tinymce.EditorManager.editors by :
tinymce.EditorManager.editors = [];
And then you can add using init command as explained above. Worked for me without any error.
I hope it helps

Instead of hiding it, try sending it off screen - something like:
$('#container').css('left', '-1000px');
EDIT/UPDATE:
You could also try removing TinyMCE from the textarea before you hide() the container, and then bring it back after you show(). But you'll need to give your textarea an #ID:
//To Enable
tinyMCE.execCommand('mceAddControl', false, $("#container textarea").attr('id'));
//To Disable
tinyMCE.execCommand('mceRemoveControl', false, $("#container textarea").attr('id'));

Apparently it was the animation. if I show()/hide() I'm fine, but when I try to animate in tinyMCE has an issue after I finish animating, possibly trying to set options once the textarea's display isn't none.

jquery ui.slider: add click event to display/hide handle

I am completely new to javascript and jquery. My programming knowledge is... nonexistent, I just started some days ago with some simple tasks like replacing a CSS class or toggling a div. So I want to apologize if I'm treading on someones toes by asking newbie-questions in here. But I hope that someone can help me and solve my problem.
I need to implement some sort of visual analog scale for a survey; ui.slider is perfect for that one. But I need the handle to be hidden by default. When the user clicks on the slider, the handle shall appear in the proper position. That should be fairly simple - at least I hope so - by just hiding the handle with CSS and changing it by a click event on the slider.
I use the following piece of code to wrap a normal div (a div is needed in my understanding to apply the jquery slider.js) to my input elements (they should be - at least visually - replaced by the slider) and pass the value of the slider to the input elements (needed for passing the values to a form). that works properly. (I do that instead of just putting a div in my DOM by default because I cannot influence some PHP scripts that will generate form elements of the survey and so on)
$(function () {
$.each($('.slider'),
function () {
obj = $(this);
obj.wrap('<div></div>');
obj.parent().slider({
change: function (event, ui) {
$('input', this).val(ui.value);
}
});
});
});
Hiding the slider-handle can be done by CSS as described above by changing style properties of a.ui-slider-handle. but when I add a normal click event to the slider (.ui-slider) that changes CSS properties of the handle, nothing happens. As far as my basic knowledge goes it should have something to do with the click event not working on generated DOM elements. Am I right with that one? And if yes: how can I solve this problem? Could someone provide me a piece of code for my function and explain it so I might comprehend what's exactly going on?
I read a tutorial about events on learningjquery.com but I have not made enough progresses the last few days since I started working with JS/jquery to comprehend the steps and translate it into my example/problem. And I am running out of time (I need this for a survey I have to make asap, that's why I hope someone could give me a hint so I can solve this little issue somehow).

Any reason you can't just include the show on the change event rather than a click? It's a bit cleaner code-wise rather than including a whole new event.
$(function() {
$('.slider').wrap('<div></div>').parent().slider({
change: function(event, ui) {
$('input', this).val(ui.value);
$('.ui-slider-handle').show();
}
});
});
Also, there was a bit of redundancy in the code - most jQuery functions return the object itself, so you can chain them. And you don't need that each function, since most jQuery functions also, when applied to a collection, run on all of them :)