how to update a <div> when database have changed, with php and mysql??

Discussion in 'PHP' started by mmjanjust, Jun 3, 2014.

0
  1. #1
    I can pull this information from my MySQL table and display what I need to, but I would like some help on how to refresh this data every 5 seconds or so with the current code that I have.

    There isn't much data to show, just like 5 or 8 markers at any given time. I have included my current code that I use to pull the data. I am sort of OK with PHP/MySQL but very new to Google Maps.

    i try to add the code as to refresh the google map

    setInterval(function() {
    $.ajax({ url: '/localhost/my/site.php',
    data: {action: 'test'},
    type: 'post',
    success: function(output) {
    alert('hi');
    // change the DOM with your new output info
    }
    });
    }, 5000);

    but still can't. What's wrong with my code?
    Is it possible to get new data from mysql when mysql database updated?




    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? sensor=true" /></script>

    <script type='text/javascript'>
    //This javascript will load when the page loads.
    jQuery(document).ready(function ($) {
    setInterval(function () {
    $.ajax({
    url: '/localhost/my/site.php',
    data: {
    action: 'test'
    },
    type: 'post',
    success: function (output) {
    alert('hi');
    // change the DOM with your new output info
    }
    });
    }, 5000);

    //Initialize the Google Maps
    var geocoder;
    var map; {
    if (infos.length > 0) {
    infos[0].set("marker", null);
    infos[0].close();
    infos.length = 0;
    }
    var markersArray = [];
    var infos = [];

    geocoder = new google.maps.Geocoder();
    var myOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    //Load the Map into the map_canvas div
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //Initialize a variable that the auto-size the map to whatever you are plotting
    var bounds = new google.maps.LatLngBounds();

    //Initialize the encoded string
    var encodedString;

    //Initialize the array that will hold the contents of the split string
    var stringArray = [];

    //Get the value of the encoded string from the hidden input
    encodedString = document.getElementById("encodedString").value;

    //Split the encoded string into an array the separates each location
    stringArray = encodedString.split("****");

    var x;
    for (x = 0; x < stringArray.length; x = x + 1) {
    var addressDetails = [];
    var marker;
    //Separate each field
    addressDetails = stringArray[x].split("&&&");
    //Load the lat, long data
    var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
    var image = new google.maps.MarkerImage(addressDetails[3]);

    //Create a new marker and info window
    var marker = new google.maps.Marker({
    map: map,
    icon: image,
    position: lat,
    content: addressDetails[0]
    });

    //Pushing the markers into an array so that it's easier to manage them
    markersArray.push(marker);
    google.maps.event.addListener(marker, 'click', function () {
    closeInfos();
    var info = new google.maps.InfoWindow({
    content: this.content
    });
    //On click the map will load the info window
    info.open(map, this);
    infos[0] = info;
    });

    //Extends the boundaries of the map to include this new location
    bounds.extend(lat);
    }
    //Takes all the lat, longs in the bounds variable and autosizes the map
    map.fitBounds(bounds);

    //Manages the info windows
    function closeInfos() {
    if (infos.length > 0) {
    infos[0].set("marker", null);
    infos[0].close();
    infos.length = 0;
    }
    }

    });
    </script>

    </head>

    <body>
    <div id='input'>

    <?php //Initialize your first couple variables $encodedString="" ; //This is the string that will hold all your location data $x=0 ; //This is a trigger to keep the string tidy //Now we do a simple query to the database // DB INFO CONNECTION IS HERE AND WORKS $result=m ysql_query( "SELECT * FROM `ulocation` WHERE `ul_lat`!='' AND `ul_long`!=''
    AND `ul_onduty`='1'",$db1); //Multiple rows are returned while ($row=m ysql_fetch_array($result, MYSQL_NUM)) { //This is to keep an empty first or last line from forming, when the string is split if ( $x==0 ) { $separator="" ; } else { //Each row in the database is separated in the string by four * 's
    $separator = "****";
    }
    $status='0 ';
    $cadd = sql::getval('cal_address ', 'call ', "WHERE `cal_id`='$row[14] '");
    $num = sql::getval('cal_num ', 'call ', "WHERE `cal_id`='$row[14] '");
    $pcond = sql::getval('cal_pcond ', 'call ', "WHERE `cal_id`='$row[14] '");
    $list="$num $cadd";
    //Saving to the String, each variable is separated by three &'s $encodedString=$ encodedString.$separator. "<table border=0 width='350' height='20'
    class='maincolm' cellpadding=0 cellspacing=0><td align=left valign=top><h2></h2></td>
    <tr><td width=100%><font size=3 face=arial><p><b>".$row[2]. "</b>". "<br>Address: $list". "<br>Call Type: $pcond". "<br><br>Lat: ".$row[5]. "<br>Long: ".$row[6]. "</td></table>". "</p>&&&".$row[5]. "&&&".$row[6]. "&&&".$row[8]. "&&&".$row[14]; $x=$ x + 1; } ?>
    <input type="hidden" id="encodedString" name="encodedString" value="<?php echo
    $encodedString; ?>" />
    <? echo "<body oncontextmenu=\"return false\ " style=\"overflow: hidden; \ "
    topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>"; <div id=\ "map_canvas\">
    </div>
    </body>

    </html>"; ?>

    any help will be appreciated
     
    mmjanjust, Jun 3, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    First, learn to use the forum. In the input box, you'll see a button named "insert" - when you click on it, you can wrap your code in code-tags, which will make our life easier. Now go edit your post.
    You're also in the wrong forum. This has nothing to do with php and mysql, but with ajax/javascript. The correct forum would be the javascript forum, subsequently the jquery subforum, if you're using jquery.
     
    PoPSiCLe, Jun 4, 2014 IP