recently I came up with the following problem:
In my web site in all html pages I call a function in body onLoad event:
<body onLoad="func1();">
This is part of my template for html, so it appears on every page in my site and I can't change that. Now, the deal is that on some pages, I need to call some other functions onload and I tried with window.onload property, but it wipes the calling of func1...
I now that I can just say:
window.onload = func2(); //where func2() calls to func1()
but this seems dirty and lame? Isn't it ?
So, is there a way to add some functions to those that are about to be executed onload, without deleting the old one? In addition I use asp.net if that could help ...
Thanks!
You can use jQuery to chain on load handlers. Repeatedly using jQuery.load or jQuery(document).ready will chain your handlers (I believe). You other option is to do it programmatically, which means you need an auxiliary function that will chain your onload handlers for you. You can do this with a closure (or anonymous function):
var addOnLoadHandler = function(newHandler) {
if (typeof window.onload != 'function') {
window.onload = newHandler;
}
else {
var oldHandler = window.onload;
window.onload = function() {
if (oldHandler) {
oldHandler();
}
newHandler();
};
}
};
You will have to bind your functions programmatically though, so you would have to do:
addOnLoadHandlers(function() {
alert("Hi I am the first onLoad handler!");
});
addOnLoadHandlers(function() {
alert("Hi I am the second onLoad handler!");
});
in a javascript file (or in your html file).
Another approach is to use an array:
var onloaders = new Array();
function runOnLoads() {
for (i = 0; i < onloaders.length; i++) {
try {
var handler = onloaders[i];
handler();
} catch(error) {
alert(error.message);
}
}
}
function addLoader(obj) {
onloaders[onloaders.length] = obj;
}
In your HTML or Javascript file you do:
addLoader(function() {
alert("Hi I am the first onLoad handler!");
});
addLoader(function() {
alert("Hi I am the second onLoad handler!");
});
Then in your html you can just do <body onload="runOnLoads()">
You may want to make the best out of anonymous functions:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
Borrowed from the Top 10 custom JavaScript functions of all time.
jQuery has a nice shorthand for adding multiple defined handlers to the "ready" event (does not work with anonymous functions where you have to use $(document).ready(function(){});).
simply
$(myFunction);
$(myFunction2);
One big advantage is that if the DOM has already loaded, this still gets fired, whereas anything you bind to window.onload after the event will not get called.
have you considered a javascript library like jquery, i know that there are other approaches but jquery will make your life so much easier...
$(function(){
//Do stuff when DOM is loaded.
func1();
$('#link').click(function(){
//bind a click event
});
});
The classic approach is to just stick all of your functions at the bottom of the page :)
In jquery you can do
$(document).onload(function() {
// do something
}
//then later on do
$(document).onload(function() {
// do something here too!
}
jQuery will intelligently add both events to the onload event and both will be executed when the page loads. With jQuery you also get crossbrowser support as an added bonus.
Related
I have a use-case where I need to programmatically add/remove the onClick event associated with a panel.
I have tried the following solution but receive a cijCell.addEventListener is not a function error.
function cij_enabled(){
var cijCell = app.pages.Home.descendants.cellFour;
var index = cijCell.styles.indexOf('disabled-card');
if (Report.riskOfLoss === 'High') {
cijCell.styles.splice(index, 1);
cijCell.addEventListener("click", function() {
app.popups.Customer.visible = true;
});
} else {
if (index === -1){
cijCell.styles.push('disabled-card');
cijCell.removeEventListener("click", function() {
app.popups.Customer.visible = true;
});
}
}
}
How can I achieve the desired outcome? Is adding eventlisteners possible in this fashion through app maker?
You can definitely do so and you got it almost right. The only thing you need to understand is that the appmaker widget is not a native html element hence the error:
cijCell.addEventListener is not a function
Fortunately, AppMaker has a way of getting the native html elements associated to a widget. You need to use the getElement() method and then you can use the add/remove event listeners methods. So you should change your code from cijCell.addEventListener... to cijCell.getElement().addEventListener...
Reference: https://developers.google.com/appmaker/scripting/api/widgets#Panel
I have a fullCalendar widget created somewhere. I cannot change the code that initialize it. So I cannot add any callbacks in the first call.
Anything like this:
$(elem).fullCalendar({
complete: function () {
...
}
})
Actually creates a new fullCalendar instead of modifying the actual fullCalendar to change/add the complete callback.
Is there an other way to find out when events are loaded I was thinking about polling clientEvents but I realize that I could have no events in one month so I cannot expect the array to always have something in it.
By the way, it's fullCalendar 1.6.
You can define callbacks after the calendar object has been initialized, and to determine when all events have been rendered, use the eventAfterAllRender event. Here's how:
var calendar = $('#calendar').fullCalendar('getCalendar');
calendar.on('eventAfterAllRender', function(view) {
alert('all events rendered!');
});
Nevermind, this feature is only available starting in version 2.4.
Instead, you could poll the DOM for fullcalendar element existence, like this:
function checkForInit() {
if($(".fc-view").children().length) {
alert("initialized!");
} else {
setTimeout(function() {
checkForInit();
}, 10);
}
}
$(document).ready(function() {
checkForInit();
});
You can use eventAfterAllRender event, available from version 1.6:
$(elem).fullCalendar({
eventAfterAllRender: function (view) {
...
}
})
Ok I found a solution that seems to be working!
var waitPrint = true
function autoPrint() {
var elem = $('.fc')
var calendar = elem.data('fullCalendar')
console.log('Searching calendar')
if (calendar && waitPrint) {
waitPrint = false
console.log('Bund new event')
var _super = calendar.options.eventAfterAllRender
calendar.options.eventAfterAllRender = function (event, element, view) {
if (_super) {
_super.apply(this, arguments)
}
window.print()
}
} else if (waitPrint) {
setTimeout(autoPrint, 100)
}
}
autoPrint()
Here I'm polling for an element with the fc class. As soon as I find one, I check for the existence of the "data" named fullCalendar. If it returns a dict, then it means that the fullCalendar instance has been created. This is pretty much what Dane proposed for version 2.4 but this in 1.6 there is no getter. We have to get it ourselves. Luckily, it's stored in the data of the element and not in some other cryptic places.
Move on to the next step, fullCalendar isn't an eventEmitter in 1.x, but we still have access to options which seems to be just a reference to the options that were passed at first. I override the eventAfterAllRender. Call the method that was already defined if present and call my print method when it's done.
Technically from there, we can override almost any defined method from there. The only problem is that you have to do it faster than fullCalendar get initialized.
I believe that if we dig deeper, we could potentially patch the calendar library directly to remove the timing issues. Polling isn't very great.
Best Solution So far
var oldFullCalendar = $.fn.fullCalendar
function newFull(options) {
var _super_func = null
if (typeof options == 'string') {
oldFullCalendar.apply(this, arguments)
} else {
options = options || {}
if (options.loading) {
_super_func = options.loading
}
options.loading = function (loading) {
console.log(loading, 'loading')
if (_super_func) {
_super_func.apply(this, arguments)
}
if (!loading) {
window.print()
}
}
oldFullCalendar.apply(this, arguments)
}
}
$.fn.fullCalendar = newFull
The first solution could probably be improved by overriding loading instead. Since it's the method that notify when loading has been processed and which is also apparently called after the eventAfterAllRender callback.
This seems very simple, but for some reason it's not working as expected.
I am trying to make a very simple jQuery extension/plugin which allows me to simply reduce my lines of code when requiring a trigger on an enter key (and a similar for an escape)
Here's my code:
$.fn.enterListen = function (callBack) {
$(this).on('keyup', function (e) {
if (e.keyCode == 13) {
callBack;
// $(this).enterListen(callBack); // trying to rebind...
};
})
};
Then when an element is dynamically created with jquery we might do something like:
var input = $('<input'>).enterListen(function (){ alert("Enter was pressed"); });
$(input).appendTo('body');
Now we've added an input element to the page, in which we can type and when enter is pressed it triggers the alert.
This works, except, only once.
You can see a commented out line in my code above where I am trying to rebind the function the the element after the enter trigger is activated, and even that doesn't make it work a second time.
You can press as many other keys as you like before pressing Enter, but as soon as you do, it seems to unbind the keyup event.
IF... however, I run it like this:
function isEnter(e, ele) {
if ((e * 1) == 13) {
$(ele).click();
};
};
Called by:
var input = $('<input'>).on('keyup', function (e) { isEnter(e.keyCode, $(ok)) });
$(input).appendTo('body');
It works fine, but to me it is clumsier in the code, I am trying to create a library of extensions to make the inner coding of this project a bit shorter... perhaps I am just putting too much time into something I needn't...
Anyway, if anyone could shed any light on why the event becomes unbound, that'd be lovely!
Inside a jQuery plugin, this is the jQuery object, no need to rewrap it. e.which is normalized in jQuery. To execute a function you need parenthesis (). And most importantly, you need to return this otherwise the input variable will be undefined, and if you intend to do stuff inside your plugin with selectors containing multiple elements, you need to return this.each(function() { ... }) etc. as explained in the plugin authoring documentation from jQuery.
$.fn.enterListen = function (callBack) {
return this.each(function() {
$(this).on('keyup', function (e) {
if (e.which == 13) {
e.preventDefault();
callBack();
}
});
});
};
var input = $('<input />').enterListen(function (){
alert("Enter was pressed");
});
input.appendTo('body');
FIDDLE
I am beginning the process of moving away from the AjaxControlToolkit and toward jQuery. What I want to do is have one function that duplicates the functionality of the CollapsiblePanelExtender. For a particular set of hyperlink and div, the code looks like this:
$('#nameHyperLink').click(function() {
var div = $('#nameDiv');
var link = $('#nameHyperLink');
if (div.css('display') == 'none') {
link.text('Hide Data');
div.show(400);
}
else {
link.text('Show Data');
div.hide(400);
}
});
What I really want to do is only have to write this function once, then use it for many (approx 40) instances throughout my website. Ideally what I want is this:
function showHidePanel(divID,linkID,showText,hideText){
var div = $(divID);
var link = $(linkID);
if (div.css('display') == 'none') {
link.text('Hide Data');
div.show(400);
}
else {
link.text('Show Data');
div.hide(400);
}
});
I would then call this function from every HyperLink involved using OnClientClick.
Is there a way to do this?
Have you looked at the jquery accordian plugin?
I have a question concerning functions with jQuery. I have a function that once the browser is ready the function finds a specific table and then adds hover & click functionality to it.
I am trying to call this function from code behind in an asp .net page due to the fact that once someone adds to the database the update panel fires and retrieves a gridview (the table that has been affected by the function at document.ready). When it comes back it is the plain table again.
Here is the original functions:
$("#GridView1").find("tr").click(function(e) {
var row = jQuery(this)
//var bID = row.children("td:eq(0)").text();
$('#tbHiddenBatchID').val(row.children("td:eq(0)").text());
//Took out repetitive code, places values from table into modal
e.preventDefault();
$('#modalContentTest').modal({ position: ["25%", "5%"] });
//row.addClass('highlight');
//$('#tbEdit').val(bID);
});
//here is the function that adds hover styling
$("#GridView1").find("tr").click(function() {
return $('td', this).length && !$('table', this).length
}).css({ background: "ffffff" }).hover(
function() { $(this).css({ background: "#C1DAD7" }); },
function() {
$(this).css({ background: "#ffffff" });
});
OK, what I tried to do is create a function, call it on document.ready and also in the code behind when after the database has been updated.
Here's what I did:
function helpGrid() {
$("#GridView1").find("tr").click(function(e) {
var row = jQuery(this)
//var bID = row.children("td:eq(0)").text();
$('#tbHiddenBatchID').val(row.children("td:eq(0)").text());
//
e.preventDefault();
$('#modalContentTest').modal({ position: ["25%", "5%"] });
//row.addClass('highlight');
//$('#tbEdit').val(bID);
});
//Haven't even tried to add the hover stlying part yet; can't get this to work.
}
When I try to call helpGrid(); I get an error that's it not defined...
Obviously I'm a jQuery newb but I do have jQuery in Action & I'm scouring it now looking for an answer...
Please help..
Thanks!!!
Since you are using an update panel, the entire page does not postback and the document.ready stuff never gets hit... Below is where you can add a function to run at the end of the update, so resetMyTableStuff(); is where you'll want to do your magic...
Try adding something like this...
function pageLoad() {
if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequest);
}
}
function endRequestHandler(sender, args) {
resetMyTableStuff();
}
function initializeRequest(sender, args) {
//just in case you need to do it...
}