Как обратиться к элементу созданному в результате ajax-запроса?

boomrest · February 14, 2012

Файл ajax.js


function showContent(link,contentBody) {  
            var cont = document.getElementById(contentBody);  
            var loading = document.getElementById('loading');  

            var http = createRequestObject();
            if( http )   
            {  
                http.open('get', link);  
                http.onreadystatechange = function ()
                {  
                    if(http.readyState == 4)
                    {  
                        cont.style.display='block';
                        cont.innerHTML = http.responseText;
                    }  
                }  
                http.send(null);      
            }  
            else   
            {  
                document.location = link;  
            }  
        }  

        // создание ajax объекта  
        function createRequestObject()
        {  
            try { return new XMLHttpRequest() }  
            catch(e)   
            {  
                try { return new ActiveXObject('Msxml2.XMLHTTP') }  
                catch(e)   
                {  
                    try { return new ActiveXObject('Microsoft.XMLHTTP') }  
                    catch(e) { return null; }  
                }  
            }  
        }

Файл zapis.php


Время записи: <input type="text" id="date1" size="10" maxlength="10" /> <input type="text" id="time1" size="5" maxlength="5" />

Файл index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
#zapis {
  width: 270px;
  height: 40px;
  top: 100px;
  left: 200px;
  margin: 0px auto;
  padding: 15px 0px 0px 30px;
  border:1px solid #FF9966;
  background: #CCFFCC;
  position: absolute;
  display: none;
  z-index: 100;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script>
function dateTime() {
    document.getElementById('date1').value = '14-02-2012';
    document.getElementById('time1').value = '10:07';
}
</script>
</head>

<body>
<div id="block_box"></div>
<div id="add">
<h1>Добавление записи</h1>

<!-- По событию onChange в <div id="zapis"></div> выводится результат скрипта zapis.php -->
<select name='var1' onChange="showContent('zapis.php','zapis'), dateTime()">
  <option value='1' selected>Вариант 1</option>
  <option value='2' selected>Вариант 2</option>
  <option value='3' selected>Вариант 3</option>
</select>
  <div id="zapis"></div> <!-- ...вот сюда -->
  <div id="loading" style="display: none">Загрузка...</div>
</div>

</body>
</html>

Для записи значения даты и времени в input id="date1" и id="time1" (файл zapis.php) нужно вызвать функцию js dateTime() (файл index.php). Но как это сделать? Понятно, что пока не сработает для списка событие onChenge, инпутов ещё не существует и обращение к ним вызовет ошибку. Если вставить вызов функции dateTime() в onChange() - да, работает, но только до того момента, пока не пропал фокус с выбранного элемента списка. Т.е. сразу же надпись пропадает.

Пробовал вызов нужной функции засунуть в onLoad файла zapis.php, т.е. <body onLoad='dateTeme()'> - не работает. В zapis.php даже alert не работает почему-то. (Кстати, почему?)

Как мне обратиться по id к элементу, созданному в результате ajax запроса? Не может быть, что нет выхода.

Спасибо.

Edited February 14, 2012 by boomrest

Great Rash · February 14, 2012


function showContent(link,contentBody) {  
            var cont = document.getElementById(contentBody);  
            var loading = document.getElementById('loading');  

            var http = createRequestObject();
            if( http )   
            {  
                http.open('get', link);  
                http.onreadystatechange = function ()
                {  
                    if(http.readyState == 4)
                    {  
                        cont.style.display='block';
                        cont.innerHTML = http.responseText;
                        dateTime();
                    }  
                }  
                http.send(null);      
            }  
            else   
            {  
                document.location = link;  
            }  
        }

???

boomrest · February 14, 2012

Можно было догадаться... Спасибо большое-прибольшое

Sign In

Как обратиться к элементу созданному в результате ajax-запроса?

Question

boomrest

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

boomrest

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information