How can I create an ajax on/off toggle? I am trying to create a simple on/off link using jquery and ajax. Basically what I want to to is add a link to a page that when clicked will insert a row into my database and update the text of the link. Then when clicked again, that record will be deleted from the database.

So far everything works as expected but the problem is that the second time the link is clicked, the record is deleted like it should, but the page refreshes and redirects to the homepage.

I am following the "plus 1 vote widget" example from Pro Drupal Development and am trying to alter the code to suit my needs. Following is my .js file.

$(document).ready(function() {
  $('a.toggle-visibility-links').click(function() {
    var parentDiv  = $(this).parent();
    var toggleSaved = function (data) {
      $(parentDiv).html(data.toggleon);
    }
    $.ajax({
      type: 'POST',
      url: this.href,
      dataType: 'json',
      success: toggleSaved,
      data: 'js=1'
    });
  return false;
  });
});


Here is my "toggle_visibility" module code

/**
 * Implementation of hook_menu().
 */
function toggle_visibility_menu() {
  $items = array();
  $items['toggle-visibility'] = array(
    'page callback' =&gt; 'toggle_visibility_toggle',
    'access arguments' =&gt; array('toggle profile'),
    'type' =&gt; MENU_CALLBACK,
  );
  return $items;
}

/*
 * page callback
 */
function toggle_visibility_toggle() {
  global $user;
  $toggle_sql = "SELECT * FROM {toggle_visibility} WHERE uid = %d";
  $toggle_result = db_query($toggle_sql, $user-&gt;uid);
  $num = mysql_num_rows($toggle_result);

  if (!$num) {
    db_query('INSERT INTO {toggle_visibility} (uid, visible) VALUES (%d, %d)', $user-&gt;uid, 1);
  } else {
    db_query('DELETE FROM {toggle_visibility} WHERE uid = %d', $user-&gt;uid);
  }

  if (!empty($_POST['js'])) {
    drupal_json(array(
        'toggleon' =&gt; '&lt;a href="/toggle-visibility"&gt;Toggle My Profile On&lt;/a&gt;'
        )
    );
    exit();
  }

  //UPDATE THIS TO RETURN TO THE SAME PAGE
  $path = drupal_get_path_alias('node');
  drupal_goto($path);
}

/**
 * Implementation of hook_theme().
 */
function toggle_visibility_theme() {
  return array(
    'toggle_visibility_link' =&gt; array(
      'arguments' =&gt; array(),
    ),
  );
}

/**
 * Return a message for no results
 */
function theme_toggle_visibility_link() {
  drupal_add_js(drupal_get_path('module', 'toggle_visibility') . '/toggle_visibility.js');
  global $user;
  $toggle_sql = "SELECT * FROM {toggle_visibility} WHERE uid = %d";
  $toggle_result = db_query($toggle_sql, $user-&gt;uid);
  $num = mysql_num_rows($toggle_result);

  if ( $num == 0 ) {
    $link = '&lt;a href="/toggle-visibility" class="toggle-visibility-links"&gt;Toggle My Profile Off&lt;/a&gt;';
  } else {
    $link = '&lt;a href="/toggle-visibility" class="toggle-visibility-links"&gt;Toggle My Profile On&lt;/a&gt;';
  }
  return $link;
}


Not sure what I'm missing.

Thanks!
In the javascript you should format the data as an object:

data: 'js=1'


replaced with

data: {js: 1}


The problem with the redirect is most likely an JS error caused by the returning value of the ajax callback. To be able to spot it you can hardcode the url in development and change the link simple be &lt;a href="#"&gt;xx&lt;/a&gt;, that would prevent a new page from loading in case of JS errors and would give you the possibility to read the error log from tools like firebug. Another options would be to insert breakpoints in your JS code, which can be a bit more tricky.