第三次调用后，Ajax执行成功函数的一半

时间：2014-01-14 19:33:18

标签： javascript jquery ajax handlebars.js

我调用ajax从mysql数据中绘制一个表，并将textareas放在该表下面，以便能够为每个字段编写文档。

这是我的问题。在将表名输入搜索字段并单击按钮后，我按照自己的意愿获取整个页面。在我搜索相同的表名后，我再次获得相同的页面，但是在我第三次检查同一个表之后，我只得到了两个表格。如果我检查{同样的问题就出现了{1}}表格一次，然后'test'两次。

UPDATE：在第二次ajax调用之后（所以如果你键入内容并点击同时检查另一个是在浏览器中）jQuery插件只加载mysqlTable模板而不是textareas 。虽然这个textareas仍然出现，但如果你第三次调用任何表然后问题发生，成功函数停止执行中途，我只看到两个没有textareas的表。

我注意到的是第三次调用ajax时，它只执行直到我离开注释的那一部分'test2'这就是为什么textareas和其他没有出现的原因。

它应该是这样的。 It supposed to be like this.

但在第三次通话后它看起来像这样。 But it looks like this after the third call

我在加载时禁用了搜索输入，以避免多个ajax调用，但这里发生了一些事情。

JS ajax call 

/* *** this is the point where ...

我使用jQuery HandlebarsJS从分隔的文件加载Handlebars模板。

你对这个问题有什么看法吗？为什么会这样？ （如果需要更多代码，请告诉我）

更新

我将我的完整JS代码插入到JSFiddle， click here ！

textareas（模板）

function templatesHandling(){  
    clear();
    $('#textareaHolder').html('');
   $.ajax({
        url: "ajax/table.php?function=get_table_data&table="+tableName,
        dataType: "json", // it'll convert json to objects
        type : "GET",
        beforeSend : function(){ $('#ajax-loader-gif').show(); $('#search').attr({'disabled':'disabled','placeholder':'Loading...'});},
        complete : function(){ $('#ajax-loader-gif').hide(); $('#search').removeAttr('disabled').prop('placeholder','Type the table name..'); },
        error: function(er){ $("#check").after("<span id='error'>Error</span>"); },
        success: function(data){ 

        // add the current table name to the first object in order to be able to print out with {{tableName}}       

        if (!data[0].TableName){
            data[0].TableName = tableName; 
        }
           // call the 'table' template and send the data to work with
               $("#tableHolder").loadFromTemplate({
                   template :  "mysqlTable",
                   data : data
               });    

           /* *** this is the point where sometimes the ajax call stops executing *** */       

           // call the 'textareas' template and send the data to work with 
               $("#textareaHolder").loadFromTemplate({
                   template :  "textareas",
                   data : data
               });            

           /* *** parseWiki *** */
           $('#parseWikiHolder').show(); // show the last textarea 
           for (key in data[1]){ 
            res_head[++j] = '!scope="col"| '+ key + '\n'; // 
           }
           for(var i=1;i<data.length;i++){
                for(key in data[i]){
                    res_body[++j] = '|'+data[i][key]+'\n';
                }; // -for in | parse <tbody>
                res_body[++j] = '|-\n';  
           }; // -for | parse <tbody>   
        } // -success
    });
};

mysqlTable（模板）

{{#each this}}
    {{#if TableName}}
        <label for='{{TableName}}'>Description of <em class="tableName">{{TableName}}</em> table</label>
        <textarea id='{{TableName}}'></textarea>
    {{/if}}
    {{#if Field}}

        <label for='{{Field}}'>Description of <em class="tableName">{{Field}}</em> field</label>
        <textarea id='{{Field}}'></textarea>

    {{/if}}
{{/each}}

HTML 

<table>
    <thead>
    <tr>
        {{#each this}}
            {{#if TableName}}
                <th class="structure_thead" colspan="6">Structure of {{TableName}} table</th>
            {{/if}} 
        {{/each}}
    </tr>
    <tr>
        <th>Field</th>     
        <th>Type</th> 
        <th>Null</th> 
        <th>Key</th> 
        <th>Default</th> 
        <th>Extra</th> 
    </tr>    
    </thead>
    <tbody> 
    {{#each this}} 
    {{#if Field}}
        <tr> 
            <td><a href="#{{Field}}"><span class="ui-icon ui-icon-link"></span>{{Field}}</a></td>
            <td>{{Type}}</td>
            <td>{{Null}}</td>
            <td>{{Key}}</td>
            <td>{{Default}}</td>
            <td>{{Extra}}</td>  
        </tr>   
    {{/if}}
    {{/each}}
    </tbody>
</table>

获取表名 - 我收到的JSON文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Doksi</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
</head>
<body>

<div class="container">
    <div class="searchHolder">
        <input id="search" type="text" placeholder="Type the table name.."/>
        <input id="check" type="button" value="Check" />
        <img id="ajax-loader-gif" src="img/ajax-loader.gif" />
    </div>
    <div id="tableHolder"></div>
    <div id="textareaHolder"></div>
    <div id="parseWikiHolder">
        <input type="text" disabled="disabled" value="Ready to copy?"/>
        <input id="copy" type="button" value="Hell, yeah!" />
        <textarea id="parseWiki"></textarea>
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.loadFromTemplate.js"></script>
<script src="js/ajax.js"></script>
</body>
</html>

获取表格的数据 - 我收到的JSON文件

 [
    {
    table: "teszt"
    },
    {
    table: "teszt2"
    }
 ]

更新2

我评论说jQuery插件并尝试了一个简单的ajax调用，但同样的问题也出现了。如果我运行此代码，则只会出现表格。如果我将代码改为textareas，那么只有它们会出现。 为什么代码会在没有任何错误的情况下停止执行？这两个ajax呼叫是否相互冲突？

新的ajax调用

 [
    {
    eredmeny: "siker"
    },
    {
    Field: "id",
    Type: "int(11)",
    Null: "NO",
    Key: "PRI",
    Default: null,
    Extra: "auto_increment"
    },
    {
    Field: "name",
    Type: "varchar(64)",
    Null: "NO",
    Key: "",
    Default: null,
    Extra: ""
    },
    {
    Field: "type",
    Type: "enum('y','n')",
    Null: "NO",
    Key: "",
    Default: "n",
    Extra: ""
    },
    {
    Field: "date",
    Type: "datetime",
    Null: "NO",
    Key: "",
    Default: null,
    Extra: ""
    }
    ]

2 个答案:

答案 0 :(得分：0)

我找到了（一半）解决方案

当我将新的代码块复制到UPDATE2以下时，我再次更改了它并找到了（一半）解决方案。

...
       success: function(o){ 
        // add the current table name to the first object in order to be able to print out with {{tableName}}       

           if (!o[0].TableName){
                o[0].TableName = tableName;
           };

            // call the 'mysqlTable' template and send the data to work with
            (function getTemplateAjax(objectum, path, element){
                var source, template; 
                $.ajax({
                    url: path,
                    cache: true,
                    success: function(data) {
                        source    = data;
                        template  = Handlebars.compile(source);
                        element.html(template(objectum));
                    }               
                }); 
            })(o, 'templates/mysqlTable.html', $('#tableHolder'));         

            // call the 'textareas' template and send the data to work with     
            (function getTemplateAjax(objectum, path, element){
                var source, template;
                $.ajax({
                    url: path,
                    cache: true,
                    success: function(data) {
                        source    = data;
                        template  = Handlebars.compile(source);
                        element.html(template(objectum));
                    }               
                });          
            })(o, 'templates/textareas.html', $('#textareaHolder'));
...

它非常难看，有了更多的模板文件，这不是最好的做法，所以我会寻找更好的解决方案。至少它现在有效。

因此bug可能在插件中。我将为此任务编写自己的jQuery插件。

答案 1 :(得分：0)

我认为问题在于ajax调用的异步模式，因为我提交了一个新的更改，你可以看看这些例子：
        https://github.com/CKGrafico/jQuery_HandlebarsJS/commit/41eb4c7c39f9c1ef8bbd1015b594d0a33bb585ac也许这可以解决你的问题。

相关问题
最新问题