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 get onclick event for jQuery Chosen drodpown listbox?

Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.

Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});

instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));

Trying to get a value from a button using javascript

So I have multiple delete buttons on a table and each button has there own unique id. I am trying to get this value via javascript but I can't get it to work at all.
Here is a section js that is working properly and loads the correct html (this is ran for each movie):
function createRow(movie) {
movie.NewDate = new Date(movie.ReleaseDate);
return '<tr><td><img class="movieImage" src="' +
movie.ImageLink +
'" alt="' +
movie.Title +
' Image" style="width:50px;height:75px">' +
'<td>' +
movie.Title +
'</td><td>' +
movie.NewDate.toLocaleDateString("en-US") +
'</td><td><button type="button" class="removeButton" value="' + movie.DVDID + '">Delete</button></td></tr>';
}
And here is the js where I am trying to retrieve the id:
$(document)
.ready(function () {
var deleteButtons = $(".removeButton");
deleteButtons.each(function (index) {
var currentButton = $(this);
var buttonValue = currentButton.val();
currentButton.click(function () {
alert(buttonValue);
});
});
});
I found the last snippet via Click one of multiple buttons, put value in text input
Right now just getting a proper alert would be sufficient.

Have you tried this approach:
$("#tableId").on("click", ".removeButton", function(){ alert($(this).attr("value")); })
This "on" binds all the ".removeButton" elements with the given function when click is triggered.

Your javascript should look like this:
$(document).ready(function () {
var deleteButtons = $(".removeButton");
deleteButtons.on('click', function() {
alert($(this).attr('value'));
});
});
Also, since you adding these buttons dynamicly with javascript, you may need to rebind button click events after you add new row. Also binding should be done after loading button html to DOM.

Since you are creating buttons dynamically, you won't be able to reach them properly because when the javascript was initiated they didn't exist in the DOM. So in order for you to be able to find the buttons, you'll have to look at the document scope and then find which button (class) you click on, like so:
$(document).on('click', '.removeButton', function(){
console.log($(this).val())
})
See fiddle for complete example

unable to get the input id that triggered the event using event.target.id

I have this code right here for getting the id of a clicked input element:
jQuery(event.target.id).change(function(){
if(event.target.id===null)
{
}
else
{
alert(event.target.id);
}
});
for example: i have a dynamically generated textbox. Upon clicking it using the code above, it returns the id.
However when I click a dropdown list input, it returns null, but when inspecting the element, the id is there. It still goes to the else block.
I am using this event for fields that were dynamically generated.
What might be wrong?
Sorry if it seems noobish I am new on jQuery.

On select elements you need to listen to the change event, not the click event:
$('select').change(function() {
var selectId = $(this).attr('id');
var optionId = $(this).find(":selected").attr('id');
alert('select id:' + selectId);
alert('option id: ' + optionId);
});
UPDATE
Usually in a select element you would be looking for the option value. This is how you would do that:
$('#selectId').change(function() {
var optionValue = $(this).find(":selected").val()
alert(optionValue);
});

Try access original target
var originalElement = event.srcElement || event.originalTarget;
console.log(originalElement.id)

Set the value to ID of the element on click event by jquery

I want to set the menu to active when click on it. This is what I've tried :
<script language="javascript" type="text/javascript">
var select;
$(document).ready(function () {
$.getJSON(url, function (data) {
$.each(data, function (index, dataOption) {
var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
$('a#' + dataOption.ID).click(function () {
select = "selected";
$('.level1').attr("id",select);
});
});
});
});
</script>
What I tried to do is to set the id of 'level1' to selected, when I click on that link. But my coding is set all the link to selected, even I click only 1 link.
Could anyone give me the solution please.
Thanks so much.

That happens because you are calling .attr() on all .level1 element instead of only the one being clicked by its child so,
change
$('.level1').attr("id",select);
to
$(this).parent().attr('id', select);
You also need to remove the "selected" id from the other <li>'s by
$('.level1').removeAttr('id');
So the complete code looks like:
$('a#' + dataOption.ID).click(function () {
$('.level1').removeAttr('id');
$(this).parent().attr("id", 'selected');
});
One suggestion though, class is usually used in situation like this when you want to have a selected type of a list of menu, if you are using class you'd do something like
$('a#' + dataOption.ID).click(function () {
$('.level1').removeClass('selected');
$(this).parent().addClass('selected');
}
Looks more concise that way, but I'll leave it up to you :)