We Keep Coding

jQuery function and Page Reload issue (maybe)

I have this code (accepted solution).
This code snipped loads from a js file. When I put a breakpoint at this function, I see that this function getting called when the page (that includes it) is loaded.
After the initial page load, when I choose an option in this page, that anchor element is reloaded (Ajax) exactly same (js file does not reload) as part of the piece of data. However, now when I click on anchor link, it does not fire / open the outlook window.
Is it something about jQuery functionality that I am mis reading/using?
How do I resolve this?

If the element is reloaded you'll need to rebind the click event to it.
Alternatively to the way you are doing it you could bind to the window/body and just specify the id as the selector like this:
$('body').on('click', '#emailLink', function (event) {
// your code here...
});

Will DOM reconstructs after partial view is loaded via ajax?

Div is filled using ajax call which returns a partial view . In this case,Do DOM will be reconstructed ? . Since ,I have some javascripts preloaded which will handle client side events of that partial view .Do I need to attach event handler using live event or On event (jquery).

ajax calls will load the partial views without reconstructing the entire page. Just make sure you aren't firing the click events off of a submit button (unless you are preventing the default to stop the post back). Since the partial is loaded after the page has loaded you need to keep your script in the main page but tie the events to the document instead of the selector. something like
$(document).on('click', '.classSelector', function(){
//your code here
});
a click event defined in this way will trigger off of items on your partial

How can I re-enable a JQuery script after a failed validation in a primefaces page?

Ok here's the deal... I have a primefaces page, and I'm modifying the style-class of some components using a JQuery Script. The problem is that, after a failed validation of some fields, the script stops modifying the style-class so the style fails for some components. I'm trying to refresh the page using update="#form" on the submit button, but it won't work as the validation is ajax level. Refreshing the page manually works but is not desirable, and won't keep nor the error messages neither the field values that were validated without errors.

I can only guess what your script is doing but most likely it's working on DOM-Elements which are changed or replaced by an AJAX-call. Example:
$(document).ready(function() {
$('input').on('change', function() {
$(this).add('class', 'changed');
});
});
This script registers an event on all input-fields it's finding after the DOM is ready. If an AJAX-call adds a new input field or rerenders one of the input-elements you don't have automatically registered events on them.
You need to register the events after the AJAX-call again via e.g. oncomplete="registerEvents();" where registerEvents does the same things you did in your $(document).ready function.
Beware of registering events multiple times on the same element.

Best practice for triggering events on calling page from an ajax page

I have a page that lists a bunch of files. This page can be accessed directly via a URL or it can be loaded in a modal dialog via ajax from a different page.
If the files page is loaded via ajax, I would like to allow the user to click the name of the file and trigger an action in the page which loaded the files page. For example, there is an article edit page. This page contains an "attach a file" button. When the user clicks the button, the files page is loaded in a modal dialog and when a filename is clicked, the id of the file is inserted into the article form and the dialog is closed. However there is also an event edit page with a similar button, but I would like to handle the filename-click event slightly differently on this page.
I'd like to handle these click events slightly differently depending on the calling page. At the moment I'm defining a handler function with global scope in the page containing the form to which files are being attached, then testing for that function in the the files-page when the filename is clicked and calling if it exists. It works but it feels a little hacky. Is there some kind of best practice for this sort of thing that I'm not aware of?
I'm using jQuery if this makes things easier in any way..

Instead of relying on a global handler function as the interface between pages, you could rely on custom events instead:
"calling page":
$(document).bind("fileClicked", function(event, fileName) {
alert(fileName);
});
"page loaded via ajax":
$(".file").click(function() {
$(document).trigger("fileClicked", [$(this).text()]);
});

You should look at jQuery Live
Attach a handler to the event for all elements which match the current selector, now and in the future.
When a Ajax page is loaded it's not processed by the DOM in the same way the main page was loaded, therefore using live will attach the event on all current event emitters as well as the future ones such as dynamic Ajax content
Within your Ajax model
<div>
...
Add to main page
...
</div>
and within your static page (the one originally loaded)
$("#ajax_click_event").live('click',function(){
//Work wit the value of the form within the ajax div.
})

Display modal after postback without ASP.NET Ajax

I have an ASP.NET button. When the button is clicked, I'd like a modal popup to display after the server-side code for the button runs. I don't want to use the ASP.NET Ajax control toolkit modal popup extender.
With ASP.NET Ajax, I can hook into the end request event. Is there a way to do this without ASP.NET Ajax. just jQuery? I basically want to run some javascript after the server side click code runs, after the postback.

You can use ScriptManager.RegisterStartupScript() for this, something like this:
ScriptManager.RegisterStartupScript(MyUpdatePanel, GetType(), "post-load-script",
"$(function() { $('#dialog').dialog(); });", true);
Then the request from the UpdatePanel comes back it would be running this:
$(function() {
$('#dialog').dialog();
});
You could of course put anything you wanted for script there, but if you simply used a Label or whatever in the #dialog <div> that populated as part of the update, this would show it (if you're using the jQuery UI dialog, there are others). The concept is very general, you're just registering some JavaScript to run when the async request comes back, which modal and how you want to do that is very open.

It depends on what method you intend to use to start the postback via jQuery. If you're going to use an async postback (like jQuery.ajax), you can just provide a method to call when the postback is complete. See http://api.jquery.com/jQuery.ajax/.
If you're just going to use the normal postback, you can use the Page.ClientScript.RegisterClientScriptBlock from your server-side method to register a script that will run after the postback completes.