刷新Joomla模块中的Ajax按钮

I have a component and a module.

This module has:

<form action="#" method="post" name="signup">
  <input type="text" name="address" id="address" value="Enter email address" size="30" />
  <input type="submit" name="submit" value="Signup" />
  <div id="msg"></div>
</form>

<script type="text/javascript">

window.addEvent('domready', function(){
  $('signup').addEvent('submit', function(e) {
    //Prevent the submit event
    new Event(e).stop();
    var address = $('address').value; 
    // check email using regex
    var address_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(!address_regex.test(address)){ $('msg').innerHTML = 'Please enter a valid email address.'; return; }
    new Ajax('index.php?option=com_traincomponent&task=adduser&template=raw', { 
      method: 'get', 
      data: { 'address' : address }, 
      onRequest: function() { $('msg').innerHTML = 'Please wait...'; }, 
      onComplete: function(response) { 
        if (response != '') $('msg').innerHTML = response;
        else msg.html('Please enter your email address.');
      } 
    }).request();
  });
});
</script>

Component com_traincomponent has a /controller/ajax.raw.php

    function adduser() {
  $app = JFactory::getApplication(); 
  $model = $this->getModel('signup'); 
  $data = $model->addUser(); 
  echo $data; 
  $app->close(); 
}

    function signup() {
  $address = JRequest::getVar('address', '');
  $msg = 'Thank you for registering!';
  if ($address != '') {
    $db = &JFactory::getDBO();
    $address = $db->getEscaped($address); // escape the email string to prevent sql injection
    $db->setQuery("SELECT * FROM `#__users` WHERE `email`='$address'");
    $db->Query();
    if ($db->getNumRows() != 0) $msg = 'You are already registered, thank you.';
    else {
      $db->setQuery("INSERT INTO `#__users` (`name`, `username`, `email`, `usertype`, `block`, `gid`, `registerDate`) VALUES ('default', '$address', '$address', 'Registered', 0, 18, '".date('Y-m-d H:i:s')."')");
      $db->query();
      $user_id = $db->insertid();
      $db->setQuery("INSERT INTO `#__core_acl_aro` (`section_value`, `value`, `name`) VALUES ('users', $user_id, '$address')");
      $db->query();
      $aro_id = $db->insertid();
      $db->setQuery("INSERT INTO `#__core_acl_groups_aro_map` (`group_id`, `aro_id`) VALUES (18, $aro_id)");
      $db->query();
    }
  } else {
    $msg = 'Please enter an email address.';
  }
  return $msg;
}

But the problem is that when I click submit button, it still refreshes the page and doesn't do the ajax function.

I'm actually getting the error Uncaught TypeError: Object [object Object] has no method 'addEvent'

Any idea?

If this is indeed a Joomla! 1.5 extension, it most likely uses MooTools 1.1.x.

In this case, the appropriate selector would be:

$$('form[name=signup]')

The rest of your code should probably work.

Your error is caused because null is returned by the original selector.

In Joomla 3.1 can we assume your template has loaded jQuery and $ is actually jQuery? And the code instead is definitely coming from a mootools-based 1.5 implementation?

If so, selectors based on "name" such as $('signup') won't work at all, and adding ids such as form id="fsignup" will definitely help. Below I list several suggestions, you really need to refactor the whole thing; I may have missed something there is so much to fix: in order to make this more readable I have prefixed the wrong lines with X

Mootools to jQuery:

X window.addEvent('domready')

could become

jQuery(function() { 
  // code that will be run after dom tree is initialized
});

and

X $('signup').addEvent('submit', function(e) { ...

would become

$('#fsignup').submit(function(e) { ...

On the communication side

X new Ajax

could be replaced with

$.get(

Joomla 1.5 to 3

The function :

X $address = $db->getEscaped($address)

is deprecated and should be

$address = $db->quote($address);

The queries are built from string, I didn't check but there may be some unescaped values, remember

$db->quote() for values
$db->quoteName() for column names

The input is parsed with

X JRequest::getVar()

which is deprecated too; but besides being deprecated, it's implementation in J2.5 is incomplete so you're supposed to use

JFactory::getApplication()->input->get...

The function

X $db->Query()

defies my memory, it used to be $db->query but now it's supposed to be:

$db->execute()

when you're running inserts or updates; whilst if you are retrieving data, after you $db->setQuery() you should

$db->loadResult()

$db->loadObjectList()

or one of the other utility methods exposed for returning data as an array etc.

Finally, the controller is invoking a model which you haven't provided, and there is a method in the controller by the same name (signup), maybe you have a bit of a mixup there too:

The function addUser() is trying to load a model "signup" and invoke the method addUser() on it; and the signup function is just sitting there, not being invoked by your code.

Joomla parameters:

X &template=raw

should be replaced with

&format=raw

&tmpl=component