在回车键preSS jQuery UI的对话框更改网址 [英] jQuery UI Dialog Changes URL on Enter KeyPress

问题描述

我想用AJAX，jQuery的用户界面对话框的形式是内容提交表单。

我用同样的code在 jQuery的文档

但我修改了表格，以便只有一个文本输入，这样的形式是这样的：

 ＆LT;形式GT;
  ＆LT;字段集＆GT;
    ＆LT;标签=答案＆GT;＆LT;强＆GT;你答：LT; / STRONG＆GT;＆LT; /标签＆gt;
    ＆LT;输入类型=文本名称=回答ID =答案级=文本的UI控件内容UI-角落都/＆GT;
  ＆LT; /字段集＆GT;
  ＆LT; /形式GT;
 

当我点击确定（或创建用户）按钮，它的工作原理，即提交使用AJAX的答案，但我也希望它的工作时，pressed Enter键。

现在，当我输入 ASD 在输入＃答案和preSS输入，它使URL像这样的：

  mysite.com/?answer=asd
 

我尝试添加的功能：

  $（'＃答案）。键preSS（功能（E）{
    如果（e.key code == $ .ui.key code.ENTER）{
          警报（请输入pssed上的答案输入$ P $）;
    }
}）;
 

这个时候它会提醒输入pssed上的答案输入$ P $，然后在URL转换。然而，我不希望它修改URL，我怎么能删除的功能？它在哪里定义的？

总之，我要回车键什么，我想要它做的唯一的事情。

感谢您的帮助！

编辑：

- 即鼠标工作单击 - 添加在 jQuery.dialog的按钮（）; 是这样的：

  $（＃对话形式）.dialog（{
      的AutoOpen：假的，
      高度：300，
      宽度：350，
      模式：真正的，
      按钮：{
        答：函数（）{
            。VAR答案= $（＃对话形式#answer）VAL（）;
            警报（你的回答：+答案）;
                    submit_with_ajax（答案）;
        }，
        取消：函数（）{
          $（本）.dialog（亲密）;
        }


      }，
      关闭：函数（）{
        allFields.val（）.removeClass（UI状态错误）;
        警报（ASD）;
      }
    }）;
 

解决方案

您可以prevent事件的默认操作与事件。preventDefault（）。我不是100％肯定的形式怎么看起来像的jQuery UI，如果preventing关键preSS工程的默认。作为一种替代方法，你可以prevent的提交事件的默认操作它，因为你可能会想到，prevents被提交表单（按戈库尔的回答）。请参见 MDN 关于<$的更多信息C $ C>事件。preventDefault（）。

  $（'＃答案）。键preSS（功能（E）{
    如果（e.key code == $ .ui.key code.ENTER）{
          即preventDefault（）;
    }
}）;
 

- 或 -

  $（'whatevertheuiformis'）。在（'提交'，函数（E）{
    如果（e.key code == $ .ui.key code.ENTER）{
          即preventDefault（）;
    }
}）;
 

I'm trying to submit a form with AJAX, the form being content of jQuery UI Dialog.

I use the same code as in jQuery's documentation

but I modified the form so there is only one text input, so the form looks like this:

<form>
  <fieldset>
    <label for="answer"><strong>Your Answer : </strong></label>
    <input type="text" name="answer" id="answer" class="text ui-widget-content ui-corner-all" />    
  </fieldset>
  </form>

When I click the OK (or Create User) Button, it works, i.e. submits the answer with AJAX, but I also want it to work when pressed Enter key.

now, when I type asd in input#answer and press enter, it makes the URL like this:

mysite.com/?answer=asd

I tried adding the function:

  $('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          alert("enter pressed on answer input");
    }
});

this time it alerts "enter pressed on answer input" and then converts the URL. Whereas, I don't want it to modify the URL, how can I delete that function? Where is it defined?

In short, I want the enter key to do only what I want it to do.

Thanks for any help !

Edit:

The buttons -that work on mouse click- are added in jQuery.dialog(); like this:

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        Answer: function() {
            var answer = $("#dialog-form #answer").val();
            alert("your answer : "+answer);
                    submit_with_ajax(answer);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }


      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
        alert("asd");
      }
    });

解决方案

You can prevent the default action of an event with event.preventDefault(). I am not 100% sure how the form looks like in jQuery-ui and if preventing the default of the keypress works. As an alternative you can prevent the default action of the submit event which, as you would probably expect, prevents the form from being submitted (as per Gokul's answer). See mdn for more information on event.preventDefault().

$('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          e.preventDefault();
    }
});

-- or --

$('whatevertheuiformis').on( 'submit', function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          e.preventDefault();
    }
});

这篇关于在回车键preSS jQuery UI的对话框更改网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！