6.23.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. $(document).ready(function() {
  2. $('#letter-a a').click(function(event) {
  3. event.preventDefault();
  4. $.ajaxSetup({
  5. url: 'a.html',
  6. type: 'POST',
  7. dataType: 'html'
  8. });
  9. $.ajax({
  10. type: 'GET',
  11. success: function(data) {
  12. $('#dictionary').html(data);
  13. }
  14. });
  15. });
  16. $('#letter-b a').click(function(event) {
  17. event.preventDefault();
  18. $.getJSON('b.json', function(data) {
  19. var html = '';
  20. $.each(data, function(entryIndex, entry) {
  21. html += '<div class="entry">';
  22. html += '<h3 class="term">' + entry.term + '</h3>';
  23. html += '<div class="part">' + entry.part + '</div>';
  24. html += '<div class="definition">';
  25. html += entry.definition;
  26. if (entry.quote) {
  27. html += '<div class="quote">';
  28. $.each(entry.quote, function(lineIndex, line) {
  29. html += '<div class="quote-line">' + line + '</div>';
  30. });
  31. if (entry.author) {
  32. html += '<div class="quote-author">' + entry.author + '</div>';
  33. }
  34. html += '</div>';
  35. }
  36. html += '</div>';
  37. html += '</div>';
  38. });
  39. $('#dictionary').html(html);
  40. });
  41. });
  42. $('#letter-c a').click(function(event) {
  43. event.preventDefault();
  44. $.getScript('c.js');
  45. });
  46. $('#letter-d a').click(function(event) {
  47. event.preventDefault();
  48. $.get('d.xml', function(data) {
  49. $('#dictionary').empty();
  50. $(data).find('entry').each(function() {
  51. var $entry = $(this);
  52. var html = '<div class="entry">';
  53. html += '<h3 class="term">' + $entry.attr('term');
  54. html += '</h3>';
  55. html += '<div class="part">' + $entry.attr('part');
  56. html += '</div>';
  57. html += '<div class="definition">';
  58. html += $entry.find('definition').text();
  59. var $quote = $entry.find('quote');
  60. if ($quote.length) {
  61. html += '<div class="quote">';
  62. $quote.find('line').each(function() {
  63. html += '<div class="quote-line">';
  64. html += $(this).text() + '</div>';
  65. });
  66. if ($quote.attr('author')) {
  67. html += '<div class="quote-author">';
  68. html += $quote.attr('author') + '</div>';
  69. }
  70. html += '</div>';
  71. }
  72. html += '</div>';
  73. html += '</div>';
  74. $('#dictionary').append($(html));
  75. });
  76. });
  77. });
  78. $('#letter-e a').click(function(event) {
  79. event.preventDefault();
  80. var requestData = {term: $(this).text()};
  81. $.get('e.php', requestData, function(data) {
  82. $('#dictionary').html(data);
  83. }).fail(function(jqXHR) {
  84. $('#dictionary')
  85. .html('Sorry, but an error occurred: ' + jqXHR.status)
  86. .append(jqXHR.responseText);
  87. });
  88. });
  89. $('#letter-f form').submit(function(event) {
  90. event.preventDefault();
  91. var formValues = $(this).serialize();
  92. $.get('f.php', formValues, function(data) {
  93. $('#dictionary').html(data);
  94. });
  95. });
  96. var url = 'http://examples.learningjquery.com/jsonp/g.php';
  97. $('#letter-g a').click(function(event) {
  98. event.preventDefault();
  99. $.getJSON(url + '?callback=?', function(data) {
  100. var html = '';
  101. $.each(data, function(entryIndex, entry) {
  102. html += '<div class="entry">';
  103. html += '<h3 class="term">' + entry.term + '</h3>';
  104. html += '<div class="part">' + entry.part + '</div>';
  105. html += '<div class="definition">';
  106. html += entry.definition;
  107. if (entry.quote) {
  108. html += '<div class="quote">';
  109. $.each(entry.quote, function(lineIndex, line) {
  110. html += '<div class="quote-line">' + line + '</div>';
  111. });
  112. if (entry.author) {
  113. html += '<div class="quote-author">' + entry.author + '</div>';
  114. }
  115. html += '</div>';
  116. }
  117. html += '</div>';
  118. html += '</div>';
  119. });
  120. $('#dictionary').html(html);
  121. });
  122. });
  123. $('#letter-h a').click(function(event) {
  124. event.preventDefault();
  125. $('#dictionary').load('h.html');
  126. });
  127. var $loading = $('<div id="loading">Loading...</div>')
  128. .insertBefore('#dictionary');
  129. $(document).ajaxStart(function() {
  130. $loading.show();
  131. }).ajaxStop(function() {
  132. $loading.hide();
  133. });
  134. $('body').on('click', 'h3.term', function() {
  135. $(this).siblings('.definition').slideToggle();
  136. });
  137. });