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: {
 ......
}