progressive enhancement, less complicated

(Explain)

(These examples assume a predefined my_callback function)

Bad:
  - fails if there is no javascript
  - links are more complicated to construct, harder to read
  - ?

<script type="text/javascript">

function do_submit( url ) {
  $.getJSON( url, my_callback );
};

</script>
<a href="#" onclick="do_submit('/action?state=1');return false;">Yes</a>
<a href="#" onclick="do_submit('/action?state=0');return false;">No</a>

=================================================

Better:
  - progressive enhancement, links work without javascript
  - it gets complicated:
    - server needs to test for X-Requested-With header and return html/redirect/json
  - search engines can follow links, but you should never give unauthorized users
    access to modify things anyways, so this point is moot
<script type="text/javascript">

$(function(){

  $('a').click(function(){
    var url = $(this).attr( 'href' );
    $.getJSON( url, my_callback );
  });

});

</script>
<a href="/action?state=1">Yes</a>
<a href="/action?state=0">No</a>

=================================================

Best? (simpleAjax):
  - like "Better" but the little details are handled:
    - defaults to $.getJSON, but anything can be used with the "request" option
    - links unclickable while waiting for their ajax response
<script type="text/javascript">

$(function(){

  $('a').simpleAjax({ complete: my_callback });

});

</script>
<a href="/action?state=1">Yes</a>
<a href="/action?state=0">No</a>

More:
  - if used on the form, the entire form is submitted via ajax
    - all form elements disabled while waiting for the ajax response
  - if used on any form elements, they are submitted when changed
    - form element groups, form submit button disabled while waiting for their ajax response
    - text inputs and textareas will auto-submit after a timeout
<script type="text/javascript">

$(function(){

  $('form, form :input:not(:submit)').simpleAjax({ complete: my_callback });

});

</script>
<form action="/action" method="get">
  left: <input type="radio" name="position" value="left">
  center: <input type="radio" name="position" value="center">
  right: <input type="radio" name="position" value="right">
  age: <select name="age">
    <option value="under18">Under 18</option>
    <option value="exactly18">Exactly 18</option>
    <option value="over18">Over 18</option>
  </select>
  status: <input type="checkbox" name="status" value="enabled">
  text: <input class="text" type="text" name="text" value="testing, 1 2 3"> text
  big text: <textarea name="biggie">biggie</textarea>
  <input class="submit" type="submit" name="submit" value="Submit">
</form>