We Keep Coding

How can I get the name of the nav-tab that is parent to current element?

I do know how to get the name of nav-tab when it is shown, but I am trying to get the name of the tab of a child element when the child element is changed. Just getting the name of the last tab clicked/shown won't help. I am using asp.net MVC Razor and need to find out what changed on the page and on what tabs. The user technically could click tabs without changing anything. I tried doing something like this:
$('body').on('change', '.form-control', function () {
var tab = this.closest('nav-tab');
})
I have also tried:
$('body').on('change', '.form-control', function () {
var tab = this.closest('.nav-tab');
})
but that did not work. There may be a better way to accomplish what I need. Any assistance is greatly appreciated.

Have you looked through the DOM to see where its nested? I've had luck in tables just going up to the TR then doing a find with the class. Maybe this sample will help?
$(".ctxMenu li").click(function () {
var thisLink = $(this).closest("tr").find("input[id$='" + $(this).attr("data-action") + "']").attr("id");
if (thisLink != "undefined") {
$(this).closest("tr").find("input[id$='" + $(this).attr("data-action") + "']").click();
}
$(".ctxMenu").hide(100);
});
$(".jqSaveChangeDiv").change(function (e) {
$(this).closest("div").find(".jqQuickUpdate2").trigger("click");
console.log("Updated " + $(this).closest("div").find(".jqQuickUpdate2").attr("id"));
});

How to toggle a specific JavaScript function with a click?

We need to disable and re-enable with a click, a function which shows us the amount of characters within plenty of < pre >.
The function we use is this:
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function(){
$('pre').each(function(i){
var iCharacters = $(this).text().length;
$(this).prepend("<b style='color:red'>" + iCharacters + " </b>");
});
});
});
</script>
Thanks a lot for your help in advance.

I believe an easy way to do this would be to always display the numbers but they hide or show them on the click of a button using jQuery's toggle method. You can find a working example here: https://jsbin.com/pohagaz/1/edit?html,js,output.
$("pre").each(function(i){
var iCharacters = $(this).text().length;
$(this).prepend("<b class='charCount' style='color:red'>" + iCharacters + " </b>");
});
$("#showCounts").click(function() {
$(".charCount").toggle();
});

Hiding and showing divs when user uses select box not working correctly

For my website I allow the user to use a drop down to select various options, when they choose an option i have some jquery that should hide or show different pictures according to what they choose. However it doesn't seem to be changing.
I have created a js fiddle and put some text in on the cook section to try and test it but it still isn't working. Can anyone see why?
http://jsfiddle.net/av7E2/
$(document).ready(function () {
$('.box').hide();
$('#option1').show();
$('#select-portion').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.prepBox').hide();
$('#option10').show();
$('#select-prep-time').change(function () {
$('.prepBox').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.cookBox').hide();
$('#cook1').show();
$('#select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
});

Going by your fiddle, select-cook-time is a class and not an id value. Hence you should be using .select-cook-time instead. Try this
$('.select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});

I looked at your fiddle. You are using #select-portion when you should be using .select-portion. You seem to have the same problem with all other dropdowns.
Apply this changes and change handlers will be invoked.
$('#select-cook-time') -> $('.select-cook-time')
$('#select-prep-time') -> $('.select-prep-time')
$('#select-portion') -> $('.select-portion')

Well in your fiddle, you have class="select-portion" and in the jquery you are looking for # not .

After cleaning up some of the typos in the markup and cleaning up the jQuery we get this -
$(document).ready(function () { // one document ready handler (although you can use as many as you'd like, this is just cleaner)
$('.box, .prepBox, .cookBox').hide(); // combine selectors
$('#option1, #option10, #cook1').show(); // combine selectors
$('.select-portion').change(function () { // change to class selector
$('.box').hide();
$('#' + $(this).val()).show();
});
$('.select-prep-time').change(function () { // change to class selector
$('.prepBox').hide();
$('#' + $(this).val()).show();
});
$('.select-cook-time').change(function () { // change to class selector
$('.cookBox').hide();
$('#' + $(this).val()).show();
});
});
You can see this in operation here - http://jsfiddle.net/jayblanchard/av7E2/1/

Jquery: trying to hide and show on hover on multiple divs with same id plus number

Trying to get a div that looks like <a id="thumblink-10"> to show and hide another div on hover, but no luck.
jQuery(document).ready(function() {
jQuery(document).find("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).show();
}, function(){
//var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + this.num).hide();
});
});
Thanks

This should work for you:
jQuery("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).toggle();
});
Fixed the initial selector to not use find, only need to supply and single function for the hover and use the toggle function to show/hide the content.
http://jsfiddle.net/Zy2Ny/
But the way I would actually do it is to add data attributes to your links (can then change the selector to a class one instead) and use those to find the correct div to toggle like this:
JS
jQuery("a.thumblink").live('hover', function(){
var num = $(this).data('contentid');
jQuery('#thumb-hover-' + num).toggle();
});
HTML
<a class="thumblink" data-contentid="10">Hover</a>
<div id="thumb-hover-10" style="display: none;">Content</div>
http://jsfiddle.net/Zy2Ny/1/

You can't really do traversal methods like find and then use live. You should just use a standard selection. Also, you can't use live with hover and give two functions.
$("a[id^='thumblink-']").live('hover', function(){ // simple selector
Better still would be to use delegate and a map of events and handlers:
$(document).delegate('a[id^="thumblink-"]', {
mouseenter: function() {
},
mouseleave: function() {
}
});

I haven't been able to test it unfortunately, but I believe the following should work:
var id = 10;
$('#thumblink-' + id).hover(function(id) {
return function () {
$('#thumb-hover-' + id).show();
};
}(id),
function(id) {
return function () {
$('#thumb-hover-' + id).hide();
};
}(id)
);

jQuery multiple radio buttons and load html code?

You think is right this way for show HTML code in each click on radio?
What is you propose to animate (effect) appropriate for show and hide html code?
see you example of my codes: http://jsfiddle.net/9LECb/
$('#housing_select input').click(function(){
var classes = $(this).attr('id');
if(classes == 'hotel_select'){
$('.hotel_apartment_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'hotel_apartment_select'){
$('.hotel_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'suite_select'){
$('.hotel_select, .hotel_apartment_select').hide();
$('.'+classes).show();
}
})
With respect

You can remove the if conditions and minimize the code to:
$('#housing_select input').click(function() {
var classes = $("." + this.id);
$('.hotel_apartment_select, .suite_select, .hotel_select').not(classes).hide();
classes.show();
})
JSFiddle: http://jsfiddle.net/9LECb/2/
Note:
You can check jQuery UI Tabs as they acheive a similar effect

Try this:
$('#housing_select input').click(function() {
$('.hotel_apartment_select, .suite_select, .hotel_select').not("." + this.id).hide();
$("." + this.id).show();
})