XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Community Support forums / 
  3. XOOPS general usage questions 
  4.  / Ajax calls directly from Jquery
Register
1
kaotik
Ajax calls directly from Jquery

  • 2009/8/19 14:38

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


I've made this simple tutorial based on other ones on the web:

Create an html file called test.html. Make sure you have in the same directory jquery and firebug. Now place this code inside:
le="color: #000000"><?php <script type="text/javascript" src="firebug.js"></script> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".button").click(function(event) { var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; //console.log(name); //used with firebug $("#box").load('myserv.php',dataString); }); }); </script> <form name="contact" action=""> <fieldset> <label>Name</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label>Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label>Phone</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <br /> <input type="button" name="button" class="button" id="button" value="Send" /> </fieldset> </form> <div id="box"></div>


create another file called myserv.php in the same directory and place this code inside:
<?php echo 'Name:'.$_GET['name'].', email:'.$_GET['email'].', phone:'.$_GET['phone']; ?>


Now test it! Should I do more tutorials regarding jquery?
2
kaotik
Re: Ajax calls directly from Jquery

  • 2009/8/19 18:52

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


For further reference you can read these:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

http://jqueryfordesigners.com/using-ajax-to-validate-forms/
3
frankblack
Re: Ajax calls directly from Jquery

  • 2009/8/19 20:12

  • frankblack

  • Just can't stay away

  • Posts: 830

  • Since: 2005/6/13


Quote:
Now test it! Should I do more tutorials regarding jquery?


Of course! More important for me to know is how to access a certain function in a php file instead of creating a php file for every ajax.

Another matter seems to be interesting (maybe): What to do against some code overhead?

Case: Assume that there is an module that uses jquery in blocks and in other php files.
How to prevent that block and other php file load simultaneously jquery.js?

Possible:
a) add a define for each file/function where jquery is used and IF defined do not load jquery.js again
b) add jquery.js to your theme

But:
-> a) gets complicated if there are various modules using jquery
-> b) why load jquery while it is not used everywhere
4
Burning
Re: Ajax calls directly from Jquery

  • 2009/8/19 23:59

  • Burning

  • Theme Designer

  • Posts: 1163

  • Since: 2006/8/22


hi'

Just my own experience with Ajax library and XOOPS :

- only one Ajax library per theme (more is too heavy and some matters with compatibility )
- scripts are centralized in a specific folder (www/theme/my-theme/js/)
- scripts are not called by theme.html but by modules templates (overrided). So when a module doesn't need Ajax nothing is called
5
bumciach
Re: Ajax calls directly from Jquery

  • 2009/8/20 6:58

  • bumciach

  • Not too shy to talk

  • Posts: 153

  • Since: 2007/6/25


Quote:

frankblack wrote:
Possible:
a) add a define for each file/function where jquery is used and IF defined do not load jquery.js again

In my modules I use wherever I need:
le="color: #000000"><?php $xoTheme->addScript('/js/jquery-1.3.2.min.js');

It seems that the file is always loaded only once. Of course, other modules / blocks and themes can still load their duplicate libs.
6
kaotik
Re: Ajax calls directly from Jquery

  • 2009/8/20 8:17

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


frankblack:
A: This one is solved easily with a little javascript and PHP:
Possibility 1
<script type="text/javascript"> if (jQuery) { // jQuery is loaded } else { // jQuery is not loaded <?php $xoTheme->addScript('/js/jquery-1.3.2.min.js'); ?> } </script>

Possibility 2
le="color: #000000"><?php <script type="text/javascript"> if (typeof jQuery == 'undefined') { // jQuery is not loaded } else { // jQuery is loaded } </script>


Reference

The second one is also something I need :) I'm working on a solution.
7
hervet
Re: Ajax calls directly from Jquery

  • 2009/8/20 8:53

  • hervet

  • Friend of XOOPS

  • Posts: 2267

  • Since: 2003/11/4


Quote:

kaotik wrote:
le="color: #000000"><?php <script type="text/javascript" src="firebug.js"></script> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".button").click(function(event) { var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; //console.log(name); //used with firebug $("#box").load('myserv.php',dataString); }); }); </script> <form name="contact" action=""> <fieldset> <label>Name</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label>Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label>Phone</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <br /> <input type="button" name="button" class="button" id="button" value="Send" /> </fieldset> </form> <div id="box"></div>



have a look to this jQuery function, serialize().
For example :
le="color: #000000"><?php var formContent = $("#myform").serialize();
8
kaotik
Re: Ajax calls directly from Jquery

  • 2009/8/20 9:48

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


Thanks Hervet! That works great!
With this you no longer have to create an individual variable for each form element. Jquery (with serialize) grabs everything inside the form. If you want to see how the data is being passed to the server, uncomment console.log
Based on Hervet's suggestion, here's a revised version (much simpler) of my tutorial:
le="color: #000000"><?php <script type="text/javascript" src="firebug.js"></script> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".button").click(function(event) { var formContent = $("#contact").serialize(); //console.log(formContent); //used with firebug $("#box").load('myserv.php',formContent); }); }); </script> <form name="contact" id="contact" action=""> Name <input type="text" name="name" id="name" size="30" value="" class="text-input" /> Email <input type="text" name="email" id="email" size="30" value="" class="text-input" /> Phone <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <br /> <input type="button" name="button" class="button" id="button" value="Send" /> </form> <div id="box"></div>


file myserv.php is kept the same.
9
hervet
Re: Ajax calls directly from Jquery

  • 2009/8/20 9:54

  • hervet

  • Friend of XOOPS

  • Posts: 2267

  • Since: 2003/11/4


Also, sometimes, don't forget that data need to be returned encoded in utf8 (from Php of course)
10
kaotik
Re: Ajax calls directly from Jquery

  • 2009/8/20 10:18

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


Lack of utf support wasn't jquery's fault, it was the html
You have to define your encoding on the html page to support international characters.
Here's the corrected version:
le="color: #000000"><?php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="firebug.js"></script> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".button").click(function(event) { var formContent = $("#contact").serialize(); //console.log(formContent); //used with firebug $("#box").load('myserv.php',formContent); }); }); </script> </head> <body> <form name="contact" id="contact" action=""> Name <input type="text" name="name" id="name" size="30" value="" class="text-input" /> Email <input type="text" name="email" id="email" size="30" value="" class="text-input" /> Phone <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <br /> <input type="button" name="button" class="button" id="button" value="Send" /> </form> <div id="box"></div> </body> </html>
(1) 2 3 4 »

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Donat-O-Meter

Stats
Goal: $15.00
Due Date: Jul 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $15.00
Make donations with PayPal!

Latest GitHub Commits