Refresh Ajax Button in Joomla module

Question

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?

Answer 1

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()

or

$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 

or

&tmpl=component 

Answer 2

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.