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

Remove parent and everything inside it?

I'm trying to use jQuery to remove a div and all of its content when a child div is clicked. To explain this, here is a working FIDDLE. Basically I need to remove the pDiv when the close button is clicked. So I tried this:
$('div').on('click', '.closeDiv', function () {
$(this).prev().remove();
$(this).remove();
$(this).parent().remove();
$('#upload-file').val("");
});
However this doesn't seem to delete the pDiv.
Please test the FIDDLE above buy adding an image and then click on the Green close button and then try to add another image and you will see that the previous pDiv hasn't been removed.
Could someone please advice on this issue?
Thanks in advance

The issue is because you call $(this).remove() before you try and do further DOM traversal on the element which no longer exists. Remove that line. Note that you can also just use closest() to find the required .pDiv element, then remove it, like this:
$('#thumbnail').on('click', '.closeDiv', function() {
$(this).closest('.pDiv').remove();
});
Also note that the code in your fiddle uses an odd mix of jQuery and native JS. You should stick to one or the other. You're also doing several processes which aren't needed, such as creating a canvas element. Try this:
jQuery(function($) {
var $thumbnail = $('#thumbnail').on('click', '.closeDiv', function() {
$(this).closest('.pDiv').remove();
$('#upload-file').val('');
});
var $fileDiv = $("#upload");
var $fileInput = $("#upload-file").on('change', function(e) {
var filesVAR = this.files;
showThumbnail(filesVAR);
});
function showThumbnail(files) {
var file = files[0]
var $pDiv = $('<div class="pDiv" />').appendTo($thumbnail);
var $image = $('<img class="imgKLIK5" />').appendTo($pDiv);
var $div = $('<div class="closeDiv">X</div>').appendTo($pDiv);
var reader = new FileReader()
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
}($image[0]))
var ret = reader.readAsDataURL(file);
}
});
Updated fiddle

try following and follow the comment i mentioned.
$(document).on('click', '.closeDiv', function () {
$(this).prev().remove(); // i don't know why you need this.. let us know your structure
//$(this).remove(); you don't need this line
$(this).parent().remove();
$('#upload-file').val("");
});
Please find the working Fiddle for this

Toggle one anchor link at time with Jquery

Would like to toggle my active class, so when I click on one link on the page, only one link is active with the class at a time, through out my page as I click on any of the links. Could someone help me come up with a feasible solution adding to my code?
JavaScript
//Global definition
var activeState = $(".category-tree-with-article .article-list > li > a");
activeState.on('click', function (e) {
e.preventDefault;
// For class changes
activeState.toggleClass('active');
});
CSS
.active {
font-family:'MaxPro'
}

remove the class on all the other links and add the class on the clicked one
var activeState = $(".category-tree-with-article .article-list > li > a");
activeState.on('click', function (e) {
e.preventDefault;
activeState.removeClass('active');
$(this).addClass('active');
});

If you only want to do the current one then change -
activeState.toggleClass('active');
to this -
activeState.removeClass('active');
$(this).toggleClass('active'); // can still turn on and off on this element

Don't use toggle in this case
var links = $('.selector-to-your-links');
links.on('click', function(e) {
var link = $(this);
link.addClass('active');
links.not(link).removeClass('active');
return false; // I like this better than e.preventDefault() as it also does e.stopPropagation()
});

Why is jQuery .click() is skipped over?

I have a small script of javascript which iterates over a set of checkboxes which grabs the name attribute and value and then convert it to json. Then I use that value to set the href of an element and then try to trigger a click.
For some reason everything seems to function properly except for the click. I successfully change the href, I console.log() a value before the .click() and after. Everything hits except for the click. The url in the href is value as I clicked it manually.
I have my script included just before the closing body tag and have it wrapped in $(document).ready(). and I do not have duplicate ID's (I viewed the rendered source to check)
Can anyone offer some insight on this?
Here is the javascript
$(document).ready(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var i = 0;
var list = new Array();
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var id = $(this).val();
list[i] = new Array(name, id);
i++;
});
var serList = JSON.stringify(list);
console.log(serList);
var webRoot = $("#webRoot").text();
$("#exportLink").attr('href', webRoot+"/admin/admin_export_multiExport.php?emailList="+serList); //hits
console.log('1'); //hits
$("#exportLink").click(); //this line never executes
console.log('2'); //hits
});
});

$(selector).click() won't actually follow the link the way clicking on it with your mouse will. If that's what you want, you should unwrap the jquery object from the element.
$(selector)[0].click();
Otherwise, all you're doing is triggering event handlers that may or may not exist.

I may guess you need
$(document).on('click', '#multiExport', function(e){
(you can replace document by a nearest element, if you got one).
if you need dynamic click event binding.
EDIT
I would try something like that :
$(document).ready(function() {
$("#exportLink").click(function() {
window.location = $(this).attr('href');
});
$("#multiExport" ).on('click', function(e){
//whatever you want
$('#exportLink').attr('href', 'something').trigger('click');
});
});

$("#exportLink").click(); // this would launch the event.

I must admit I am very surprised that the .click() does not work.
If the idea is to load the page, then the alternative is
$(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var list = [];
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var val = $(this).val();
list.push([name, val]);
});
var serList = JSON.stringify(list);
var webRoot = $("#webRoot").text();
location=webRoot+"/admin/admin_export_multiExport.php?emailList="+serList;
});
});

Dynamically added select change events not registering

In my site I have some code as follows: -
$(function() {
$(document).on('change', 'select', function() {
var formID = $(this).attr("id");
if((formID.indexOf("forms[")>-1)){
var newFormID= $(this).val();
var scenarioID = ${testScenarioInstance?.id}
getFormInformation(newFormID, "forms", $(this), scenarioID);
}
});
});
In another part of the page the user can add additional selects via a simple little post and append. The trouble is for any newly added selects this piece of code doesn't trigger, but it works fine for any select that is there when the page loads. Any ideas why this is?

It should work well as you have it now, here I made little example with your same code for the event:
http://jsfiddle.net/2KCY9/
$(document).on('change', 'select', function () {
alert("Works well");
});