jQuery: обновление сценария случайных цитат по клику пользователя?document.write Troubles

Question

Я пытаюсь создать небольшой ротатор динамических цитат, который накладывает текст на изображение. И JS, и JQuery прекрасно работают для этого. Проблема в том, что я хочу, чтобы он обновлялся при каждом нажатии кнопки, чтобы пользователям не приходилось обновлять страницу, чтобы увидеть новую цитату.

Можно ли даже выполнить document.write после использования jQuery.text (), .html () или .append () для предоставления кода для DIV? Он работает нормально, печатая фактический текст дословно, но не выполняет .

Если у кого-то есть опыт или альтернативные предложения, которые не подразумевают превращение его в целую вещь AJAX с PHP / MySQL, я был бы всем заинтересован. Я не ищу никого, кто бы написал мой код; просто укажи мне правильное направление. У меня огромное чувство, что это действительно должно быть намного проще, чем я себе представляю, и я знаю, что упускаю что-то фундаментальное и простое.

Спасибо за чтение, и я приветствую любые советы, которые вы могли бы предложить.

Редактирование / обновление: ниже приведен базовый код, чтобы дать вам лучшее представление о том, что я имею в виду.

<div id="text"></div>

<script src="quotes.js"></script>
$("#text").text('
  <script type="text/javascript">document.write(quote[Math.floor(Math.random()*5)]);&lt;/script&gt;
');

Я просто хочу обновить #text случайной цитатой, взятой из quotes.js. Если я смогу заставить это работать, я сам смогу выяснить, как обновить его с помощью jQuery.click ().

Answer 1

Вы не можете использовать document.write() после загрузки документа.Это приведет к тому, что весь документ будет очищен и запущен новый.Если вы хотите добавить текст в уже загруженный документ, то вы можете использовать соответствующие методы jQuery для изменения существующих элементов или добавления новых.

Чтобы помочь вам с точным кодом, нам нужносм. ваш HTML и более полное описание того, что вы пытаетесь добавить к нему.

В качестве некоторых примеров можно добавить объекты в элемент с помощью метода .append() jquery или с помощью .html()способ.

Answer 2

document.write() работает только с открытым документом, поэтому вы не должны использовать его в AJAX.

Если вы хотите выполнить JavaScript, просто используйте eval() или просто $.getScript().Это означает, что ответ AJAX должен быть массивом (JSON), тогда каждый элемент может быть скриптом, html ... затем вы отправляете их соответствующей функции.

Пример ответа JSON, который вы 'll "render":

[
  0: {type: 'replace', target: 'div#replaceme', value: '<p>Hello!</p>'},
  1: {type: 'script', target: NULL, value: 'http://example.com/test.js'},
  2: {type: 'append', target: '#result', value: '<p>Item 11</p><p>Item 12</p>'}
]

Answer 3

Если вы хотите, чтобы действие обновления DOM происходило после события щелчка, вам просто нужно прикрепить обработчик щелчка к кнопке:

$('#your_button').click(function() {
  // Action
  $('#your_element').html('<p>something</p>');
});

См: http://api.jquery.com/click/

Answer 4

Вы можете использовать метод jQuery html или append, который выполняет script, если он присутствует в передаваемом нами контенте.

Посмотрите на эту демонстрацию

http://jsfiddle.net/ShankarSangoli/hFgE6/1/