update div with scrolling text via ajax

Question

I have a div that contains text that I am using jquery to scroll horizontally across the page. The content of the scrolling text div is pulled from a mysql database and updated every 2 minutes via ajax.

My issue is after the first time ajax updates the div the content just keeps loading against the left margin of the page and just bounces off the left side of the page. You can see a demo of the issue via the below url (look at the bottom black bar on the page): https://rb.gy/z7nbne

Below is my code:

index.php

    <div class="marquee" id="marquee">
      <img src="images/LIVETab.svg" alt="Live Donation Stream Tab" class="livetabimg">
      <div class="marqueecontent">
        <ul id="marqueeitems">
        
        </ul>
      </div>
    </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
<script>
    $('.marqueecontent').marquee({
        //speed in milliseconds of the marquee
        duration: 1000,
        //gap in pixels between the tickers
        gap: 0,
        //time in milliseconds before the marquee will start animating
        delayBeforeStart: 0,
        //'left' or 'right'
        direction: 'left',
        //true or false - should the marquee be duplicated to show an effect of continues flow
        duplicated: true
    });

    $(document).ready(function(){
      setInterval(function(){
        $('.marqueecontent').marquee('destroy')
        $("#marqueeitems").load('donationstream.php')
      }, 2000);
      $('.marqueecontent').marquee()
    });
</script>

donationstream.php

$con = mysqli_connect("localhost","mydbaseuser","123456","dbasename");
// Check connection
if (mysqli_connect_errno()) 
{
   echo "Failed to connect to MySQL: " . mysqli_connect_error();
   exit();
}

$sql = mysqli_query($con, "SELECT dlevel, donername FROM livedonationticker ORDER BY rowid DESC");
while($drow = mysqli_fetch_array($sql))
{
   extract($drow);
   $donername = stripslashes("$donername");
   $dlevel = stripslashes("$dlevel");
   echo " <li><strong>$dlevel</strong> &#8226; <i>$donername</i></li>";
}

Answer 1

There are multiple issues with your code. Let me summarize:

1. You want to update data every 2 minutes, but you code is currently updating every 2 seconds. Interval for 2 minutes is 120000.
2. You are destroying marquee inside interval event handler but adding back out side of it, that will not work
3. When reconfiguring marquee, you are not setting options back, which means new marquee will use default options

Take a look at working demo, for your production code remove and uncomment lines I have commented:

const marqueeOptions = {
  //speed in milliseconds of the marquee
  duration: 5000,
  //gap in pixels between the tickers
  gap: 0,
  //time in milliseconds before the marquee will start animating
  delayBeforeStart: 0,
  //'left' or 'right'
  direction: 'left',
  //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: true
};

function loadMarquee() {
  $("#marqueeitems").load('http://molloycollegegala.com/donationstream.php', {}, function() {
    $('.marqueecontent').marquee(marqueeOptions);
  });
}

$(document).ready(function() {
  loadMarquee();
  setInterval(function() {
    console.log("Updating...");
    $('.marqueecontent').marquee('destroy');
    loadMarquee();
  }, 120000);
});

.marquee {
  width: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

ul li {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

<div class="marquee" id="marquee">
  <div class="marqueecontent">
    <ul id="marqueeitems"></ul>
  </div>
</div>