内容仅在延迟时显示

I have a problem when loading content into a div via Ajax.
I start with opening a dialogbox when I click on a button. The dialog box loads in a php file.
Right after the code for the dialog box I placed some code to load certain content into a div in that php file. My code:

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

As you can see I placed an alert just before sending the responseText to the div.
I did this because without the alert I get an empty form!
The first time I open the dialog box I see nothing. After reopening I see a short flash of the content I want, but disappears in milliseconds.

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

The code which generates the content:

生成内容的代码：

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

I tried solving this with the $(document).ready statement from jQuery, but didn't work in any order.
I think the problem is that the div is unknown (somehow) to Ajax when sending the content, yet I do get a result.

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

So My question is:
- Why does my code work when I place an alert in it? (I only have to open the dialog once here)
- Why does my content get loaded and unloaded one millisecond thereafter? And why did I had to open the dialog twice?

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

UPDATE
When I place the alert after sending the responseText I have to open the dialog twice before I get to see the alertbox.

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

UPDATE 2
The code that calls the event:

更新2调用事件的代码：

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

This button is placed inside a jquery-ui-accordion.

这个按钮放在一个jquery-ui-accordion里面。

1 个解决方案

#1

I don't exactly understand why so complicated call of ajax and parsing of value from serverpage, but maybe You have one JS code for more than one edit function at more places... But to the point:

我不完全理解为什么如此复杂的ajax调用和从serverpage解析值，但也许你有一个JS代码可以在更多地方使用多个编辑函数......但是要点：

It looks like You don't have Your <div id="editpersoneelform"></div> inside the HTML from where the AJAX is called...

看起来你在调用AJAX的HTML里面没有你的

...

Lets suppose You have similar HTML file (I recommend using of jQuery at least for working with elements when You need the AJAX to be called in raw way):

让我们假设你有类似的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>

and then You have Your PHP file that is called by AJAX:

然后你有你的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;
}
?>

If You want to load AJAX response to a certain element, that element has to be recent in the code from where the AJAX is called.

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

Try this and let us know if You'd succeeded.

试试这个，让我们知道你是否成功了。

#1