Jquery Impromptu Callback issue - $.prompt fails

问题:

I have an issue with jQuery Impromptu, specifically $.prompt with a callback function for an inline form.

Now, the actual specific problem is the following. If the email_address field is blank when submitted I cannot get the $.prompt('Please supply an email address for the customer') to work, however if I change it to alert('Please supply an email address for the customer') it will work.

I am guessing this is a scope issue as the other $.prompt calls work as expected which I assume are because they are inside a $.post callback function.

I have struggled to find a huge amount of documentation of the callback form functionality and although I feel like I understand the e, v and f variables, the m (Message) is not something I've used before. When I log m to the console log it looks like the jQuery Impromptu object, however I am unsure how to access a property of it. I have tried m.prompt() and $.m.prompt() but these are just guesses on how I would access the prompt function.

Javascript

var txt = '<input type="text" name="email_address" value="" />';

function mycallbackform(e,v,m,f)
{  
    if(v != undefined)  
    {  
        if (v == true)  
        {  
            console.log(f);  
            if (f.email_address.length == 0)  
            {  
                console.log(m);  
                $.prompt('Please supply an email address for the customer');  
            }  
            else  
            {  
                $.post('". $this->view->url(array(), 'admin-create-user-from-checkout') ."', f, function(data) {  
                if(data.status)  
                {  
                    $.prompt('Customer Record Created Successfully');  
                }  
                else  
                {  
                    $.prompt('Customer Record could not be created');  
                    $('#email_address').val($('#old_email_address').val());  
                }  
            }, 'json');  
        }  
    }  
    else  
    {  
        $('#email_address').val($('#old_email_address').val());  
    }  
}  

$.prompt(txt,{callback: mycallbackform, buttons: { Ok: true, Cancel: false }});

Console Log for m

Object[div.jqimessage]          
0
    div.jqimessage

context
    undefined

jquery
    "1.7.2"

length
    1

prevObject
    Object[div#jqi_state_state0.jqi_state]

selector
    ".children(#jqi) #jqi_st...0.children(.jqimessage)"

constructor
    function()

init
    function()

_toggle
    function()

add
    function()

addClass
    function()

affix
    function()

after
    function()

ajaxComplete
    function()

ajaxError
    function()

ajaxSend
    function()

ajaxStart
    function()

ajaxStop
    function()

ajaxSuccess
    function()

alert
    function()

andSelf
    function()

animate
    function()

append
    function()

appendTo
    function()

attr
    function()

before
    function()

bind
    function()

blur
    function()

button
    function()

carousel
    function()

change
    function()

children
    function()

clearQueue
    function()

click
    function()

clone
    function()

closest
    function()

collapse
    function()

contents
    function()

contextmenu
    function()

css
    function()

data
    function()

dblclick
    function()

delay
    function()

delegate
    function()

dequeue
    function()

detach
    function()

die
    function()

domManip
    function()

dropdown
    function()

each
    function()

empty
    function()

end
    function()

eq
    function()

error
    function()

extend
    function()

fadeIn
    function()

fadeOut
    function()

fadeTo
    function()

fadeToggle
    function()

filter
    function()

find
    function()

first
    function()

focus
    function()

focusin
    function()

focusout
    function()

get
    function()

has
    function()

hasClass
    function()

height
    function()

hide
    function()

hover
    function()

html
    function()

index
    function()

innerHeight
    function()

innerWidth
    function()

insertAfter
    function()

insertBefore
    function()

is
    function()

keydown
    function()

keypress
    function()

keyup
    function()

last
    function()

live
    function()

load
    function()

map
    function()

modal
    function()

mousedown
    function()

mouseenter
    function()

mouseleave
    function()

mousemove
    function()

mouseout
    function()

mouseover
    function()

mouseup
    function()

next
    function()

nextAll
    function()

nextUntil
    function()

not
    function()

off
    function()

offset
    function()

offsetParent
    function()

on
    function()

one
    function()

outerHeight
    function()

outerWidth
    function()

parent
    function()

parents
    function()

parentsUntil
    function()

popover
    function()

position
    function()

prepend
    function()

prependTo
    function()

prev
    function()

prevAll
    function()

prevUntil
    function()

promise
    function()

prompt
    function()

promptDropIn
    function()

prop
    function()

push
    push()

pushStack
    function()

queue
    function()

ready
    function()

remove
    function()

removeAttr
    function()

removeClass
    function()

removeData
    function()

removeProp
    function()

replaceAll
    function()

replaceWith
    function()

resize
    function()

revmaxslide
    function()

revnext
    function()

revolution
    function()

revpause
    function()

revprev
    function()

revresume
    function()

revshowslide
    function()

scroll
    function()

scrollLeft
    function()

scrollTop
    function()

scrollspy
    function()

select
    function()

serialize
    function()

serializeArray
    function()

show
    function()

siblings
    function()

size
    function()

slice
    function()

slideDown
    function()

slideToggle
    function()

slideUp
    function()

sort
    sort()

splice
    splice()

stop
    function()

submit
    function()

swipe
    function()

tab
    function()

text
    function()

toArray
    function()

toggle
    function()

toggleClass
    function()

tooltip
    function()

transit
    function()

transition
    function()

trigger
    function()

triggerHandler
    function()

typeahead
    function()

unbind
    function()

undelegate
    function()

unload
    function()

unwrap
    function()

val
    function()

waitForImages
    function()

width
    function()

wrap
    function()

wrapAll
    function()

wrapInner
    function()

__proto__
    Object[]

回答1:

Problem Solved!

@link: https://github.com/trentrichardson/jQuery-Impromptu/issues/6

Quote

With the new event system the callback is bound onto the prompt. So callback must be called before the prompt is destroyed. Impromptu is not intended for multiple prompts at one time.

If you should want to work around this an easy solution would be to setTimeout(10, function(){ $.prompt(...); }); Inside of the callback. This will give opportunity for the previous prompt to close.

Fixed Javascript

var txt = '<input type="text" name="email_address" value="" />';

function mycallbackform(e,v,m,f)
{  
    if(v != undefined)  
    {  
        if (v == true)  
        {  
            if (f.email_address.length == 0)  
            {  
                setTimeout(function(){ $.prompt('Please supply an email address for the customer');  }, 10);
            }  
            else  
            {
                $.post('". $this->view->url(array(), 'admin-create-user-from-checkout') ."', f, function(data) {  
                if(data.status)  
                {  
                    $.prompt('Customer Record Created Successfully');  
                }  
                else  
                {  
                    $.prompt('Customer Record could not be created');  
                    $('#email_address').val($('#old_email_address').val());  
                }  
            }, 'json');  
        }  
    }  
    else  
    {  
        $('#email_address').val($('#old_email_address').val());  
    }  
}  

$.prompt(txt,{callback: mycallbackform, buttons: { Ok: true, Cancel: false }});