Using in combination with jquery forms

[wroughtec]

I am trying to set this up so a message will appear when to saying sending and then a success message once sent.

beforeSubmit: function() {
                var notify = $.notify({
                    // options
                    message: 'Sending...'
                },{
                    // settings
                    type: "info",
                    allow_dismiss: false,
                    newest_on_top: true,
                    showProgressbar: true,
                    placement: {
                        from: "bottom",
                        align: "left"
                    },
                    animate: {
                        enter: 'animated fadeInUp',
                        exit: 'animated fadeOutDown'
                    }
                });
            },  // pre-submit callback
            success: function() {
                notify.update({
                    // options
                    message: 'Thank you'
                },{
                    // settings
                    type: "success",
                });

But this is not working as the var is not shared between the functions so getting not defined on the success page. Any suggestions? I tried putting it above the functions but then it just fires on page load.

[mouse0270]

First of all, I assuming since you are using the progress bar you have other code that controls it, otherwise you might want to look into just not showing it.

As for being able to use the update method in a seperate part of the plugin, I would recommend declaring the variable outside of the code but not assign it to anything.

// Variable to Store Notification in
var notify;

$('#myForm').ajaxForm({
    beforeSubmit: function() { 
        // Assign Notification to variable
        notify = $.notify({
            // options
            message: 'Sending...'
        },{
            // settings
            type: "info",
            allow_dismiss: false,
            newest_on_top: true,
            showProgressbar: false,
            placement: {
                from: "top",
                align: "left"
            },
            animate: {
                enter: 'animated fadeInUp',
                exit: 'animated fadeOutDown'
            },
            delay: 0
        });
    },
    success: function() {
        // Update Notification
        notify.update({
            message: 'Thank you',
            type: "success"
        });
        // Close Notification 2s after success message        
        setTimeout(function() {
            notify.close();
        }, 2000);
    }
});

[mouse0270]

By the way I wasn't sure which jquery form plugin you were using so I referenced this one http://malsup.com/jquery/form/

If this helps please close this issue, otherwise let me know and I'll see what else I can come up with.

[wroughtec]

I had tried this however I go the following error:

Uncaught TypeError: Cannot read property 'update' of undefined

[mouse0270]

I am at work now, I can look into this more when I get home later.

[wroughtec]

Ah solved it something else was clashing your code above work np