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.

Expanding "Activate Later" functionality

I would like to call some implemented validation Javascript method
validatePageProperties = function() {...}
When I click on the Button "Activate Later" (see the pic). Any Idea how to do this?

You will need to overlay the siteadmin at /libs/wcm/core/content/siteadmin. Just copy that node structure and place it at /apps/wcm/core/content/siteadmin. Then navigate to /apps/wcm/core/content/siteadmin/actions/activate/menu/activateLater and place your javascript function in the handler property. You may need your custom javascript handler to call the existing handler when it finishes.
Also your custom javascript will need to be loaded in the admin. You can do this by putting it into a client library (cq:ClientLibraryFolder) and assigning it a category of cq.wcm.admin.

Call JavaScript function when button loaded by ajax is clicked

I have an html form that loads its contents through ajax and includes buttons that, when clicked, should execute a JavaScript function that is defined in the html page's script tag. SO: Button is loaded through ajax (works), but when button is clicked, it doesn't trigger the desired action and doesn't trigger a JavaScript error in Firebug. How does one get the onclick signal of a bunch of buttons loaded through ajax to bind to an already existing JavaScript function?
EDIT: I should have noted also that I am not using JQuery. I am willing to do so if it is the only way, but otherwise, I would prefer to use only native JavaScript.
EDIT2: My problem was a bit more involved, but as was stated in the chosen answer, you should be able to set the onclick event handler in the php script before sending the data through ajax. If you have a data-heavy response and want to reduce bandwidth, you might consider doing everything client-side, but I find it easier in most situations just to set the onclick attribute in the php script.

Your dynamically generated button could have an inline event bound to it. When generating the button, simply make sure it has an onclick="alreadyExistingFunc();" and the page will happily execute it.
Alternatively, when your AJAX data is finished writing itself into the document, find the new button(s) and bind the event to them:
function ajaxSuccess()
{
document.getElementById('newButtonIdHere').onClick = function() {
alreadyExistingFunc();
}
}
That should do the trick. Also note that if you ever "need" a small part of jQuery to do something (like selectors or event handling), you can almost always do it without loading the whole library.

Append/insert the HTML (retrieved AJAX response) to DOM and bind click event to it:
function alreadyExistingFunc() {
alert('button is clicked!');
}
var ajax_data ="<button id='my-button'>My Button</button>";
$('body').append(ajax_data).find('#my-button').on('click', function(e){
alreadyExistingFunc();
// some more code...
});
OR:
$('body').append(ajax_data).find('#my-button').on('click', alreadyExistingFunc);

You could also use a callback:
function getAjaxContent(callback) {
$.ajax({url: "url"}).done(function() {
callback(data);
});
}
getAjaxContent(function (data) {
//ajax content has been loaded, add the click event here
}

jquery button trigger server side onclick event

I am using a jquery dialog, when user click ok, the server side onclick event should be fired, if click cancel, nothing happened.
i have to prevent the click function at the beginning by preventDefault() function.
$(document).ready(function () {
$("#<%=submit.ClientID %>").click(function (event) {
event.preventDefault();
$("#confirm").dialog({
buttons: {
"OK": function () { $(this).dialog("close");
Here should be the code to trigger the server side click event
},
"Cancel": function () { $(this).dialog("close");},
}
});
});
});
I don't know how to trigger a server side onclick event. any ideas? thanks

https://stackoverflow.com/a/10583339/1202242
I used two button, and one is hidden.
It solved my problem perfectly

Put the event.preventDefault() in the cancel part or some kind of condition for it so it isn't running on every click.

i think you are confusing between server and client sides.
if you want to trigger event on the server side you need to notify him (can be done by ajax call). the click event is a client side event that will not do anything on the server side.
try to put some code under the "OK" function to notify the server whatever you want like via ajax call.
anyway you should move the event.preventDefault() call into the "Cancel" function.
edit: another way to approach it is to prevent the submit to happen if you don't want it. at your form tag add onsubmit="foo()"
and define:
function foo(){
//call your dialog and return true to continue the submit and false to cancel.
}

It looks a little bit dependant on implementation details (even if they're so widely used that they won't be changed) but code is this:
__doPostBack('submit','OnClick');
This will execute the OnClick event handler for the control named submit. As reference take a look to this little tutorial about how postbacks works in ASP.NET.

Call javascript from asp.net mvc

How can i call a javascript function from a mvc controller similar
to what you would do in webforms with ICallbackHandler?
Is it possible?
Thank you.

Controller actions cannot call javascript functions. They return action results. Javascript code should be contained on the client side. So if you want to call a javascript function that should execute under certain circumstances you could subscribe for the corresponding event and when this event is triggered call the function.
For example if you wanted to call a javascript function when a button is clicked using jQuery you could do the following:
$(function() {
// subscribe for the click event
$('#someId').click(function() {
// the button is clicked => execute some javascript function here
});
});