Second state in JQuery impromptu flashes and closes?

Question

I am working on a web based application using jquery impromptu dialogs . I am using this code:

var statesdemo = {
        state0 : {
            title : 'here',
            html : '<label>Name <input type="text" id="fname" name="fname" value="1"></label><br />',
            /* + '<label><input type="text" name="lname" onclick="iconPrompt()" value="Change Image"></label><br />', */

            buttons : {
                ChangeImage : -1,
                Delete : -2,
                Save : false,
                cancel : true
            },
            focus : 0,

            submit : function(e, v, m, f) {
                console.log(f);

                if (v == -2) {
                    $('.1' ).remove();
                    $.prompt.close();
                }

                if (!v) {
                    $('#pos')
                            .append(
                                    $('<div id="image" class="new"  onclick=\"openprompt()"><label>"'
                                            + document
                                                    .getElementById('fname').value
                                            + '"</label><br /></div>'));

                    $.prompt.close();
                } else if (v) {

                    $.prompt.close();
                }

                if (v == -1) {
                    $.prompt.goToState('changeImage');
                }

                return false;
            }
        },
        changeImage : {
            title : "Choose Image",
            html : '<div class="imageContainer">'
                    + '<div style="top: 0; left: 0; width: 100px; height: 50px"></div>'
                    + '<div style="top: 0; left: 0; width: 100px; height: 50px"></div>'
                    + '<div style="top: 0px; left: 0; width: 100px; height: 50px"></div>'
                    + '<div style="top: 0px; left: 0px; width: 100px; height: 50px"></div></div>',

            buttons : {
                Done : 1
            },
            focus : 2,

            submit : function(e, v, m, f) {
                /* console.log(f);

                e.preventDefault();
                if (v == 1)
                    {
                    $.prompt.goToState('state0');}
                return false; */



            }
        },

    };

It runs fine until I press the ChangeImage Button in first state . The Second state flashes and closes in a second of time. What am I doing wrong please help . I am stuck for hours.

Answer 1

You probably forgot return false; within the if (v) { .. } EXAMPLE:

state0: {
  title: 'this is the title',
  html: '<p>this is the html',
  submit: function(e,v,m,f) {
    if (v) {
      //validation here

      return false;
    }
  }
},
state1: {
 ......
}

Answer 2

sorry to ressurect this query, but probably what is missing (and I had the same problem because I copied and tested from their example) is the else statement before the next ifs

let's say you wanted it to match the first IF and the code succeded (and that's why it flashes'. when the execution jumps to the next line it finds another if to evaluate. but the condition is not correct and it goes to this if's else. got it?

example:

input is 2

if(input == 2){...} //matched
if(!input){...}
else{...} //matched again because previous `if` didn't match