Контент будет отображаться только при задержке - PullRequest
Новая
       5

Контент будет отображаться только при задержке

1 голос
/ 18 апреля 2011

У меня проблема при загрузке контента в div через Ajax.
Я начинаю с открытия диалогового окна, когда нажимаю на кнопку. Диалоговое окно загружается в файл php.
Сразу после кода для диалогового окна я поместил некоторый код для загрузки определенного содержимого в div в этом php-файле. Мой код: 

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>

Я пытался решить эту проблему с помощью оператора $ (document) .ready из jQuery, но не работал ни в каком порядке.
Я думаю, что проблема в том, что div неизвестно (как-то) Ajax при отправке контента, но я все же получаю результат.

Итак, мой вопрос:
- Почему мой код работает, когда я помещаю в него предупреждение? (Мне нужно открыть диалоговое окно только один раз)
- Почему мой контент загружается и выгружается через одну миллисекунду? И почему мне пришлось дважды открыть диалог?

UPDATE
Когда я помещаю предупреждение после отправки responseText, мне нужно дважды открыть диалоговое окно, прежде чем я вижу окно предупреждения.

ОБНОВЛЕНИЕ 2
Код, который вызывает событие: 

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

Эта кнопка находится внутри jquery-ui-гармошки.

1 Ответ

1 голос
/ 18 апреля 2011

Я не совсем понимаю, почему такой сложный вызов ajax и синтаксический анализ значения с серверной страницы, но, возможно, у вас есть один JS-код для более чем одной функции редактирования в нескольких местах ... Но к делу:

Похоже, что у вас нет <div id="editpersoneelform"></div> внутри HTML, из которого называется AJAX ...

Предположим, у вас есть похожий HTML-файл (я рекомендую использовать jQuery по крайней мере для работы сэлементы, когда вам нужно, чтобы AJAX вызывался в необработанном виде): 

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

, а затем у вас есть PHP-файл, который вызывается AJAX: 

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

Попробуйте это и дайте нам знать, если Вы преуспели.

...