Ruby on Rails的：AJAX和提交申请运行部件并联

-1

<%= simple_form_for @video do |form| %> 
    <div class="form-inputs"> 
    <%= form.input :title, id: :video_title %> 
    <div class="row"> 
     <div class="input-field col s12"> 
      <textarea id="textarea1" name="video[description]" class="materialize-textarea"></textarea> 
     <label for="textarea1">Description</label> 
    </div> 
    </div> 
    <label for="spaceTags">Tags</label> 
    <div id="spaceTags" class="chips chips-placeholder"></div> 
    <%= form.label :movie %> 
    <%= form.file_field :movie %> 
    <%= form.label :preview_images%> 
    <%= form.file_field :preview_images, multiple: true %> 
    <p> 
    <input type="checkbox" name=video[published] id="test5" /> 
    <label for="test5">Publish Video</label> 
</p> 
<div class="form-actions" onclick="fetch();"> 
    <%= form.submit%> 
</div> 
<% end %>

和我的JavaScript代码是：

$('#textarea1').trigger('autoresize'); 
$('.chips').material_chip(); 
$('.chips-placeholder').material_chip({ 
    placeholder: 'Enter a tag', 
    secondaryPlaceholder: '+Tag', 
}); 
function fetch(){ 
var x = $('#spaceTags').material_chip('data'); 
$.ajax({ 
    type: "POST", 
    url : "/videos", 
    data: {"sarthak":JSON.stringify(x)}, 
    success : function(){alert ("Success!")}, 
    error : function(data){alert(data.message)} 
    }); 
    }

当我尝试提交表单它使调用在这两种情况下同样的行为。有什么方法可以延缓表单提交，直到AJAX调用被执行或者我可以通过其他方式解决这个问题。

来源

2017-10-18 Sarthak

坏命名你的函数'fetch' ...它已经存在于全局范围内......你要么覆盖它，要么阻止在范围内使用它。应该命名一些：'getVideos'调用一个获取函数可以获取任何东西，如果你只看代码 – Endless

您可以使用event.preventDefault这将停止窗体的正常执行，只是触发您的fetch方法。

您可以fetch方法更改为：

function fetch(event){ 
    event.preventDefault(); 
    // the rest of your code 
}

然后，在你的Ajax success的诺言，你可以处理其他任何你想要的，甚至再次提交表单，如果你想

$.ajax({ 
    type: "POST", 
    url : "/videos", 
    data: {"sarthak":JSON.stringify(x)}, 
    success : function(){ 
     alert ("Success!"); 
     $('form').submit() 
    }, 
    error : function(data){alert(data.message)} 
    });

来源

2017-10-18 20:00:39

Ruby on Rails的：AJAX和提交申请运行部件并联

回答

相关问题