js .html demo

async function elementUpdate(selector) < try < var html = await (await fetch(location.href)).text(); var newdoc = new DOMParser().parseFromString(html, 'text/html'); document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML; console.log('Элемент '+selector+' был успешно обновлен'); return true; >catch(err) < console.log('При обновлении элемента '+selector+' произошла ошибка:'); console.dir(err); return false; >>

Нажми меня, чтобы обновить таблицу

, и в него напихать всё содержимое. В нужный момент скрываем первый

Либо использовать AJAX для получения содержимого с сервера.

Войдите, чтобы написать ответ

Как отключить скролл страници при фокусе определенного элемента?

Источник

Обновление содержимого веб-страницы без перезагрузки с помощью JavaScript

Важно понимать, что идентификатор должен быть уникальным на всей странице, поэтому вызовом $(‘#block’) мы получим первый элемент на странице с таким id. Если нужно изменить содержимое нескольких элементов, стоит использовать классы.

Button 1
Button 2
Button 3
Clear block

return false; после вызова нужен для того, чтобы отменить переход по url из href , в нашем случае мы не вернемся вверх страницы, а останемся на месте. Теперь рассмотрим саму функцию на JS, менять содержимое блока будем с помощью метода .html() . Если использовать его без аргументов, то он вернет нам текущее содержимое блока, если передать ему один аргумент, например строку, то он заменить содержимое блока на нее. В более приближенных к реальности случаях, методу передается функция, которая отрабатывает для блока и возвращает ему новое содержимое. Но пока мы ограничимся передачей строки.

      
 
Button 1 
Button 2 
Button 3 
Clear block 
   

Пример передачи функции в метод .html()

Я придумал совсем простенькую функцию, которая будет накапливать нашу историю нажатий на кнопки, и очищать ее, когда мы захотим. Для демонстрации вполне достаточно.

 function setNewEntry(entry) < $('#block').html(getNewEntry($('#block').html(), entry)); >function getNewEntry(oldHTML, newHTML)

Источник

Перезагрузка отдельного элемента на странице

Есть ли какая-то функция, которая обновила бы содержимое именно этого блока?
Смысл такой:
В данном диве есть данные, пользователь их редактирует.
Дальше нажимает на кнопку, на которой срабатывает функция подключения к php файлу, без перезагрузки страницы и обрабатывает данные возвращая результат типа: Данные успешно обновлены.
Данные действительно обновляются, но это не увидишь пока не перезагрузишь страницу.
Вот и подумал, что наверняка реально, при получении положительного ответа от XMLHttpRequest(); обновлять нужный div блок.
Так ли это? Если да, то если можно пример покажите.

Печать отдельного элемента на странице
Всем Добрый День! Возникла проблема как сделать распечатку отдельного элемента на странице? Т.е.

Как словить событие load отдельного элемента на странице?
Есть страничка, часть которой формируется на php. Слева дерево навигации, а справа табличка с.

Перезагрузка одного элемента на странице через AJAX
Здравствуйте, ребят! Очередная тема про аякс. Перехожу сразу к сути, необходима перезагрузка.

Как сделать автоматическое обновление отдельного блока на странице?
Всем привет! Ребята, возник интересный вопрос: как сделать автоматическое обновление отдельного.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

html> head> title>expXMLHttpRequest.html/title> script> function fnOC() < var surl='u1.php'; var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() < if(xmlhttp.readyState==4&&xmlhttp.status==200) document.getElementById('idAcc').innerHTML=xmlhttp.responseText; > xmlhttp.open('GET',surl,true); xmlhttp.send(); > /script> /head> body> input type='button' value='Run' onClick='fnOC();'/>br/> Result:[span id='idAcc'>/span>] /body> /html>

. Файл u1.php (к которому обращаемся через XMLHttpRequest) должен находиться в той же директории. Вот он:

У меня на исходной странице идет так:

 // Подключаем js файл, его выложу ниже 
 

При клике на картинку срабатывает функция getData и начинает обрабатываться запрос:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

// функция запроса данных с сервера function getXMLDocument(data,sess) { var xml1; data = encodeURIComponent(data); var fullurl = "http://domen.ru/include/request.php"; var fullurl2 = "http://domen.ru/include/request.php?data="+ data+"&ses="+sess; if(window.XMLHttpRequest) { xml1=new XMLHttpRequest(); xml1.onreadystatechange=function() { if(xml1.readyState==4&&xml1.status==200) document.getElementById('content_div').innerHTML=xml1.responseText; } xml1.open("POST", fullurl, true); xml1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var ParamStr = "data="+ data+"&ses="+sess; xml1.setRequestHeader("Content-Length", ParamStr.length); xml1.send(ParamStr); // если надо получать именно XML, то включается это: //return xml1.responseXML; // иначе будет только текст return xml1.responseText; } else if(window.ActiveXObject) { xml1=new ActiveXObject("Microsoft.XMLDOM"); xml1.async=false; xml1.load(fullurl2); return xml1; } else { alert("Загрузка XML не поддерживается браузером"); return null; } } // функция, срабатываемая на основном интервале function getData(curvar,data,obj,sess,idf,username,user_id) "+idf+" else { if(obj!="") { document.getElementById(obj).innerHTML = ""; } var newData=getXMLDocument(senddata,sess); // проверим - если равна null if(newData!="null" || newData!="") { if(obj=="") { return(newData); } else { document.getElementById(obj).innerHTML = newData; } } } }

Происходит что при клике на картинку :

Отображает просто надпись что раздел сделан разделом по умолчанию, а все что в диве находится — исчезает.

Источник