I've just started looking at JQuery. I don't have any AJAX in my web application at present.
My existing JavaScript in my HTML looks like:
<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
<a href="AddRecord.ASP&Action=ADD">ADD</a>
<a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>
This displays Buttons for [Add] and [Find]. For Find it is necessary to Submit the form, and I use MyFormSubmit() which validates the data, adds a visual effect to the page, and then POSTs the data.
I could add a CLASS or ID to the for the Find button and in JQuery I could write something like:
$(function() {
$(".MySearchButtonClass").click(function() {
// validate and process form here
});
});
At my "novice" stage of understanding with JQuery I don't get why I would do it this way
My old way identifies the Method near the object. There may be a risk that the JS has not loaded before the user presses the button (is there? The LOAD for the JS is right at the top of the page).
The JQuery Document Ready method won't be activated until the document is loaded (which I assume guarantees that the JS is all present and ready to be run?), but it moves the code to a separate part of my HTML file - so when I see the MyButtonArray DIV in the HTML source it isn't obvious to me which objects have methods, and which do not.
Can you please help me understand what my options are and the benefits / gotchas that I should look out for?
Edit: I'm comfortable that DOM manipulation - such as a LightBox that can appear when any thumbnail with class "LightBoxThumb" is clicked - would use Unobtrusive Javascript.
However I am struggling to persuade myself that a button that has a specific action should have its method applied in that way. (I certainly wouldn't put any code on the button other than a single function call to something "elsewhere", but to my mind that is my best clue as to what that button does, and layers of Unobtrusive Javascript may make that much harder to determine.)
Edit2 - Accepted Answer
I've taken Russ Cams answer. It describes Unobtrusive Javascript in a way that has been helpful to me in understanding more about how & when that should be used.
For the moment (may change when I have more experience!) I'll stick with an OnClick event for a single, non-changing, action on an object as I feel that will be easier for me to debug - and diagnose if problems arise. For ZebraStripes on a table that allows click on heading column to sort (and situations of that type) I can see the benefits of the Unobtrusive Javascript approach
Russ's final comment was particularly helpful, repeated here:
"@Kristen - You're right, like a lot of programming topics, there is more than one approach and people will vehemently stand by their beliefs! If we're talking about a single method for a single button, I totally understand where you're coming from...
If we're talking about lots of JavaScript, with same function calls for more than one element, different function calls for different methods, etc. I think that it would be more difficult for oneself to mix inline and unobtrusive approaches, and it would be better to adopt one or the other approach"