facebook twitter

Blog

Categories » jQuery » jQuery Ajax messages

jQuery Ajax messages

  1. # When you update a field in a page and it is not reloading there is a big chance that it is using jQuery/Ajax.
  2.  
  3. # Today I'm going to show you how to use Ajax at your page
  4.  
  5. # First of all you've to include jQuery
  6.  
  7. <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  8.  
  9. # Create functions
  10.  
  11. <script type='text/javascript'>
  12.  
  13. function showMessage(msg, color){
  14. $('#message').fadeIn('fast')
  15. .html('<span style="color: ' + color + '">' + msg + '</span>')
  16. .fadeOut(5000); # After 5 seconds the message will fade out
  17. }
  18.  
  19. function AjaxCall(varName){
  20. $.ajax({
  21. url: '/myClass/myFunction', # Put your file or function here. In your file you can use
  22. # the variable with the $_GET method. Put your response in a JSON array
  23. type: 'GET', # You can use GET, POST, DELETE or PUT
  24. data: {'name':varName},
  25. succes: showMessage(varName, 'green'), # If call is succesfull show message
  26. cache: false
  27. });
  28. }
  29. </script>
  30.  
  31. # In your HTML create a div with id = success and call function
  32.  
  33. <div id='success'></div>
  34.  
  35. <input type='button' value='Show my Name' onClick='AjaxCall("My name is Webplication")' />
  36.  
  37. # That's all, your ready to use it at your page!

Comments