Question

通过Ajax将内容加载到div时出现问题我点击按钮时打开一个对话框。对话框加载到php文件中在对话框的代码之后，我放置了一些代码，将某些内容加载到该php文件中的div中。我的代码：

function edit(serverpage, persoonid)
{
   $(".opendg").dialog(
    {
        open:function ()
        {
            $(this).load('/location/php/' + serverpage);
        },
        title: 'Change!',
        autoOpen: true,
        closeOnEscape: true,
        height: 335,
        width: 650,
        modal: true,
        resizable: false,
        close: function(){},
        buttons:
            {
                "Change": function()
                {
                    sendedit(serverpage, persoonid);
                    return;
                },
                "Cancel": function()
                {
                    $(this).dialog("close");
                }
            }
    });
    xmlhttp = ajaxFunction();
    if (xmlhttp)
    {
        var url = "/location/php/" + serverpage;
        var pagelength = serverpage.length;
        var value = serverpage.substr(0,pagelength - 4);
        var params = "edit=" + value + "&id=" + persoonid;
        xmlhttp.open("POST", url, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.setRequestHeader("Content-length", params.length);
        xmlhttp.setRequestHeader("Connection", "close");
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
               if(xmlhttp.responseText != '')
               {
                value = value + 'form';
                alert('test');
                document.getElementById(value).innerHTML=xmlhttp.responseText;
                }
            }
        }
        xmlhttp.send(params);
    }
}

正如您所看到的，我在将responseText发送到div之前就发出了警告我这样做是因为没有警报我得到一个空的表格！
我第一次打开对话框时什么都没看到。重新打开后，我看到了我想要的内容的短暂闪现，但在几毫秒内就消失了。

生成内容的代码：

<?php
    if($_POST['edit'] == 'editpersoneel')
    {
        //Query run here to get the results
        echo '<form>
            <table>
                <tr>
                    <td class="first">
                        Location: 
                    </td>
                    <td>
                        <input type="text" value="'.$result['location'].'" />
                    </td>
                    <td class="first">
                        phonenumber
                    </td>
                    <td>
                        <input type="text" value= "'.$result[phonenumber'].'" />
                    </td>
                </tr>
            </table>
        </form>';
    }
    ?>
<div id="editpersoneelform"></div>

我尝试用jQuery中的$（document）.ready语句解决这个问题，但是没有按任何顺序工作我认为问题在于，在发送内容时，div（以某种方式）对Ajax是未知的，但我确实得到了结果。

所以我的问题是：
- 当我在其中发出警报时，为什么我的代码会起作用？（我只需要在这里打开对话框）
- 为什么我的内容在此后的一毫秒内被加载和卸载？为什么我必须两次打开对话框？

更新
当我在发送responseText后发出警报时，我必须打开对话框两次才能看到警告框。

更新2
调用事件的代码：

<div class="jbutton">
    <a onclick="edit(\'editpersoneel.php\',\''.$b['id'].'\')">Adjust</a>
</div>

此按钮位于jquery-ui-accordion内。

Answer 1

我不完全理解为什么如此复杂的ajax调用和从serverpage解析值，但是你可能在更多的地方有一个JS代码用于多个编辑功能......但是到了这一点：

看起来您在调用AJAX的HTML中没有<div id="editpersoneelform"></div> ...

让我们假设您有类似的HTML文件（当您需要以原始方式调用AJAX时，我建议至少使用jQuery来处理元素）：

<div id="editpersoneelform"></div>
<div class="jbutton">
    <a onclick="edit(\'editpersoneel.php\',\''.$b['id'].'\')">Adjust</a>
</div>
<script type="text/javascript">
    function edit(serverpage, persoonid) {
        $(".opendg").dialog({
            open:function () {
                $(this).load('/location/php/' + serverpage);
            },
            title: 'Change!',
            autoOpen: true,
            closeOnEscape: true,
            height: 335,
            width: 650,
            modal: true,
            resizable: false,
            close: function(){},
            buttons: {
                "Change": function() {
                    sendedit(serverpage, persoonid);
                    return;
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });
        xmlhttp = ajaxFunction();
        if (xmlhttp) {
            var url = "/location/php/" + serverpage;
            var pagelength = serverpage.length;
            var value = serverpage.substr(0,pagelength - 4);
            var params = "edit=" + value + "&id=" + persoonid;
            xmlhttp.open("POST", url, true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.setRequestHeader("Content-length", params.length);
            xmlhttp.setRequestHeader("Connection", "close");
            xmlhttp.onreadystatechange = function() {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if(xmlhttp.responseText != '') {
                        value = value + 'form';
                        alert(value);
                        $('div#'+value).html(xmlhttp.responseText);
                    }
                }
            }
            xmlhttp.send(params);
        }
    }
</script>

然后你有你的AJAX调用的PHP文件：

<?php
if($_POST['edit'] == 'editpersoneel') {
    //Query run here to get the results
    $form = '<form>
        <table>
            <tr>
                <td class="first">Location: </td>
                <td><input type="text" value="'.$result['location'].'" /></td>
                <td class="first">phonenumber</td>
                <td><input type="text" value= "'.$result[phonenumber'].'" /></td>
            </tr>
        </table>
    </form>';
    echo $form;
}
?>

如果要将AJAX响应加载到某个元素，那么该元素必须是调用AJAX的代码中的最新元素。

试试这个，如果你成功了，请告诉我们。

内容仅在延迟时显示

1 个答案: