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

Question

I call ajax to draw a table from the mysql datas and put textareas below that table to be able to write a documentation for each fields.

Here's my problem. After I type the table name to the search field and click the button, I get the whole page as I wished. After I search for the same table name, I get the same page again, but after I check the same table the third time, I only get two tables being drew. The same issue occurs if I check 'test' table once, then 'test2' twice.

UPDATE: After the second ajax call (so if you type something and click to check meanwhile an other one is in the browser) the jQuery plugin only load the mysqlTable template and doesn't the textareas. Despite this textareas still appear, but if you call the third time any table then the issue occurs, the success function stops executing half-way and I only see two tables without textareas.

What I noticed is that the third time it calls ajax, it only executes until that part where I left the comment /* *** this is the point where ... That's the reason why textareas and other does not appear.

It supposed to be like this.

But it looks like this after the third call.

I disable the search input while loading, in order to avoid multiple ajax call, but something happens here.

JS ajax call

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
    });
};

I use jQuery HandlebarsJS to load Handlebars templates from separated files.

Do you have any thought about this issue? Why does it happen? (let me know if more code needed)

UPDATE

I inserted the full JS code of mine to JSFiddle, click here !

textareas (template)

{{#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}}

mysqlTable (template)

<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>

HTML

<!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>

Get the table name - JSON file I receive

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

Get the table's data - JSON file I receive

 [
    {
    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: ""
    }
    ]

UPDATE 2

I commented out that jQuery plugin and tried a simple ajax call, but the same issue occurs. If I run this code, just the table will appear. If I change the code as textareas are in the first place, then only they will appear. Why does the code stops executing without any error? Are the two ajax call kick each other out?

The new ajax calls

 (function getTemplateAjax(path) {
        var source;
        var template;

        $.ajax({
            url: path, //ex. js/templates/mytemplate.handlebars
            cache: true,
            success: function(data) {
                source    = data;
                template  = Handlebars.compile(source);
                $('#tableHolder').html(template(o));
            }               
        });         
    })('templates/mysqlTable.html')     

    (function getTemplateAjax2(path) {
        var source;
        var template;

        $.ajax({
            url: path, //ex. js/templates/mytemplate.handlebars
            cache: true,
            success: function(data) {
                source    = data;
                template  = Handlebars.compile(source);
                $('#textareaHolder').html(template(o));
            }               
        });         
    })('templates/textareas.html')    

Answer 1

I found a (half)solution

As I copied that new code block to below UPDATE2, after I changed that again and found the (half)solution.

...
       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'));
...

It's quite ugly and with more template files it won't the best practice, so I'll look for a better solution. At least it works now.

So the bug was probably inside the plugin. I am going to write my own jQuery plugin for this task.

Answer 2

I think the problem is with the async mode for the ajax call for that reason I just commited a new changes you can take a look into the examples:
https://github.com/CKGrafico/jQuery_HandlebarsJS/commit/41eb4c7c39f9c1ef8bbd1015b594d0a33bb585ac maybe this could fix your problem.