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.

Trigger $.fancybox.init() after appending the script to the head

I have an API which works appending the fancybox script to the head tag of the client's web page, but obviously this happens after the dom is ready, so the init function of fancybox is not called
In fancybox.js:
$(document).ready(function() {
$.fancybox.init();
});
I've tried changing it to :
$(document).bind('ready', function() {
$.fancybox.init();
});
and then triggering the dom ready function in different ways (one by one):
$(document).trigger("ready");
$().trigger("ready")
$().ready();
I've also tried calling the init function when the script is loaded:
$.fancybox.init();
Nothing seems to work.
I'm sure that the fancybox.css, the fancybox.js and even mousewheel.js and easing.js are loaded in the documment before trying all that, I also added a timeout to be sure.
So the question is, how can the fancybox plugin be initialized after appending the js to the head tag?

I don't think you need to call $.fancybox.init(); but just initialize the proper selector after the fancybox script has been loaded so I would try within the API something like :
if (!jQuery.fn.fancybox){
// fancybox is not loaded
jQuery.getScript("{path}/jquery.fancybox.js"); // you may need to change the path
setTimeout(function(){
// init fancybox selector
jQuery(".selector").fancybox();
}, 100); // delay selector initialization
} else {
// fancybox script is ready so initialize (re-init) selector
jQuery(".selector").fancybox();
};

jQuery iframe onload

I have an iframe that represents the content of my main page and it loads a different src depending on the menu option chosen. I want to perform a series of actions as soon as the iFrame is loaded but I cant seem to get it to work. The code looks more or less like the following:
$(document).ready(function () {
$('#navigation').load(function () {
alert('frame loaded!')
});
});

.load for event binding was deprecated in jQuery 1.8, use .on("load" instead.

I asume this function is in your iFrame and will be executed after the document loading. If not - ther is some conceptual error. Anyway - the load function in jQuery will try to load a html document or piece of it in the object you specify - http://api.jquery.com/load/

Why function in Javascript file does not load in master page?

I have a master page that has javascript files added with asp:ScriptReference, but in document.ready ( $(function(){}) ) the functions defined in the Javascript file do not load, and I get this error:
Microsoft JScript runtime error: Object doesn't support property or method 'nanoScroller'.
Whereas the same code runs in other simple projects.

Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});

Activate jquery ui widgets within dynamically loaded form

What is the best practice of activating jquery ui widgets for html loaded and inserted into the document by ajax?
I am an advocate of unobtrusive javascript and strongly believe that all functionality accessed by javascript should be also accessible without it. So in the ideal case, each form which opens in a popup, should also have its separate page and links to them should be replaced with javascript-based ajax loading.
I find this pattern very useful for loading and inserting a part of another page into the current document:
$('#placeholder').load('/some/path/ #content>*');
Or to make it more generic:
$('a.load').each(function() {
$(this).load($(this).attr('href') + ' #content>*');
});
However, I would also like to activate the javascripts from the dynamically loaded page, so that different widgets function correctly.
I know, I could add those javascripts to the current document and activate all of them in the callback of .load(), or I could use $.get() to get some JSON with html and javascripts separately, but I guess, there might be a more elegant generic solution to this.
What would you recommend?
BTW, I am using Django in the backend.

The question is how you're activating your javascript currently. If you're doing something like:
$(document).ready(function() {
$('a.foo').click(function() { ... });
})
You could consider changin things to:
$(document).ready(function() {
$('a.foo').live('click', function() { ... });
})
That way when new DOM objects are loaded the event handlers are attached.

What I've done is used the "load" option that is specifiable by jquery.ui widgets. Unfortunately, this isn't well documented, so you won't see the option here: http://jqueryui.com/demos/tabs/#options for example, but you will see it here: http://jqueryui.com/demos/tabs/#method-load
For the most part, each of the methods you invoke have an initial option that can be set, which is what prompted me to try using the load.
In my own application, I have 3 levels of nested tabs that are being created dynamically via AJAX. In order to have the javascript for each of the tabs applied dynamically, I have nested load functions that are first initiated when the document is loaded.
So my template file has:
<script type="text/javascript" src="{{ MEDIA_URL }}js/tabs.js"></script>
<script type="text/javascript">
$(function() {
$('.overall_tabs').tabs({
load: initializeOverallTabs
});
});
</script>
My tabs.js file has:
function initializeOverallTabs(event, ui){
...
$('.lvl_two_tabs').tabs({
load: initializeTabLevel2
});
...
}
function initializeTabLevel2(event, ui){
...
// So on and so forth
...
}
Also, I recommend when working inside the loaded areas to make your references be specific to that pane. This was extremely important when working with tabs. The best way I found to do this is below.
In your tabs.js file:
function initializeOverallTabs(event, ui){
$panel = $(ui.panel);
$panel.find('lvl_two_tabs').tabs(...);
}
I found this question strangely coincidental! I recently explained my solution to a few developers to the same situation with the same Jquery/Django Environment. I hope that helped!

One way I decided myself for handling widgets from external pages is parsing the HTML of the other page, searching for scripts and executing them in the current page.
For example, there is a form with autocomplete widget on another page which is loaded and inserted to this page. The autocomplete widget should be activated with specific properties, like available choices:
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#colors").autocomplete({
source: ['red', 'green', 'blue', 'magenta', 'yellow', 'cyan']
});
});
//]]>
</script>
Then in the current page I can have the following script which loads HTML and additionally collects all javascripts within it and executes them:
var oRe = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
$('#placeholder').load(
'/some/path/ #content>*',
function(responseText, textStatus, XMLHttpRequest) { // <-- callback function
var sScripts = "";
responseText.replace(
oRe,
function($0, $1) {
sScripts += $1;
return $0;
}
);
eval(sScripts);
}
);
One drawback here is that the current document should initially be loading all the libraries which might appear in the included forms. For example, in this case, it would be the jquery-ui including the autocomplete widget. I guess I could extend the code by searching for script tags which load external scripts and loading them in the current document if they are not present.