0

I have a form with a text box and a submit button. 

<div style="float:left; padding:20px;">
<form id="crate_input" method="get">
    Create new crate: <input type="text" id="create">
    <input id="subbutton" type="submit" value="Submit">
</form>
<select id="crates">
    <option id="choose" value="choose" selected>Choose a crate</option>
    <option id="default_crate" value="default_crate">default_crate</option>
</select>
</div>

User interactions are handled in a separate java script file.

$('#subbutton').click(function(event) {
    $.ajax({
        url: OC.linkTo('crate_it', 'ajax/bagit_handler.php'),
        type: 'get',
        dataType: 'text/html',
        data: {'action':'create', 'crate_name':$('#crate_input #create').val()},
        success: function(data){
            $('#crates option').filter(function(){
            return $(this).attr("id") == data.responseText;
        }).prop('selected', true);
    }
    });
});

But the problem is when I type a name for a crate and press submit button, it sometimes doesn't create the crate. It seemed to refresh the page, but new crate hasn't been created. Does anyone know what's wrong here?

4

3 回答 3

1

问题是您没有停止默认表单提交。

$('#crate_input').submit(function(){ return false; });

应该可以解决您的问题。

于 2013-07-09T01:44:28.387 回答
1

您不会阻止表单的正常提交，因此页面会在ajax调用返回之前重新加载：

$('#subbutton').click(function(event) {
    $.ajax({
      ...
    });
    return false;
});

另外，returnfrom ajax successhandler 是没有意义的，因为
1. - 在按钮点击完成后执行得很好；
2. - 调用此处理程序的代码不期望任何返回值。

于 2013-07-09T01:45:06.667 回答
0

在不知道 'ajax/bagit_handler.php' 的响应的情况下，很难回答这个问题。但是我注意到以下内容

  1. 您似乎在服务器上创建了一个 crate，但您使用的是 HTTP GET。不建议将 GET 用于影响服务器状态的操作。

  2. 响应数据类型为 text/html。并且响应 HTML 与我不明白的 $(this).attr(id) 进行比较。这个上下文中的 this 指的是 AJAX 处理程序。我不确定你到底想做什么。

  3. 最好在 $('crate_input').submit() 而不是 $('#subbutton').click() 上进行表单处理。

如果可能，请添加一个 jsfiddle 来说明您在做什么。

于 2013-07-09T02:01:00.347 回答