We Keep Coding

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
}));

how to use settimeout, to remove dynamically appended elements according to their append time

I need help regarding settimeout function.
I made a little plugin, that append 'li' based on specifix parameter.
Like
div ({'div':'noo','auto':'true','pos':'top','txt':'hello'});
function div(obj) {
obj.div;
obj.auto;
obj.pos;
obj.txt;
obj.time;
if(obj.pos == 'top') {
$('<ul id="top"></ul>').appendTo('body');
}
if(obj.pos == 'bottom') {
$('<ul id="bottom"></ul>').appendTo('body');
$(obj.div).append('<li data-name="' + $.now() + '">' + obj.txt + '</li>');
if(!obj.time) {
obj.time = 6000;
}
if(obj.auto == 'true') {
setTimeout(function () {
$(obj.div + ' li').fadeOut();
}, obj.time);
}
}
}
Now, the problem with this code is, if I append a li after few seconds setTimeout (function (){div ({'div':'bottom','auto':'true','pos':'bottom'});}, 3000);, than both LIs fadeout at same time (obj.time).
I want that, all appended LIs must complete their respective obj.time before fadeout.
I also tried to add attr "data-name" on all appended LIs with current time, but dont know how to store all data-name and retrive then into setTimeout function.
Sorry for typo mistakes

JavaScript is case sensitive so avoid using If instead of if, Function instead of function and SetTimeout instead of setTimeout first.

Dropdown selectedindex not triger when used jquery

I have used jquery to give effect for my dropdown but after inserting jquery i cant get the selectedindexed changed function working. But when i remove the jquery, then all seems to be working fine.
Another thing, after applying jquery in the dropdown, all the items in the dropdown are shown as list item 'li' instead of options.
I have tried using javascript function as well but same happens whenever I use jquery in the drop down.
Code goes as:
<asp:DropDownList ID="DropDownProducts" Width="150px" CssClass="RegistryDrop"
runat="server" AutoPostBack="True" OnDataBinding="dropprodsbinding"
OnSelectedIndexChanged="DropDownProducts_SelectedIndexChanged"
DataTextField="Name" AppendDataBoundItems="True"
DataValueField="id">
</asp:DropDownList>
code behind code goes here:
function getSelectOptions(parentid) {
var select_options = new Array();
var ul = document.createElement('ul');
$select.children('option').each(function () {
var li = document.createElement('li');
li.setAttribute('id', parentid + '_' + $(this).val());
li.innerHTML = $(this).html();
if ($(this).is(':selected')) {
$input.val($(this).html());
$(li).addClass(opt.currentClass);
}
ul.appendChild(li);
$(li)
.mouseover(function (event) {
hasfocus = 1;
if (opt.debug) console.log('over on : ' + this.id);
jQuery(event.target, $container).addClass(opt.hoverClass);
})
.mouseout(function (event) {
hasfocus = -1;
if (opt.debug) console.log('out on : ' + this.id);
jQuery(event.target, $container).removeClass(opt.hoverClass);
})
.click(function (event) {
var fl = $('li.' + opt.hoverClass, $container).get(0);
if (opt.debug) console.log('click on :' + this.id);
$('li.' + opt.currentClass).removeClass(opt.currentClass);
$(this).addClass(opt.currentClass);
setCurrent();
hideMe();
});
});
return ul;
}
hoping to get some solution. thank you

Your javascript/jquery code is converting the dropdown into an unordered list in the client's browser. After that conversion happens, any hooks that the ASP.net control had into the dropdown no longer exist, as the dropdown has been replaced with the ul structure.
Ultimately, all of the postback actions happen as a result of javascript code that ASP.Net imbeds into the <select html element. So when you replace that element, none of those actions will be called.
In theory, you should be able to identify what those attachments are using client-side analysis (Chrome Developer Tools or Firebug) to see what functions/events are attached to the <select in the non-jquery version of your page. Once you identify those events, you can store them as functions in javascript and attach them to events on the <ul structure that the jquery is replacing the <select with.
You'll have to do some analysis on your end to see for sure what is going on, but it could be as simple as something like (where mySelect and myUL are identifiers tied to your actual select and ul elements):
var functionToExec = $('#mySelect').click;
$('#myUL').children.each.click = functionToExec;

Getting the value of each checkbox on every group and apppend it to a span counter with jQuery

I have a set groups with a checkbox, I am trying to get the value of each checkbox when is checked and appending this value to a counter span element i have next to it, but every time i click on any of the checkboxes is appending the value to all the counter elements. I created a http://jsfiddle.net/creativestudio/xm838/
This is the Js I am using:
function set_index_id_checkbox() {
$("input:checkbox[name='like']").each(function (index) {
var currElem = $(this);
var prevLabel = currElem.next();
currElem.attr("id", this.id + index);
prevLabel.attr("for", prevLabel.attr("for") + index);
});
}
set_index_id_checkbox();
function getValues() {
$("input:checkbox[name='like']").click(function () {
if ($(this).is(':checked')) {
$('.likes').html($(this).val());
}
});
}
getValues();

That's because you are selecting all the elements with class of likes, you can use prev and find or closest methods for selecting the target element.
$(this).parent().prev().find('.likes').html(this.value);
or:
if (this.checked) { // better than creating an unnecessary jQuery object
$(this).closest('.block').find('span.likes').text(this.value);
} else {
// ...
}
http://jsfiddle.net/Ud9T4/

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 :)