PHP生成的选项列表仅出现在第一个Ajax动态生成的容器中

时间:2017-07-27 12:05:54

标签: javascript php ajax

我遇到的问题是我的php生成的select / option列表不适用于我所有动态生成的块/容器。它只是将PHP select添加到最后一个容器/块实例,尽管为每个容器调用它。在使用警报进行故障排除时,似乎在添加容器/块并生成选择之前会运行所有迭代,因此它始终只显示在最后一个 -

n = -1
function addDiv() {
            n++;

因此,简要概述 - 在页面初始化代码将获得在特定条件下数据库中有多少条目,并将该数字应用于'length',然后多次运行addDiv()函数。通常,当通过按钮一次添加一个块时,它将使用addDiv()函数中的选项/选项列表通过php填充创建的块,但是当使用循环(initialize()函数)自动执行此操作时,上面问题发生了。

$( document ).ready(function() {
    initialize();
});

function initialize() {
$.ajax({
            url: 'get-entries.php',
            type: 'POST',
            dataType: 'text',
            cache: false,
            success: function(data) {
                result = data;
                var arrayJson = JSON.parse(data);

                console.log(arrayJson);
                length = arrayJson.length;
                console.log(length);

                for(var i = 0; i < length; i++) {
                 addDiv();
                };

                    },
                    error: function(jqXHR) {
                        alert("Error while fetching data");
                        console.log("Error while fetching data: " + jqXHR.status + " " + jqXHR.statusText + " " + jqXHR.responseText); //improved error logging
                    }
            });
    };

这里是与addDiv相关的代码,其中包含一些redaction,以便于阅读。

var n = -1;

    function addDiv() {
        n++;

     $.post(  
            "json-option-generator.php",  
        {}                               
        ).done(                          
            function(data)
            {
        $('#selectedcoin' + n).html(data); 
            });

     $("<div class='coinmarketcap fill' id='container" 
     + n + 
     "'><form id='"
     + n +
     "' name='"
     + n +
     "' class='formClass' method='post' action=''><select onchange='mySelect(this)' type='text' class='coinname' id='selectedcoin" 
     + n + 
     "' name='selectedcoin"
     + n +
     //.etc.....
     "' autocomplete='off' value=''><select></select>").appendTo(".main-container"); 

}

最后是PHP文件的内容,用于根据json数据生成选项列表 -

<?php
$json = file_get_contents("../ticker/full.json");

$decode = json_decode($json, true);
sort($decode);

echo '<select name="coinname">';
    foreach($decode as $a){
        echo "<option value='{$a['id']}'>{$a['name']}</option>";
    }
echo '</select>';
?>

我知道这很麻烦,可能需要深入阅读,所以我很感激任何人花时间去看。

有什么明显可以帮助推动我朝着正确的方向发展吗?我尝试通过使用setTimeout函数包装'addDiv()'来破坏initialize()中的'addDiv()'调用,但没有快乐。

1 个答案:

答案 0 :(得分:1)

它应该适用于此(我为理解命名的参数不同,但index_tn都可以命名为var n = -1; function sendToGenerator(index){ var index_t = index; $.post( "json-option-generator.php", {} ).done( function(data) { $('#selectedcoin' + index_t).html(data); } ); } function addDiv() { n++; sendToGenerator(n); $("<div class='coinmarketcap fill' id='container" + n + "'><form id='" + n + "' name='" + n + "' class='formClass' method='post' action=''><select onchange='mySelect(this)' type='text' class='coinname' id='selectedcoin" + n + "' name='selectedcoin" + n + //.etc..... "' autocomplete='off' value=''><select></select>").appendTo(".main-container"); } ):

{{1}}