Javascript обновление части страницы

Динамическое обновление части страницы

Есть кнопки, при нажатии которых обновляется динамически часть контента. При нажатии на одну кнопку отображается один контент, при нажатии на другую кнопку другой контент. Что я хочу получить, чтоб один контент всегда был открытым, потом уже когда нажимаешь на другой, другой был открыт (посредством mysql). Не могу осознать как можно из этого слепить то, что хочу.

 $(document).ready(function() < $('#btn1').click(function()< $.ajax(< url: "page1.html", cache: false, success: function(html)< $("#content").html(html); >>); >); $('#btn2').click(function() < $.ajax(< url: "page2.html", cache: false, success: function(html)< $("#content").html(html); >>); >); $('#btn3').click(function() < $.ajax(< url: "page3.html", cache: false, success: function(html)< $("#content").html(html); >>); >); >);

1 ответ 1

В самый конец. Тем самым вы имитируете click по первой кнопке, что приводит в свою очередь к ajax запросу.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Refresh Part of Page (div)

I have a basic html file which is attached to a java program. This java program updates the contents of part of the HTML file whenever the page is refreshed. I want to refresh only that part of the page after each interval of time. I can place the part I would like to refresh in a div , but I am not sure how to refresh only the contents of the div . Any help would be appreciated. Thank you.

6 Answers 6

Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.

$('#thisdiv').load(document.URL + ' #thisdiv'); 

Note, load automatically replaces content. Be sure to include a space before the id selector.

Hey man, just found out that you are a missing a space after the ‘ (colon right?), this example did not work out of the box 🙂 $(‘#thisdiv’).load(document.URL + ‘ #thisdiv’);

This method has a big disadvantage. If you use this and the part of the page reloads you can’t do the same JQuery/Ajax action again without reloading whole page in browser. After the reload with this method JQuery is not initalized / will not work again.

@GregHilston here is my js code $(‘#dashboard_main_content’).load(document.URL + ‘ #dashboard_content’); and here is my HTML

$(‘#thisdiv’).load(document.URL + ‘ #thisdiv>*’) prevents having another #thisdiv inside the original #thisdiv

Let’s assume that you have 2 divs inside of your html file.

some text
 
some other text
 

The java program itself can’t update the content of the html file because the html is related to the client, meanwhile java is related to the back-end.

You can, however, communicate between the server (the back-end) and the client.

What we’re talking about is AJAX, which you achieve using JavaScript, I recommend using jQuery which is a common JavaScript library.

Let’s assume you want to refresh the page every constant interval, then you can use the interval function to repeat the same action every x time.

setInterval(function() < alert("hi"); >, 30000); 

You could also do it like this:

Whereea foo is a function.

Instead of the alert(«hi») you can perform the AJAX request, which sends a request to the server and receives some information (for example the new text) which you can use to load into the div.

A classic AJAX looks like this:

var fetch = true; var url = 'someurl.java'; $.ajax( < // Post the variable fetch to url. type : 'post', url : url, dataType : 'json', // expected returned data format. data : < 'fetch' : fetch // You might want to indicate what you're requesting. >, success : function(data) < // This happens AFTER the backend has returned an JSON array (or other object type) var res1, res2; for(var i = 0; i < data.length; i++) < // Parse through the JSON array which was returned. // A proper error handling should be added here (check if // everything went successful or not) res1 = data[i].res1; res2 = data[i].res2; // Do something with the returned data $('#div1').html(res1); >>, complete : function(data) < // do something, not critical. >>); 

Wherea the backend is able to receive POST’ed data and is able to return a data object of information, for example (and very preferrable) JSON, there are many tutorials out there with how to do so, GSON from Google is something that I used a while back, you could take a look into it.

I’m not professional with Java POST receiving and JSON returning of that sort so I’m not going to give you an example with that but I hope this is a decent start.

Источник

Частичное обновление страницы

Здравствуйте!
Есть страница, на которой картинка объекта и данные у каждого оборудования.
Можно ли сделать, так чтобы обновление происходило именно в тех тегах, которые я укажу.
Пока у меня работает, просто — каждые 5сек, происходит обновление полностью страницы.
Спасибо!

Частичное обновление страницы
Как сделать так, чтобы при переходе на другие страницы, обновлялась лишь часть сайта? Тоесть мне.

частичное обновление страницы
Имеется страница с html содержимым и подключённым в ней CSS файликом. и вот стрвница.

Частичное обновление веб страницы
Работаю с бд в которой несколько тысяч строк данных. Для снижения нагрузки хочу организовать такую.

Откуда берутся данные для обновления? На сервере должен быть какой-нибудь урл, отдающий контент для вставки с помощью AJAX.

Вообще, без базовых знаний JS тут не обойтись.

Сообщение от RexMoney

Добавлено через 44 секунды

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

 html> head> meta charset="utf-8"> title>Код/title> /head> body> div class="reload_this_div">Этот див перезагрузим/div> div class="dont_reload_this_div">этот не будем перезагружать/div> div class="reload_this_div">и еще этот перезагрузим/div> input type="button" value="Перезагрузить"> script src="script.js">/script> /body> /html>

document.querySelector('[type="button"]').onclick = async () => ')[0] divs[1].textContent = data.split('

echo 'Контент в 1-ый див|Контент для второго дива';

Все хорошо! Все работает!
Данные выводятся в виде текста.
Теперь мне нужно в другие div вставить изображение для визуализации.
Как это сделать?
Спасибо!

Добавлено через 2 часа 2 минуты
Дурная голова, рукам покоя не дает!
Методом перебора — подобрал.
В место «

script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">script> div>  div id="here">dynamic content span id='off'>9span>div>  div>ABCdiv>  div> script>  $(document).ready(function()  var counter = 9;  window.setInterval(function()  counter = counter - 3;  if(counter>=0)  document.getElementById('off').innerHTML=counter;  >  if (counter===0)  counter=9;  >  $("#here").load(window.location.href + " #here" );  >, 3000);  >);  script>