проблемы с заменой div на div динамически

Question

Я создал html-страницу (шаблон, если хотите), так что я хотел бы сделать так, чтобы вся страница оставалась отдельной и использовать AJAX / jQuery для передачи элементов div другим внешним html-страницам.

Возможно ли это?

Я проверял, и мне еще не удалось найти решение.

Вот фрагмент моего списка навигации ...

<div>
  <ul>
     <li id="n-c"><span class="dir">Cosmo</span>
        <ul id="switcheroo">
            <li class="first"><a href="pg1.html">Special</a></li>
            <li><a href="pg2.html">Mineral</a></li>
            <li><a href="pg3.html">Lateral</a></li>
            <li><a href="pg4.html">Tangent</a></li>
        </ul>
     </li>
  </ul>
</div>

В своем разделе контента я добавил

<div id="contentSwap"></div>

Я пробовал это:

$("ul #switcheroo li a").click(function(event) {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  $.get(href, function(data) {
    $('#contentSwap').html(data);
  });
  event.preventDefault();
  return false;
});

безрезультатно, кто-то может мне помочь?

WDH

---

---

В итоге я использовал простейшую форму для достижения результата.

<script type="text/javascript">

    $(document).ready(function() {
       $("#switcheroo").click(function(event){
           $('#contentSwap2').load('pg2.html');
       }); 
    });

    $(document).ready(function() {
       $("#switcheroo2").click(function(event){
           $('#contentSwap3').load('pg3.html');
       }); 
    });

</script>


                   ... and so on ...

---

И, в конечном итоге, поменяйте местами идентификатор id с уже имеющимся содержимым вместо использования пустого тега.

WDH

Я ценю всю вашу проницательность @ abdullah.abcoder @ShankarSangoli и @John Hartsock

Answer 1

$("ul #switcheroo li a").click(function(event) {
    var $parent = $(this).parent();
    $parent.addClass("selected").siblings().removeClass("selected");
    var href = $(this).attr('href');
    $('#contentSwap').load('' + href + ''); //$('#contentSwap').empty().load(''+ href +''); you may use this for make your `#contantSwap` empty and then append contents to it
    event.preventDefault();
    return false;
});

Надеюсь, это сработает

Answer 2

Когда вы получите html-ответ в обратном вызове get, он будет иметь все теги, начиная с html, head body и т. Д. Либо вам нужно будет убедиться, что вы отправляете только необходимую разметку с сервера, либо проанализировать разметку и получить только разметка, которую вы хотите добавить в contentSwap div.

Другой подход - использовать iframe, установить для источника iframe значение href, при загрузке iframe найти нужный элемент, получить разметку и затем добавить его к contentSwap div.

$("ul #switcheroo li a").click(function(event) {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  var dIf = $("#dummyIframe");

if(dIf.length == 0){
    $(document.body).append('<iframe id="dummyIframe" style="display:none;"></iframe>');
     dIf = $("#dummyIframe").onload(function(){
        var iFrameContent = $("#dummyIframe").contents();
        $('#contentSwap', window.parent.document)
        .html(iFrameContent.find('#someDivIdOrAnyOtherSelector').html());
      });
 }
 dIf[0].src = href;

      event.preventDefault();
      return false;
    });

Answer 3

Предполагая, что ваши данные в формате HTML, вы можете сделать следующее, используя jQuery replaceWith () :

$('#contentSwap').replaceWith(data);

Также вы можете импортировать только часть HTMLданные, выполнив следующие действия:

$('#contentSwap').replaceWith($('#somedivElement', data));