Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does my jQuery dialog reload the page when enter is pressed?

I'm trying to use jQuery dialog to enter data in my page. For a reason I don't understand, when the user press enter, the entire page is refreshed. It doesn't even validate what is in the textbox.

I've create a jsfiddle that show the issue. I checked the documentation here and my code seems to follow the guidelines but I must be missing something!

Here is how I call the dialog

$("#create-subtitle")
    .click(function () {
    $("#dialog-form-subtitles").dialog("open");
    return false;
});

Here is one of my dialog:

$("#dialog-form-steptitles").dialog({
        autoOpen: false,
        height: 220,
        width: 450,
        modal: true,
        buttons: {
            "Ajouter un sous-titre pour les étapes": function () {
                var bValid = true;
                allFieldsStepTitle.removeClass("ui-state-error");
                bValid = bValid && checkLength(nameStepTitle, "sous-titre pour les étapes", 3, 50);

                if (bValid) {
                    var $parent = $("#StepTitles");
                    var numElem = $parent.find("tr").length;
                    $('#StepTitles > tbody:last').append('<tr><td><input class="text-box single-line" id="StepTitles_' + numElem + '__Name" name="StepTitles[' + numElem + '].Name" type="text" value="' + nameStepTitle.val() + '" /></td><td>&nbsp;<ul id="ListStep' + numElem + '"></ul></td><td><button id="create-step' + numElem + '" name="create-step' + numElem + '" class="btn btn-success">Ajouter une étape</button></td></tr>');
                    $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFieldsStepTitle.val("").removeClass("ui-state-error");
        }
    });

Anyone can help me with this?

like image 325
Jean-François Côté Avatar asked Mar 18 '13 22:03

Jean-François Côté


2 Answers

Hitting enter while inside the form > input causes the form to submit, thus refreshing the page. There are a few things you can do, but most of them involve preventing the default submit action on the form. Your code is mostly in French, so I had hard time navigating it, but in order to step the refresh, simply do this:

$('form').on('submit', function(event){
    event.preventDefault();
});

From there, you'll likely want to do something with the enter key — trigger a click on the button—again, the text is in French, so I don't know what it says.

$('your-input').keypress(function(event) {
    if(event.which == 13) { // 13 is the 'Enter' key
     // do something here
   }
});

Hope that helps.

like image 97
couzzi Avatar answered Nov 19 '22 22:11

couzzi


In jQuery's documentation page the example does not have a form tag, this is why is working as expected. Check your code without the form here. In case you need the tag to be there, check this SO question.

like image 20
a0viedo Avatar answered Nov 19 '22 23:11

a0viedo