div доступа jquery на другой странице - PullRequest
Новая
       1

div доступа jquery на другой странице

0 голосов
/ 26 ноября 2018

Мой javascript динамически генерирует содержимое onclick, и я хотел бы добавить динамически сгенерированный контент в div на другой странице, которая будет открыта после события click.

Вот что я 'мы попробовали: 

$(document).ready(function () {
  // dynamically generate stuff in #storage-div
  $.get(url, function(data) {
    $('#storage-div').append(data);
  })
  $(document).load('url #target-div', function(target) {
    $(target).append('#storage-div');
  })
})

И я продолжал получать пустым #storage-div, потому что ajax является асинхронным.

Что я хочу сделать, это поместить тег ref в <head>, какдля таблицы стилей, и тогда я могу получить доступ к #storage-div, не используя снова ajax.Возможно ли это?

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Один из способов - поместить в файл div хранилища, здесь я назову его test.html.Поскольку мы используем get на dataurl, он должен быть кэширован и вставлен внутрь storage-div на каждой странице после storage-div загрузки из статического html.

Содержимое test.html

<body>
  <div id="storage-div">
    <div>I am here before in the markup.</div>
  </div>

  <div id="another-happy-div">
    <div>Happy Happy day</div>
  </div>
</body>

Первая страница: получить это и добавить его к телу. 

$(function() {
  // note .one not .on here, only one time
  $('body').one('click', '#clicker', function() {
    $(this).hide(); //hide button, one only
    var url = "ajax/test.html"; // contains storage-div
    var dataurl = "somethingurlish";
    $.get(url, function(datahtml) {
      $(datahtml).find('#storage-div').appendTo('body');
      console.log('storage appended');
      $('#storage-div').load(dataurl, function() {
        console.log('storage loaded with data');
      });
    });
  });
});
#storage-div {
  background-color: #ffdddd;
}

#target-div {
  background-color: #ffffdd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<body>
  <button id="clicker">Click Me</button>

  <div id="something">
    <div>whatever works for us, ajax after this at end of body</div>
  </div>
</body>

Вторая страница: Получите это и добавьте к другому div 

$(function() {
  // note .one not .on here, only one time
  $('body').one('click', '#clicker', function() {
    var url = "ajax/test.html"; // contains storage-div
    $(this).hide(); //hide button, one only
    $('#target-div').load(url + " #storage-div", function() {
      console.log('target div loaded with storage-div');
      var dataurl = "somethingurlish";
      $.get(dataurl, function(datahtml) {
        // append to loaded content
        $('#storage-div').append(datahtml);
        console.log('storage appended');
      });
    });
  });
});
#storage-div {
  background-color: #ffdddd;
}

#target-div {
  background-color: #ffffdd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<body>
  <button id="clicker">Click Me</button>
  <div id="target-div">
    <div>A targeting we will go, I get replaced</div>
  </div>
</body>
0 голосов
/ 26 ноября 2018

Переменные JavaScript существуют только во время загрузки одной страницы.Даже если вы сохраните его в div, следующая загрузка страницы не запомнит этого.Если вы хотите хранить переменные JS и использовать их на другой странице, посмотрите на хранилище localStorage.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Которое затем вы можете использовать как: 

$(document).ready(function () {
  // dynamically generate stuff in #storage-div
  $.get(url, function(data) {
    localStorage.setItem('some-var', data);
  })
})

Тогда на второй странице получите его.

localStorage.getItem('some-var');

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...