Перезагрузка всего, кроме одного div на веб-странице

Question

Я пытаюсь настроить базовую веб-страницу, и на ней есть небольшой музыкальный проигрыватель (niftyPlayer). Люди, для которых я делаю это, хотят, чтобы игрок находился в нижнем колонтитуле, и чтобы продолжить воспроизведение песни, когда пользователь переходит на другую часть сайта.

Могу ли я сделать это без использования фреймов? Есть несколько уроков по изменению части страницы с использованием ajax и innerHTML, но у меня возникают проблемы с замоткой головы вокруг получения всего, НО музыкальный проигрыватель перезагружается.

Заранее спасибо,

- Адам

Answer 1

Оберните содержимое в div и оберните проигрыватель в отдельный div.Загрузите содержимое в div содержимого.

У вас будет что-то вроде этого:

<div id='content'>
</div>
<div id='player'>
</div>

Если вы используете фреймворк, это легко: $('#content').html(newContent).

РЕДАКТИРОВАТЬ:

Этот синтаксис работает с jQuery и ender.js.Я предпочитаю эндер, но каждому свое.Я думаю, что MooTools похож, но я давно его использовал.

Код для AJAX:

$.ajax({
    'method': 'get',
     'url': '/newContentUrl',
     'success': function (data) {
         // do something with the data here
     }
});

Возможно, вам придется объявить, какой тип данных вы ожидаете.Я обычно отправляю json, а затем создаю элементы DOM в браузере.

EDIT:

Вы не упомянули свой язык сценариев на стороне веб-сервера / сервера, поэтому я не могу дать никакого кодапримеры для серверных вещей.Это довольно просто большую часть времени.Вам просто нужно определиться с форматом (опять же, я настоятельно рекомендую JSON, поскольку он является родным для JS).

Answer 2

Вы можете перезагрузить нужные DIV с помощью jQuery.ajax () и JSON :

Например:

index.php

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<a href='one.php' class='ajax'>Page 1</a>
<a href='two.php' class='ajax'>Page 2</a>

<div id='player'>Player Code</div>
<div id='workspace'>workspace</div>

one.php

<?php
$arr = array ( "workspace" => "This is Page 1" );
echo json_encode($arr);
?>

two.php

<?php 
$arr = array( 'workspace' => "This is Page 2" );
echo json_encode($arr);
?>

ajax.js

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event) {
        event.preventDefault();
        // load the href attribute of the link that was clicked
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                // updated to deal with any type of HTML
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

Answer 3

То, что вы ищете, называется шаблоном «одностраничный интерфейс».Это довольно распространено среди таких сайтов, как Facebook, где такие вещи, как чат, должны быть постоянными на разных страницах.Честно говоря, довольно сложно самостоятельно запрограммировать что-то подобное, поэтому я бы порекомендовал стоять на вершине существующего фреймворка, который выполняет часть работы за вас.Я успешно использовал backbone.js с этим шаблоном:

http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/

Answer 4

Используйте jQuery так:

<script>
$("#generate").click(function(){  
  $("#content").load("script.php");  
});  
</script>

<div id="content">Content</div>
<input type="submit" id="generate" value="Generate!">  
<div id="player">...player code...</div>

Answer 5

Полагаю, что вы могли бы сделать, это использовать div's: один для нижнего колонтитула с игроком в нем и один со всем остальным; давайте назовем это «контейнером», оба, конечно, в вашем теле. Затем, перейдя на сайт, просто нажмите кнопку, чтобы перезагрузить содержимое страницы в контейнере с помощью вызова ajax:

$('a').click(function(){
     var page = $(this).attr('page');
     // Using the href attribute will make the page reload, so just make a custom one named 'page'
     $('#container').load(page);
});

HTML

<a page="page.php">Test</a>

Тем не менее, проблема, с которой вы столкнулись, заключается в том, что вы действительно не будете перезагружать страницу, поэтому URL также не обновляется; но вы также можете исправить это с помощью некоторого JavaScript и использовать хэштеги для загрузки определенного содержимого в контейнер.