Develop Reference

Code a Web Analytics Tool

I am trying to capture click events in my existing Java/J2EE intranet application.
The application has been in production and we are trying to add this feature.
In order to accomplish this; we've created a javascript function which sends the required data in the form of Ajax call to server and we've able to capture the required data.
However, in order to implement this, we had to manually add javascript calls via onclick events to places from where we wanted to capture data.
This includes radio , submit , menu clicks ,etc. Is this approach of adding onclick tags to respective controls correct or is there a smarter way to handle this?
We're a bit resistant to use a tool for this considering some compliance directives.
Sample onclick call:
onclick="footprint.trace('CLK_REGISTER_BTN');validateForm();"

<script type="text/javascript">
$(window).click(function(e) {
alert(e.target.id); // gives the element's ID
alert(e.target.className); // gives the elements class(es)
});
</script>
Above code resolved my query. I was able to get all click events on page which are super set of button clicks and hence able to action accordingly.

ASP.Net checkbox postback doesn't fire

I'm making a change to an existing ASP.Net application via JS. I'm unable to look at nor edit the original ASP.Net code. What I am able to do is inject JS into the webpage. There are two radio buttons, and I want to change the default from one to the other, which I can do easily via JS. But when using the web app, when the other radio is chosen I can easily see there is a server post back happening and my JS code to toggle the checkbox does not fire this. Because of this, some server side function isn't getting ran to allow me to submit the form.
Just for reference here is my JS code that works fine, nothing to troubleshoot here. But even after inspecting the radio in Chrome I'm unable to see any event being fired. I might not fully understand how to inspect elements in chrome, any advice?
$(window).load(function() {
// this tests for the selected value
if ($("input[name*='radShippingAddressList']:checked").val() == "radSelectAddress") {
// this changes the radio button
$("input[name*='radShippingAddressList'][value='radAsBilling']").prop("checked", true);
}
});

You need to invoke the click method on the checkbox, in order for post-back to happen and the server side code to run. Try doing this instead of setting checked to true:
$("input[name*='radShippingAddressList'][value='radAsBilling']").click();

Auto postback on the control has to be enabled in order for prop changes to affect post back.
AutoPostBack="True"

How can I reload a popup on the success branch of an ajax call?

I have a popup with fields which should be filled in and after I hit save, I want to reload the content of the popup.
I want to do this by giving the reload command in the succes function of the ajax call. So far I tried
window.location.reload();
and
document.getElementById('#idOfThePopupContent').location.reload();
but nothing seems to work. How can I solve this problem?

If it's inside a FORM tag then use reset button.
If it's not then you have to do it manually using JS or jquery.
1. empty the values of text,area fields,
2. remove checked,selected attributes from checkboxes,radio,select tags.
If you are using a single page type application with MVC, then re-render the view itself.

javascript or ajax actionlink

I am working with mvc4 and new to working with it. I have a question around the Ajax ActionLink.
I have a long list of products, with each, there is an add to bag button. In the past I would use jquery to bind a click event to this button and then use javascript to make a server side request to a controller action.
I want all interaction to not cause a full page postback.
I am wondering is it best to follow my approach with javascript or use the Ajax ActionLink? What are the pros and cons of either approach?

Both are same.
Ajax ActionLink : less to write, works with conjuction Jquery un-obtrusive. Not much control on the markup.
HtML Link + Jquery Ajax call : will you give full control on the click event, you can add extra options to it.

What HTML Form Action to use when no data is actually being sent?

I am working on learning JQuery and creating a simple HTML / JS calculator. I used a standard HTML form to allow the user to enter the data they want calculated and when the user clicks submit my JS / JQuery calculates and spits out the answer.
My question is what would be the semantically correct way to deal with the HTML form action being that Im not actually posting any data? I dont want to leave it default because when I click my to trigger an event it changes the URL and I dont want to use POST because Im not posting anything. Any help is appreciated!

I would replace the submit button with a normal button, and prevent the form being "submitted" at all. then use javascript to do the calculations on button click. This way the form never gets submitted, and you don't need a method or action at all.

If you really want to do a request at all, you probably just want to do a GET...check the list of HTTP request methods here to see if another one would better fit your needs.
If you are doing everything with javascript, though, you shouldn't be submitting anything at all. Try changing the submit button into a link (or just a regular button) and bind your calculator logic to its click event.

Don't specify any action(Default is GET). Use an html button which would call the js function on the click event. That would do the work on client side

You don't actually need to put input elements inside a form. Since you don't intend to submit the form, I would just omit it entirely.