Jquery Impromptu function running order problem

Question

I I hafe a function which uses the $.prompt Jquery (impromptu) pluggin. This works fine except that whenever I call the function it is run right at the end of the function that it was called from.

Here is the function...

function addfile(){

    var txt = '<?php echo $JSString; ?>';

    function mycallbackform(v,m,f){
        if(v != undefined)
        var newText = f.alertName + " , " + f.alertName.replace("-", " ").replace(".php", "");
        alert(newText);
    }

    $.prompt(txt,{
        callback: mycallbackform,
        buttons: { Add: 'add', Cancel: 'cancel' }
    });
}

The PHP bit just adds the html string in and is working fine, the problem still occours when using text (i.e. 'this is a prompt').


Whenever I call addfile() from JS it will run last. e.g. ...

function newfunction()
{
       prompt("Before");
       addfile();
       prompt("after");
}

... will display do the following ...

1. Prompt - 'Before'
2. Prompt - 'After'
3. addfile();

No matter what I do the addfile() will always run last which confuses me. I'm pretty new to these things so If i'm doing anything really stupid please don't be afraid to point it out.

Subnote: The function is sitting in the header of my php file so that the <?php echo $JSString; ?> works. I have removed the php and inserted the function into an external JS file but the same problem prevails so it is the $.prompt which seems to be causing the problem not the JS


Any ideas as to how to get this JS to behave greatly appreciated.
Many thanks

Answer 1

Above approach is not working . Below is the code portion that. Alert is being displayed before blocking the page. I am using blockUI along with it.

function blockPage(){
    $.blockUI({
        message: "<img src='loading.gif'/>",
        color: 'transparent',
        backgroundcolor: '#777777',
        top: $(window).height()/2
    });
    return true;
}

function dosomethingelse(){
    var aa;
    var bb;
    alert("c");
}

function createOverlay(){
    var overlaySubmit = function(e,v,m,f){
        if(v === -1){
            alert("Closing the prompt");
            $.prompt.close();
            return false;
        } else if(v === 1){
            dosomethingelse();
            //blockPage();
            return false;
        }
    };
    var prompt = $.prompt(
        "This is a test prompt", 
        {
            opacity: 0.3,
            buttons: {Add: 1, Cancel: -1},
            position: {x: 300},
            prefix: 'jqi',
            submit: function(e,v,m,f){
                blockPage();
                try{
                    alert(g);
                } catch (err){
                    alert("here");
                }
                overlaySubmit(e,v,m,f);
            }
        });
    prompt.bind('promptsubmit',blockPage);
}
<!-- Ajax-->
$('#ajax').click(function(){
    $.ajaxSetup({async:false});
    $.ajax({
            url: "test-server.txt",
            success: function(response){
                createOverlay();
                return false;
            },
            error: function(){
                return false;
            }
    });
});

Answer 2

your prompt function is asynchronous, that's why it accepts a callback function as parameter.

Try this:

prompt(
    txt,
    {callback: function() {
        addfile();
        prompt("after");
    }}
);