Profile update with AJAX

[nikola]

I have a form in the template:

<form id="profile" name="profile" method="post" action="">
<label for="username">Username:</label>
<input type="text" id="username" name="username" size="30" disable="disabled" value="<?php echo $user->name; ?>">
<label for="email">E-mail address:</label>
<input type="text" id="email" name="email" size="30" value="<?php echo $user->email; ?>" class="required">
<label for="text">Password:</label>
<input type="text" id="password" name="password" size="30" autocomplete="off" class="required">
<label for="passwordConfirm">Confirm Password:</label>
<input type="text" id="passwordConfirm" name="passwordConfirm" size="30" autocomplete="off" class="required">
<input type="submit" name="submit" id="submit" value="Submit" />
</form>

and I'm using jQuery validate to validate and submit the form:

$("#profile").validate({
 debug: true,
 rules: {
email: {
 required: true,
 email: true
},
password: {
 required: true,
 minlength: 6
},
passwordConfirm: {
 required: true,
 minlength: 6,
 equalTo: "#password"
},
 },
 messages: {
password: {
 required: "Enter the password",
 minlength: jQuery.format("Please enter at least {0} characters"),
},
confirmPassword: {
 required: "Repeat the password",
 minlength: jQuery.format("Please enter at least {0} characters"),
 equalTo: "Passwords are not equal",
},
email: {
 required: true,
 email: "Please enter a valid email address",  
},
 },
 submitHandler: function(form) {
  $.post('../../../scripts/update.php', $("#profile").serialize(), function(data) {
$('#results').html(data);
window.location='/';
  });
 }
});

update.php is located outside PW directories in folder "scripts":

<?php
require_once('../../index.php');
$input = wire('input');
$sanitizer = wire('sanitizer');
$user = wire('users');
if($input->post->submit) {
$error = '';
$username = $user->name;

if(isset($_POST['email'])) {
 $email = $sanitizer->email($input->post->email);
}
 if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
  $error .= "Enter e-mail address in valid format! <br />";
 }
if(isset($_POST['password'])) {
 $password = $input->post->password;
}
 if(strlen($password) < 6 && !preg_match("#[a-z]+#", $password)) {
  $error .= "Password must contain at least six letters! <br />";
 }
 if(!preg_match("#[0-9]+#", $password)) {
  $error .= "Password must include at least one number! <br />";
 }
if(isset($_POST['passwordConfirm'])) {
 $passwordConfirm = $input->post->passwordConfirm;
}
 if ($password != $passwordConfirm) {
  $error .= "Passwords do not match! <br />";
 }
$user->name = $username;
$user->pass = $pass;
$user->email = $email;

}
if (!$error) {
 $user->save();
 echo "Your profile is succesfuly updated";
} else {
 echo $error;
}
?>

and it's not working (validation works fine but submitting doesn't).

If I don't use AJAX and make a page Update with template update.php that's in templates folder and assign form action:

action='<?php echo $config->urls->root?>update/'

it works fine (but I lose AJAX support).

Can somebody give me an advice what I'm doing wrong?

[netcarver]

Hello Nikola,

is your submit handler posting to the right location -- and is that location accessible to the web server (ie, your scripts folder is under the site root, with permissions to allow the server to access it?)

[nikola]

Hi Netcarver,

submit handler is posting to right location, scripts folder is located along site and wire folders (on the same level) and server has access to it, I don't know why this ain't working...

[netcarver]

Ok, 2nd dumb question from me: is your submit handler getting called when you press the submit button?

[MadeMyDay]

Are you sure this is correct:

$.post('../../../scripts/update.php', $("#profile").serialize(), function(data) {

? Because the starting point for the path in jQuery takes is exactly the one from the adress bar. So this is perhaps not correct. What says Firebug/Inspector console? I think it would be better and more flexible to use:

$.post('/scripts/update.php', $("#profile").serialize(), function(data) {

if the scripts folder is in the root.

[nikola]

@Netcarver, you were right, I forgot to add

form.submit();

to submitHandler ... silly me

@MadeMyDay

I've corrected the path, the right one was /processwire/scripts/update.php because I have PW installed in processwire folder under www root.

Now that those two are solved, I get in Firebug:

Error Call to a member function save() on a non-object (line 40 of C:\inetpub\wwwroot\processwire\scripts\update.php)

[MadeMyDay]

I am not sure, but shouldn't this:

$user = wire('users');

be:

$user = wire('user');

since you don't want all users in that object but the current one?

[nikola]

I've changed that line to:

$user = wire('user');

and now I get:

Recoverable Fatal Error Argument 1 passed to PagesType::___save() must be an instance of Page, none given (line 128 of C:\inetpub\wwwroot\processwire\wire\core\PagesType.php)

[nikola]

Got it working!

I've changed

$user = wire('user');

in wrong file.

Thanks for you help!

[MadeMyDay]

Glad it helped ;-)