fill html marquee from sql db using jquery -

fill html marquee from sql db using jquery -

i have few wordpress pages contain scrolling html marquee. when page loaded, ajax phone call used fetch content sql db, fills marquee. works, when navigate page, marquee reaches top, starts over. if refresh page, works expected. it's when page first navigated issue happens.

any advice? it's marquee starts before content retrieved, , inserted tag??

wordpress html:

<script type='text/javascript' src='/scripts/dialog/js/jquery-ui-1.8.18.custom.min.js'> </script> <script type='text/javascript' src='/scripts/dialog/js/jquery-1.7.1.min.js'></script> <script type='text/javascript' src='/scripts/dialog/popupdialog.js'></script> <div id="emptymarquee" class="emptymarquee-tall"></div> <marquee class="marquee-tall" name="compliance" direction="up" behavior="scroll" scrollamount="3"> <center> </center> </marquee>

popupdialog.js

$(function(){ //hide empty marquee , marquee wrapper $("#emptymarquee").hide(); $("#marquee").hide(); //get projects server var servicearea = $("#marquee").attr("name"); var query = "servicearea=" + servicearea; $.ajax({ type: "get", url: "/scripts/dialog/getmarqueedata.php", data: query, datatype: "json", success: function(returndata){ if (!(returndata.aadata[0] == "none")){//atleast 1 project returned db $("#emptymarquee").hide(); //create marquee element $("#marquee").html("<marquee class='marquee-tall' direction='up' behavior='scroll' scrollamount='3'><center></center></marquee>"); var projarr = []; (var = 0; < returndata.aadata.length; i++) { //returndata.aadata[i][0] - name //returndata.aadata[i][1] - description projarr.push("<strong>" + returndata.aadata[i][0] + "</strong> - " + returndata.aadata[i][1] + "</br></br>"); }; $.each(projarr,function(index, value){ $("marquee center").append(value); }) $("#marquee").show(); } else{//no projects returned db, show emptymarquee div, fill msg $("#marquee").hide(); $("#emptymarquee").html("please check updated " + servicearea + " projects."); $("#emptymarquee").show(); } } }) });

probably getting problem because marquee start running before ajax completed , info added when marque on top. on refresh working because ajax request cached.

instead of having marquee before, add together on success of ajax call. have div add together marque say

on success of ajax call

$('#marquewrap').html('<marquee class="marquee-tall" name="compliance" direction="up" behavior="scroll" scrollamount="3"><center>'+ /*your content*/ +'</center></marquee>');

jquery