Question

我有这个单页面应用程序，而不是页面，一次加载一个部分。这个应用程序的基础是你输入一个查询然后去一个结果页面，并在结果的另一个表格 - 与第一个表格相同，但不是去一个新的视图（进入同一页面的不同部分））结果就在它下面。每当加载新视图时，另一个视图都会被隐藏。（例如：主视图有搜索表单。搜索，提交，隐藏主页视图，然后查看结果视图）

数据来自使用Ajax的远程服务器。

编辑：感谢@Himal，我解决了第一个问题。但是现在当我输入第二种形式的东西时，它只返回“没有提交”。即使我输入了一些内容，我也不确定为什么会这样做。有什么理由吗？

旧（固定！）问题：

然而，问题是第一种形式有效。您搜索查询，然后结果显示在结果视图中，但是，当您使用结果视图上方的表单再次搜索时，它不会执行任何操作。这是代码：

getPickerData = function() {
    var tickerForm = $('#analyze-form'),
        pickHolder = $('#PickHolder'), // The view where the results and second form resides
        pickContent = $('#PickHolder #pick-content'); // Where the results is loaded
        tickerHomeVal = $('#home #ticker').val(); // Value of the first ticker
    //document.getElementById('PickHolder').innerHTML='<h3 class="loadingtext">Loading Data</h3>';
    //document.getElementById('PickHolder').style.display='';
    $.ajax({
        type: "POST", 
        url: 'http://differenturl.com/something.php', 
            data: "something="+tickerHomeVal+"&something",
        complete: function(data){  
            pickContent.html(data.responseText);
        }  
    });

    var tickerResultsVal = $('#PickHolder #ticker').val();
    $('#results-submit-ticker').on('touchstart click', function(e){
        console.log('clicked?');
        $.ajax({
            type: "POST", 
            url: 'http://differenturl.com/something.php', 
            data: "something="+tickerResultsVal+"&something",
            complete: function(data){   
               pickContent.html(data.responseText);
               console.log(data);
            }  
        });
    });
}

第二个ajax调用是第二个形式。点击事件就在这里。返回false，因此按钮不会改变视图。

var viewchange = $('.toview');

viewchange.on('touchstart click', function(event){
    var $this = $(this);

        doAction($this); // runs the function above with a bunch of unrelated if's.
         return false;
});

这就是它。有一个if语句可以查找某个类来运行这个函数，但我认为这是不相关的。

对于第二种形式，

HTML看起来像这样。这与第一种形式完全相同，只是区别在于它在不同的视图中以及在结果下方的div之下。

<div id="PickHolder" class="view container">
    <form id="analyze-results-form" action="" class="analyze-form">
        <div class="input-container">
            <input id="ticker" class="input-stock" type="text" placeholder="Add Ticker">

        </div><!-- /.input-container -->
        <button id="results-submit-ticker" class="action action-data btn no-view" data-ref="#PickHolder">Analyze</button>
    </form>
    <div id="pick-content"></div>
</div>

除了不同的ID之外，正如你所知道的那样。

为什么JS for section表单不返回数据？对于点击，甚至不会发生console.log（）。

Answer 1

正如himal建议您应该使用成功回调而不是已完成的ajax请求，以便能够查看是否存在错误或者是否已成功完成。所以你的ajax调用看起来应该是，

$.ajax({
            type: "POST", 
            url: 'http://differenturl.com/something.php', 
            data: "something="+tickerResultsVal+"&something",
            success: function(data){   
               pickContent.html(data.responseText);
               console.log(data);
            },
            error: function(xhr, error) {
               // handle error
            }
});

已完成的回调隐藏了名为tickerResultsVal的变量未设置值的基本错误。

您定义并设置了clicke事件范围之外的tickerResultsVal的值。因此，在第一次运行中，它被正确设置并发送到ajax请求。但在你的第二次点击;

var tickerResultsVal = $('#PickHolder #ticker').val();

永远不会运行，因此tickerResultsVal未设置，返回＆＃34;没有提交任何内容＆＃34;来自ajax请求的错误。

您可以使用值的相对路径或在click事件中添加tickerResultsVal的定义

$('#results-submit-ticker').on('touchstart click', function(e){
    var tickerResultsVal = $('#PickHolder #ticker').val(); // inside the scope of click event
    console.log('clicked?');
    $.ajax({
        type: "POST", 
        url: 'http://differenturl.com/something.php', 
        data: "something="+$('#PickHolder #ticker').val()+"&something", // or just use relative path to input value
        complete: function(data){   
           pickContent.html(data.responseText);
           console.log(data);
        }  
    });
});

第二种形式没有获取数据

1 个答案: