Zoo Visitor:details Ajax request

Question

I am using malsups form.js to run a login script combined with the zoo visitor add-on. When the login form has been successful the user is successfully logged in with out any need of a page refresh, although when I want to display the username the page needs to be refreshed for those details to appear on screen. Below is my code, any suggestions ?

--

                        <div class="username_wrap">
                            <p>Welcome 
                                <span>
                                    {exp:zoo_visitor:details}
                                            {visitor:member_firstname}
                                    {/exp:zoo_visitor:details}
                                </span>
                            </p>
                        </div>

$("#userLoginForm").ajaxForm({

dataType: "json", success: function (event) {

                if (event.success) {
                    member_favourites = "5";
                    //do something
                } 
            }
        })

Answer 1

Create a hidden template that is just the logged in username only. Then load it in via jquery ajax .load(); Once login is complete as well.

               if (event.success) {
                    member_favourites = "5";
                    //do something
                    $("div#username").load("_username.html");
                } 

Answer 2

With this code it's working fine:

            $('#form').ajaxForm({
                dataType: 'json',
                success: function(data) {
                    if (data.success) {
                        $("#jqxwindow ").jqxWindow({ height:150,
                                                    width: 250,
                                                    theme: 'bootstrap',
                                                    content: 'Você é registrado',
                                                    resizable: false
                                                                        });
                        $('#jqxwindow').on('close', function (event) {
                            alert("You closed a window");
                           );


                    } else {
                        alert('Failed with the following errors: '+data.errors.login);
                    }
                }
            });

Your code is in the header or footer?? If footer, you have to wrap it with document ready:

$( document ).ready(function() {

the code here

});

In the example code, the box message are from the Jqx framework , but with a simple js alert box it will work too.