Develop Reference

How to run a Javascript/Jquery Function using both $(document).ready(function() and Another Event Function?

I'm not a javascript/jquery coder, and not sure if what I'm trying to do is possible.
I have a html/php/ajax form that is updated an sql database as the user fills it out. As they fill the form, there is a progress bar ran by javascript/jquery that updates as the user types in the input. The start of the function looks like this:
$("#update input").keyup(function() {
This works great. My problem is when the page is reloaded. My code is pulling sql data from the database to fill the value of every input on the page that has a value so that a user can come back and completely the form later. When the user reloads the page, the only way for the script to activate is if the user types in an input field.
I thought I would fix the issue by changing the my initial javascript/jquery function with $(document).ready(function() . This caused the script to only run when the page was loaded and not when the form was being filled out. I need both the script to run on page ready, and when a user is typing in the input filled. Is there a way I can run both $(document).ready(function() AND $("#update input").keyup(function() { simultaneously? Or is there a better why to accomplish this? Thanks!
Let me know if I need to post more code.

Here's a generic approach attaching declared functions to events.
function handler (e) {}
element.addEventListener('click', handler);
You're free to call handler everywhere, also inside $(document).ready, or if there's no other code in your DOMReady handler, you can just pass a reference as an argument:
$(document).ready(handler);
In your specific case you most likely want something like this:
$(document).ready(function () {
function handler (e) {...}
handler();
$("#update input").keyup(handler);
});
If the handler function uses the event object (e in the example), in modern browsers it's also available as a global event object, or in jQuery, e.originalEvent. The object doesn't exist if there's no event fired, though, in that case you've to pass a fake event object, containing the provided properties, to the handler, if it is needed.

JavaScript onTap functions

Still new to the forums, so I'll try my best to get across the problem. Basically I'm developing a mobile web app, and have several ontap functions for reloading the webpage after buttons clicked. Here is the code for two of my smaller onTap functions for demonstration purposes (so you don't have to sift through hundreds of lines of code). The licenses_button ontap function works perfectly fine, with no forms of errors whatsoever, but the back_button ontap function, and all other buttons that aren't created on the initial main page of the app won't act as button's and I have no idea why. Any advice? (I know the back_button has little to no content, I just removed a lot of it for debugging purposes and even this fails to work). Thanks for any advice!
$("#licenses_button").onTap(function(event){
$("#play_button").remove();
$("#banner").remove();
$("#licenses_button").remove();
$(".cloud").remove();
$(".cloudalternate").remove();
$("body").append("<div id='back_button'>Back</div");
});
$('#back_button').onTap(function(event) {
$('#back_button').remove();
});

$(selector).onTap(callback); attaches the handler to the selected elements at the moment it is called. Elements that are not yet created at this time cannot be selected (obviously since they do not exist yet) and thus, won't get the handler.
You need to attach the handler after you added an element.
For example:
$("#licenses_button").onTap(function(event){
$("#play_button").remove();
$("#banner").remove();
$("#licenses_button").remove();
$(".cloud").remove();
$(".cloudalternate").remove();
// Create the button.
var backButton = $("<div id='back_button'>Back</div");
// Append it to the body.
$("body").append(backButton);
// Attach the handler to the new button.
backButton.onTap(function(event) {
backButton.remove();
});
});

You mentioned the back_button and other buttons that aren't working are not created in the main page. Since these are created at a later time, you have to wait to set up the onTap event for those buttons AFTER you create the buttons. If you try to set the event handler up before they're created, they won't work.

How to add dojo event to a new elements on a form?

I have a form, so every form has its own delete link, I add questions dynamically with JS, I have following dojo function to make delete link works...
dojo.ready(function() {
dojo.query(".delete-link").onclick(function(el){
if(confirm("Really delete?")){
......
}
});
});
That function works properly, but when I add more questions (using JS), that new questions don't have the event on the delete link, any Idea to solve it?

The problem is that the click event was bound to all links that have the class "delete-link" on page load. When you create a new element through JS, it does not get automatically bound to that function because that link was not present on page load. You need to bind the link at the document level so that when the link is added, it will be automatically bound.
Bind it this way instead:
on(document, ".delete-link:click", function(){})
This is equivalent to jQuery's .live() function.
Please note that you'll have to require dojo's on module (dojo/on)

Disable a function

I have a tooltip that I want to disable. It is from this site and is basically set and called as follows:
this.tooltip = function(){....}
$(document).ready(function(){
tooltip();
});
I don't want to unbind the hover or mouseover events since they are also tied to other effects. I have tried to disable without success as follows (at the bottom of the page):
$(document).ready(function(){
this.tooltip = function() {}
})
and
$(document).ready(function(){
function tooltip() {}
})
Am I missing something?

EDIT:
Heres a thought... try taking your override out of the ready statement. That way it should override the function definition before onReady is ever fired.
this.tooltip = function(){return false;};
That wont work because the script calls itself in an external file, thus if you try to make it a blank function before hand then it overrides it, and if you do it afterwards it has already run, so while you override it it has already added its event handlers to the stack. You could jsut not include the file on the pages where you dont want the tooltips.
An easy way to handle this is to make the event handlers named functions instead of anonymous, then you can easily unbine only those functions from the event stacks with $('a.tooltip').unbind('click', tooltipClick); Ofcourse the more thorough way is to refactor it in to your own plugin with remove option or something of that nature. Also there are several tooltip plugins for jQ out there and im sure at least one, if not all will allow for disabling.

You do not need to unbind the tooltip function (since its purpose is only to run once) but the anonymous functions that it adds to the events of some elements..
There is a way to do it, only if you can alter the original tooltip code to include a namespace when binding the anonymous functions..
some examples..
in the tooltip source code there is
$("a.tooltip").hover(function(e){...})
this should be
$("a.tooltip").bind('hover.tooltip',(function(e){...});
the .tooltip next to hover means that we have defined a namespace for this function and we can now unbind it with
$("a.tooltip").unbind('hover.tooltip');

Ok, I was able to do it with this function. But it seems kind of hackish and may not be the most elegant solution.
$(document).ready(function() {
$(".tooltip").mouseover(function(){ $('#tooltip').remove() });
});
I'll keep this question open in case any better ideas show up.

How to get dojo.query to reutrn values for a dijit.Dialog

I have some code in which I am creating an dijit.Dialog with an Ajax call(href property) to populate the contents.
I what to parse the returned content to dojo.connect a click event to the links in the returned content.
But when I do a dojo.query("a",this.current_popup.domNode) I get an empty array back
Does anybody know how can get can attach a onclick to all the returned content?
Paul

It is less expensive to just bind an event handler to the DOM node of the Dialog widget, and use event delegation to capture any "a" clicks. This way, you can avoid any event handler cleanup, particularly if the contents of the Dialog change frequently. You can avoid the event handler cleanup if you use the widget's connect method to do the work.
So, if you are doing the connect inside a method in the dijit.Dialog, you could use something like:
this.connect("onclick", function(evt){
var node = evt.target;
if("a" == node.nodeName.toLowerCase()){
//node is an a tag, do what you want with it,
//for example, read node.href to get the URL attached to it.
//If you want to prevent following that URL and prevent further
//event bubbling, stop the event:
dojo.stopEvent(evt);
}
});
If you are doing this connection work outside the widget instance, instead of using this.connect, use widgetInstance.connect(), assuming widgetInstance is a variable that refers to the dijit.Dialog instance.
By using that version of connect, the widget will automatically unregister the event handler when the Dialog widget is destroyed, keeping the memory profile in check.

One way I found to do this was to add a delayed connect to the widget
dojo.connect(this.current_popup, "onDownloadEnd", function(){
dojo.query("a.popup",this.current_popup).forEach(function(node) {
// add your function add here
});
});
This runs after the ajax call is complete so you can now find the objects in the DOM