ajax.tpl 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!doctype html>
  2. <title>jQuery Example</title>
  3. <script type="text/javascript"
  4. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. var $SCRIPT_ROOT = "{{ request.script_name }}";
  7. </script>
  8. <script type="text/javascript">
  9. $(function() {
  10. var submit_form = function(e) {
  11. $.getJSON($SCRIPT_ROOT + '_add_numbers', {
  12. a: $('input[name="a"]').val(),
  13. b: $('input[name="b"]').val()
  14. }, function(data) {
  15. $('#result').text(data.result);
  16. $('input[name=a]').focus().select();
  17. });
  18. return false;
  19. };
  20. $('a#calculate').bind('click', submit_form);
  21. $('input[type=text]').bind('keydown', function(e) {
  22. if (e.keyCode == 13) {
  23. submit_form(e);
  24. }
  25. });
  26. $('input[name=a]').focus();
  27. });
  28. </script>
  29. <h1>jQuery Example</h1>
  30. <p>
  31. <input type="text" size="5" name="a"> +
  32. <input type="text" size="5" name="b"> =
  33. <span id="result">?</span>
  34. <p><a href=# id="calculate">calculate server side</a>
  35. </body>
  36. </html>