Div dissapears after I add script

user_6108371 0
Viewed 44

I have been trying to create an auto refreshing clock on my page but after adding script to my file the div around the clock dissapears so it doesn't use the CSS I have added to the div. <div class="clock_item"> is the one that disapears.

If I close div.clock_item before div.clocktwo then it doesn't dissapear but I want div.clocktwo to stay inside div.clock_item.

Thanks for the help!

function loadlink() {
  $('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php', function() {
    $(this).unwrap();
  });
}

loadlink();
setInterval(function() {
  loadlink()
}, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clock_item">


  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
  <path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
  <path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
  <path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
  <path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg> <!--// MEL LETTERS -->

  <h3>
    MELBOURNE
  </h3>
  
  <div class="clocktwo">

  </div>
</div>

html php ajax javascript
2 Answers

i think this can solve don't write script in div tag

    <div class="clock_item">


<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
<path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
<path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
<path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
<path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg>   // MEL LETTERS


      <h3>
    MELBOURNE
</h3>



    <div class="clocktwo">

</div>
  </div>
<script>
   function loadlink(){
    $('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
         $(this).unwrap();
    });
}

loadlink(); 
setInterval(function(){
    loadlink() 
}, 5000);
    </script>
user_148933080

In your code you have use $(this).unwrap() so unwrap removes parent element from selected element that's the reason your outer element gets removed because your selector is inner div i.e : clocktwo and outer is clock_item . Instead use wrap method it will wrap html structure around each element in the set of matched elements . i.e :

 $('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
   $(this).wrap();
 });
user_106064000
Related