Question

我相信我的问题可能与功能刷新列表所花费的时间有关，但是尝试了十几种不同的谷歌搜索可以找到的所有内容让我陷入困境......

我正在动态创建一个列表：

<ul id="events" class="select" name="events" style="width:40vw;"></ul>

LoadEvents()
{
    var xhttp;
    var EventList;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (this.readyState == 4 && this.status == 200)
        {
            EventList =  this.responseText.split(",");
            //Clear List
            $('#events').empty();
            EventList.forEach(function(item, index, array) 
            {
                if(item !== "")
                {
                    $ID = item.split(";")[0];
                    $('#events').append('<li class="event" id=\"' + $ID '\">' + item.split(";")[1] + '</li>');
                }
            });  
        }
    };
    xhttp.open("GET", "DataLink2.php?con=GetFullEvents&orderby=" + $OrderBy, true);
    xhttp.send();
}

EventList是从数据库中提取的字符串数组“ID; EventName”。

提取我正在使用的ID：

var selectedid;
//Within the function that requests the refresh I do
selectedid = $('#events').find('li.selected').attr('id');
//calling the refresh function
LoadEvents();
//And trying to reselect the item in the list
$('#' + selectedid).click();

在fiddle上它完美无缺，但实际上它总是选择之前的项目刷新列表！

我在这里尝试过类似问题的各种想法，包括：

$.when(LoadEvents()).then($('#' + selectedid).click());

我也尝试过将$('#' + selectedid).click();放到函数中。

然后我尝试了提供的前两个解决方案on this question（还没有完全解决如何使用“myCustomevent”进行第三个选项）但是在每种情况下$('#' + selectedid).click();都在李的重生。

有没有办法强制一个事件等到另一个事件完全结束？

PHP：

$connect = mysqli_connect($host_name, $user_name, $password, $database);

if(mysqli_connect_errno())
{
    $query = "SELECT * FROM `Events` WHERE `FinishTime` > '00:00:00' ORDER BY `FinishTime` DESC";
    //Query Result
    if ($result = mysqli_query($connect, $query)) 
    {
        /* fetch associative array */
        while ($obj = mysqli_fetch_object($result)) 
            {
            printf ("%s,", $obj->ID.";".$obj->EventName;
            }
            /* free result set */
            mysqli_free_result($result);
    }
    else
    {
        echo '<p>Connection failed.</p>';
    }
}

Answer 1

我相信您正在进行异步调用以从数据库中检索事件。它立即返回（即使尚未加载响应）并将控制传递给选择逻辑。

您可以尝试将选择逻辑放在响应回调中：

LoadEvents(preselect)
    {
        if (typeof preselect === 'undefined') {
            preselect = false;
        }

        var xhttp;
        var EventList;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function()
        {
            if (this.readyState == 4 && this.status == 200)
            {
                EventList =  this.responseText.split(",");
                //Clear List
                $('#events').empty();
                EventList.forEach(function(item, index, array)
                {
                    if(item !== "")
                    {
                        $ID = item.split(";")[0];
                        $('#events').append('<li class="event" id=\"' + $ID '\">' + item.split(";")[1] + '</li>');
                    }
                });

                if (preselect) {
                    //And trying to reselect the item in the list
                    $('#' + selectedid).click();
                }
            }
        };
        xhttp.open("GET", "DataLink2.php?con=GetFullEvents&orderby=" + $OrderBy, true);
        xhttp.send();
    }

我希望有所帮助！

Answer 2

简单的解决方案是将ID或其他一些数据保存到local storage更多信息here
只需localStorage.setItem('selected', selectedid);
在重新加载任何页面后，您可以使用localStorage.getItem('selected');

进行调用

Answer 3

最终使它发挥作用（更多的是工作而不是解决方案）......

我在加载循环结束时添加了一个测试，以检查我是否在最后一次迭代，然后执行了.click()

LoadEvents()
{
    var xhttp;
    var EventList;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (this.readyState == 4 && this.status == 200)
        {
            EventList =  this.responseText.split(",");
            //Clear List
            $('#events').empty();
            EventList.forEach(function(item, index, array) 
            {
                if(item !== "")
                {
                    $ID = item.split(";")[0];
                    $('#events').append('<li class="event" id=\"' + $ID '\">' + item.split(";")[1] + '</li>');
                }
                if (index == EventList.length - 1)
                {
                    $('#' + selectedid).click();
                }
            });  
        }
    };
    xhttp.open("GET", "DataLink2.php?con=GetFullEvents&orderby=" + $OrderBy, true);
    xhttp.send();
}

如果有人能发布更好的解决方案，我很乐意看到它！

刷新列表后重新选择<ul>中的项目

3 个答案: