Develop Reference

Code claims function does not exist only if it is called from html-set onclick event

I have a very strange issue preventing my code from firing a JQUERY function - but only if the event is declared in an onclick attribute tag within the page's html. If that same function is assigned to an element with a javascript ".click(function()..." event, then the function is called properly and the code doesn't say "This event doesn't exist!", essentially.
I trawled through the internet looking for someone with the same issue, and while there are a lot of questions that look superficially like the issue I am having, none seem to address it exactly.
Here is an example:
//Delete an existing exclusion.
$.fn.deleteExclusion = function (idExclusion) {
document.cookie = idExclusion + "=; expires=; path=/";
$.fn.buildExclusions();
}
If I call this method by saying:
$("#someButton").click(function(){
$.fn.deleteExclusion();
)
... then the function exists and is run properly.
However, if I assign this function as follows (created on page load as part of page html):
Some Button
... then the function doesn't exist when I click that link.
This does not happen for one of my company's websites, which uses ASP.NET .aspx page structures. However, I am working on a new MVC application, which is where this behavior is occurring.
I am stumped, frankly. Right now, I am not sure what else to provide code-wise to demonstrate, without probably overdoing it with unnecessary details. Please let me know if you need additional code to help me figure this out.

You need to include Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery(document).ready(function($){
$.fn.deleteExclusion = function (idExclusion) {
document.cookie = idExclusion + "=; expires=; path=/";
$.fn.buildExclusions();
}
});

We found a workaround. To get this working, we added:
//Set onclick events for delete exlusion anchor tag buttons created dynamically.
$(document).on("click", "a.deleteExclusion", function () {
$.fn.deleteExclusion($(this).attr("id").replace("delete", ""));
});
This created the onclick event on page load, but applied it to elements as they were created. It allowed elements created in our cshtml file initially, along with dynamically created html elements, to have a working click event.

jQuery On Not working for simple script

There must be some mental block that I'm just not getting...My entire site is working fine, but dynamically created links with an ID are not. Something is wrong in my code...it's as simple as this but it's not working, please show me my dumb mistake (I know it's something simple).
so for example this would be a generated link:
Hi
and then I have this script:
$(document).ready(function() {
$(document).on('click','#himan',function(){
alert('hi');
});
});
but nothing happens, and I get no errors...I'm lost, maybe my coffee is not working today. Can someone help me?

Here is demo
It is working perfect:
$(document).ready(function () {
$(document).on('click', '#himan', function () {
alert('hi');
});
});
reason might be duplicate of id, there must only one element with specific id because id is a unique on a page, if you adding multiple element use class instead of id.

Handle the click event on #himan itself...
function initializeDynamicLinks() {
$('#himan').on('click',function(){
alert('hi');
});
}
$(document).ready(function() {
initializeDynamicLinks()
});
Here you see it working: http://jsfiddle.net/digitalextremist/emUWL/
Rerun initializeDynamicLinks() whenever you add links dynamically.
And... as has been pointed out several times in comments, you need to make sure #himan only occurs once in your source to be completely sure everything will function properly.

Access a child page control with Javascript (asp.net)

I have a control with a listbox inside an updatepanel connected to a timer which is doing an autopostback with a scriptmanager on the main form.
To keep the item selected throughout the postback I use the below javascript. I have researched this quite thoroughly and don't believe there is another way to keep the selecteditem selected between postbacks. However this solution seems to work quite well.
My issue is that when I add a second control to the main form it won't work.
I have tried moving the javascript into the main form however I cannot access the child controls from the main form using:
document.getElementById('<%=PositionsControl.FindControl("ListBox_Candidates").ClientID %>').selectedIndex
I have also tried renaming the BeginRequestHandler and EndRequestHandler to unique names (to avoid conflicts when this script is on both control) and it will not work.
Any help is greatly appreciated.
<script type="text/javascript">
var index
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
index = document.getElementById('<%=ListBox_Candidates.ClientID %>').selectedIndex;
}
function EndRequestHandler(sender, args) {
$get('<%=ListBox_Candidates.ClientID %>').selectedIndex = index;
}
</script>

You can try to add property in code behind, that will return you value you need.
Then, in client side, just bind to this property.

Ended up going with not using Microsoft Ajax and calling webmethods from jquery instead!

jQuery: Trigger help

I'm using the cluetip jQuery plugin.
I'm trying to add my own close button. The the jquery I'm trying to call is:
$(document).bind('hideCluetip', function(e) {
cluetipClose();
});
There are many references to cluetipClose() through the code and the button that the jquery inserts uses it and works so that function as far as I'm aware works fine.
I'm trying to trigger that using
$('a.close-cluetip').trigger('hideCluetip');
I've created my link:
Close
But it isn't doing anything.
Am I calling it incorrectly?

The problem here is that in the cluetip plugin, the function clueTipClose() is inside a closure, so you have no access to it unless you're inside the closure (i.e. inside the plugin's code). Now I've gotta admit, this plugin doesn't seem to be set up to be all that extensible. If they made this function accessible via a "clueTip" object that was set up for each element that uses it, you'd be able to add another jQuery method to the end of the closure like this:
$.fn.cluetipClose = function() {
return this.each(function() {
var thisCluetip = findCluetipObj(this);
if (thisCluetip)
thisCluetip.cluetipClose();
});
};
But you have the unfortunate luck of not being able to do this easily. It looks like this guy wrote his jQuery plugin with non-OO code inside of a closure. Poor you.
Now on the plus side, it seems this plugin is already running this code directly after it instantiates the cluetipClose() function. Have you tried just doing this from your code:
$('a.close-cluetip').trigger('hideCluetip');
Without redeclaring the document hideCluetip bind? I think that should probably work.

Basic jQuery problems

I am struggling with jQuery for a long time now. It is very powerful and there are lot of great things we can do with jQuery.
My problem is that I use a lot of jQuery features at the same time. E.g. I have a site that displays items, 12 items per page and I can paginate through the pages using jQuery. On the same page I implemented a thumpsUp button that uses jQuery too.
The more jQuery features I use, the harder it gets to arrange them properly. E.g.:
$(document).ready(function() {
$(".cornerize").corner("5px"); //cornerize links
$('a#verd').live('click', exSite); //open iframe
$("a.tp").live('click', thumpsUp); //thumps up
$("a#next").click(getProgramms); //next page
$("a#previous").click(getProgramms); //previous page
//for the current page reload the content
$("a#page").each(function() {
$(this).click(getProgramms);
});
//this isn't working...
$('.smallerpost').live('click', alert('test'));
});
Have a look at the last code line. I want to perform an alert when the div element is clicked. Instead of doing so the page shows me the alert when I refresh the page. A click on the div has no effect.
What am I doing wrong? What would be a strategy here to have clean and working jQuery?

Change that line to
$('.smallerpost').live('click', function () {
alert('test');
});
and while you're there...
$("a#page").each(function() {
$(this).click(getProgramms);
});
has exactly the same effect as:
$('a#page').click(getProgramms);
... but technically there should be only one element with id='page' anyway

Your code $('.smallerpost').live('click', alert('test')); calls the alert immediately and passes its return value into the live function as the second parameter. What you want to pass there is a function to call, so you want:
$('.smallerpost').live('click', function() {
alert('test');
});
or
$('.smallerpost').live('click', handleSmallerPostClick);
function handleSmallerPostClick() {
alert('test');
}
...depending on how you structure your code.