Question

我在我的网站上使用this WordPress plugin作为商店定位器。在没有交互式地图的页面上，我有一个用作地图搜索表单的表单。

换句话说，我有一个带有位置字段的表单。用户在字段中输入位置并单击搜索按钮。当他们点击搜索按钮时，页面会重定向到包含地图的页面，而位置字段会填充在上一页输入的位置：

/* This is the search form on the page that does not have the interactive map */
$('#searchonly #wpsl-search-wrap form').submit(function(e){
    e.preventDefault();
    var loc = $('#searchonly #wpsl-search-wrap form #wpsl-search-input').val();
    localStorage.setItem("loc",loc);
    window.location.href = "http://localhost/inform/find-a-doc/";
});

/* This is the page with the interactive map */
jQuery(document).ready(function( $ ) {
    var loc = localStorage.getItem("loc");
    $('#wpsl-search-wrap form #wpsl-search-input').val(loc);
});

我现在需要页面上的搜索按钮，并在页面加载时自动点击（或提交表单）交互式地图。

有几个障碍。首先是我使用的是WordPress插件，因此编辑实际的插件文件不是一种选择。第二个（这可能不是障碍，我不确定）是插件已经在页面加载时运行了一些ajax调用。我认为这意味着在初始ajax完成之前，不应以编程方式单击表单提交按钮。

以下是我尝试过的个别解决方案。每个换行代表了我尝试的不同解决方案：

/* #wpsl-search-btn is the submit button for the form */

$(document).ajaxSuccess(function() {
    $("#wpsl-search-btn").submit();
});

$(document).ajaxComplete(function() {
    $("#wpsl-search-btn").submit();
});

$("#wpsl-search-btn").submit();

$("#wpsl-search-btn").trigger('submit');

这些解决方案都没有起作用，我在Chrome的检查员中没有收到任何js错误。

我不确定这是否会有所帮助，但这里是plugin's main js file。

Answer 1

看看$ .Deferred（） https://api.jquery.com/category/deferred-object/

您可以绑定在处理请求后执行的承诺。

Answer 2

我能够回答我自己的问题。这是解决我问题的代码：

var loc = localStorage.getItem("loc");
$('#wpsl-search-wrap form #wpsl-search-input').val(loc); 

function clickBtn() {
    $("#wpsl-search-btn").trigger('click');
}
$(document).one('ajaxComplete', function() {
    clickBtn();
});

所有ajax调用完成后，使用jQuery提交ajax表单

2 个答案: