Не понимаю, сделал обычный ajax запрос, что бы подгрузилась разметка, в браузере всё отображается, что надо, а заглянул в исходный код, а там пустота, почему, кто с таким сталкивался? --- Добавлено --- Во вкладке elements присутствует, а ctrl+u там её нету
@Dimon2x, Ctrl+U - это исходный код. Т.е. тот, который был изначально при загрузке страницы, а все элементы, которые появляются динамически, там не отображаются.
Получить или посмотреть? Посмотреть можно инспектируя код в консоли. А получить, если мы говорим о JS, то можно так же, как и любой другой элемент.
В общем я хочу сделать, как бы двойной ajax, сначала нажимаю на ссылку, загружается форма, потом надо эту форму заполнить и выполнить ajax запрос с ней. --- Добавлено --- @Deonis не знаю, чего не хватает.
Может надо было начать с того, что что-то не работает? И скорее всего, что не работает Ajax-запрос для отправки данных из формы. Повторятся о том, что такое делегирование событий, я уже не буду, поэтому сразу к коду... Если jQuery: Код (Javascript): $('#div_content_and_user').on('submit', '#form_settings_user', function(e) { e.preventDefault(); // тут выполняете Ajax-запрос с данными формы }); Если нативный JS: Код (Javascript): document.getElementById('div_content_and_user').addEventListener('submit', function(e) { if (e.target.id === 'form_settings_user') { e.preventDefault(); // тут выполняете Ajax-запрос с данными формы } });
Вот так у меня сейчас HTML: <a href="#" id="settings" ><li>Настройки</li></a> </ul> </div> <div id="div_content_and_user"> </div> <script> settings.addEventListener('click', function (e) { e.preventDefault(); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { div_content_and_user.innerHTML = this.responseText; } } xmlhttp.open("GET", "settings_user.php", true); xmlhttp.send(); }) </script>
@Deonis Вот как раз то, в твоей статье, кнопка в исходном коде, не появляется. --- Добавлено --- @johovich пока что данные отправлять не надо, надо просто вывести шаблон с формой. Открыть страницу без перезагрузки --- Добавлено --- @Deonis HTML: <div class="parent"> <div class="child"> <div class="grandchild"></div> </div> </div> <script> document.addEventListener('click', e => { if (e.target.tagName === 'BUTTON') { console.log('А вот и наша кнопка приехала!'); } else { console.log('Это не кнопка...'); } }); document.querySelector('.grandchild').innerHTML = '<button>Hi there!</button>'; </script> Отобразиться в браузере, но в исходнике не будет её.
@johovich PHP: <form action="" method="POST" id="form_settings_user"> <input class="qqq" id="a001" name="name" type="text" placeholder="Изменить имя"> <input class="qqq" id="a001" name="tel" type="text" placeholder="Изменить телефон"> <input name="goo" type="submit" value="Изменить"> </form> <script> console.log(333); var updateUser = document.querySelector('.update-user'); updateUser.addEventListener('click', function (e) { //e.preventDefault(); console.log(333); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { //likeCount[i].innerHTML = this.responseText; } } //xmlhttp.open("POST", "/comment/like", true); //xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') //xmlhttp.send("id=" + commentId); }) </script>
Я статьи не писал. Кнопка формы? Так она и не будет появляться в исходном коде, т.к. форма с этой кнопкой добавляются динамически. Повторю еще раз... Исходный код - этот только тот HTML, который был при загрузке страницы, на то он и исходный.
Исходный код когда открываешь, браузер заново по ссылке грузит. Там ничего аяксового и не будет. Смотри по f12, там все должно появляться и исчезать, когда Аякс работает. --- Добавлено --- Ну это ты погорячился. Он там исходный не поэтому. Просто там то, что сервер отдаёт по ссылке.
Еще раз громко и чётко. F12 нажимаешь и видишь свою страницу в исходном коде внизу и отрендеренную сверху, там все и смотришь, там твои кнопки будут появлятся и исчезать.
Где тут смайлик "рукалицо"? Короче Код (Javascript): var divContentAndUser = document.getElementById('div_content_and_user'); // Получаем и выводим форму document.getElementById('settings').addEventListener('click', function(e) { e.preventDefault(); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { divContentAndUser.innerHTML = this.responseText; } } xhr.open("GET", "settings_user.php", true); xhr.send(); }); // Отправляем данные формы divContentAndUser.addEventListener('submit', function(e) { if (e.target.id === 'form_settings_user') { e.preventDefault(); var xhr = new XMLHttpRequest(); xhr.open('POST', 'path/to/handler.php'); xhr.send(new FormData(e.target)); } });
@johovich, я ни на кого, сударь, не ругаюсь. Особенно, когда уставший и хочу спать. И спорить или доказывать что-то - желания тоже нет. Хочу добить эту тему до логического финала и уткнуться фейсом в подушку.
@Deonis А как получить данные, которые отправились? Выводит undefined Код (Javascript): // Отправляем данные формы divContentAndUser.addEventListener('submit', function(e) { if (e.target.id === 'form_settings_user') { e.preventDefault(); var xhr = new XMLHttpRequest(); console.log(this.responseText); xhr.open('POST', 'settings_user.php'); xhr.send(new FormData(e.target)); } });