I am trying to achieve autosave on Jomsocial's profile edit form. The goal is to have an autosave with feedback to inform the user after each onChange. I have the feedback part working but for some reason the beforeCallback is the only one that fires and it is not saving changes to database. php for the text field:

 $html = '<input title="' . CStringHelper::escape( JText::_( $field->tips ) ).'" type="text" value="' . $field->value . '" data-event="change" id="field' . $field->id . '" name="field' . $field->id . '" maxlength="' . $field->max . '" size="40" class="'.$tooltipcss.' tipRight' . $class . '" '.$style.$readonly.' /> <span class="alert alert-success success hide">Saved!</span> <span class="alert alert-danger fail hide">Not saved...</span>';

the css for the feedback:

 .hide { display: none; } .alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; } .alert { padding: 8px 35px 8px 14px; margin-bottom: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #c09853; } .alert-danger, .alert-error { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; }

the jQuery:

<script type="text/javascript" src="/js/jquery.autosave.min.js"></script> <script type="text/javascript" charset="utf-8"> function successCallback(data,$jq){ $jq.find("~.success").fadeIn(); } function errorCallback(error,$jq){ $jq.find("~.fail").fadeIn(); } function beforeCallback($jq){ console.log(this); $jq.siblings(".success,.fail").fadeOut(); } jQuery("input,select,textarea").autosave({ url:'/index.php?option=com_community&view=profile&task=edit', success:successCallback, error:errorCallback, before:beforeCallback }); </script>