Member Avatar for Yorkiebar14

Hello,

I'm having some problems with my jQuery script. It works correctly except it doesn't wait for the internal AJAX request to return before adding the variable data 'daa' to the HTML table variable. I debugged it a bit using 'alert' and I think it's adding the 'daa' data to the end of the table (after the '</table>'). Any help is appreciated, thanks.

function getPage(header, curSet, perSet, table, indexes, callback) {
                $.get('api.php?act=loadRecords&table='+table+'&curSet='+curSet+'&perSet='+perSet+'&indexes='+indexes, function(data) {
                    var json = jQuery.parseJSON(data);
                    var ret = "<table cellspacing='0' cellpadding='0'><tbody>";
                    var catID = findCategory(indexes);
                    ret += header;
                    for (var i=0;i<json.length;i++) {
                        ret += "<tr>";
                        for (var td=0;td<json[i].length;td++) {
                            if (td == catID) {
                                $.get('api.php?act=getCategoryName&cid='+catID, function(daa) {
                                    ret += "<td>"+daa+"</td>";
                                });
                            }else
                                ret += "<td>"+json[i][td]+"</td>";
                        }
                        ret += "</tr>";
                    }
                    ret += "</tbody></table>";
                    callback(data = ret);
                });
            }
  • 2 Contributors
  • 4 Replies
  • 501 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Yorkiebar14
Member Avatar for Yorkiebar14

I have just tried .when (sorry for the delay) but I'm having the same problem...

if (td == catID) {
                                $.when( $.ajax( 'api.php?act=getCategoryName&cid='+json[i][td] ) ).then(function( daa, textStatus, jqXHR ) {
                                    // alert(daa);
                                    ret += "<td>"+daa+"</td>";
                                });
                            }else
                                ret += "<td>"+json[i][td]+"</td>";

The information does not get added in the line "ret += "<td>"+daa+"</td>";", but if I uncomment the alert line, it shows the correct information.

Member Avatar for AndrisP

I don't know what your function returns, but maybe this will help

<!DOCTYPE html>
<html lang="lv">

<head>
<title>TEST-PAGE</title>

<style type="text/css">
#test_0 { background:#FFFF00; }
#test_1 { background:#00FFFF; }
#test_2 { background:#FF00FF; }
#test_0 , #test_1 , #test_2 { height:200px; }
</style>

<script language="javascript" type="text/javascript" src="scripts/jquery.2.1.1.js"></script>
<script language="javascript" type="text/javascript">
function testfunc1(){
    $('#test_0').html('');
    $.when(
        $.get( "index.php", {param:"test"}, function(data){
            $('#test_0').html(data);
            }),
        $( '#test_0' ).slideUp(1000),
        $( '#test_0' ).slideDown(1000)
        ).then(
        function(){
            $.when(
                $( '#test_1' ).slideUp(1000),
                $( '#test_1' ).slideDown(1000)
                ).done(
                function(){
                    $( '#test_2' ).slideUp(1000),
                    $( '#test_2' ).slideDown(1000)
                    }
                )
            }
        );
    }

function testfunc2(){
    $('#test_0').html('');
    $.get( "index.php", {param:"test"}, function(data){
        $('#test_0').html(data);
        });
    $( '#test_0' ).slideUp(2000);
    $( '#test_0' ).slideDown(2000);
    $( '#test_1' ).slideUp(2000);
    $( '#test_1' ).slideDown(2000);
    $( '#test_2' ).slideUp(2000);
    $( '#test_2' ).slideDown(2000);
    }

</script>
</head>

<body>
    <input type="button" onclick="testfunc1()" value="test 1" />
    <input type="button" onclick="testfunc2()" value="test 2" />
    <div id="test_0"></div>
    <div id="test_1"></div>
    <div id="test_2"></div>
</body>

</html>

And index.php containing only one line

<?php
if(isset($_GET['param'])){ sleep(6); echo $_GET['param']; exit(); }
?>

Function testfunc1() wait response from index.php (in PHP example 6 seconds sleep). Function testfunc2() don't wait response.

Member Avatar for Yorkiebar14

I still can't seem to get it to work. Maybe you could help me through Team Viewer or something?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.