CODEWITHSUNDEEP
javascriptphphtmliframe
Daniël Cronk
Daniël Cronk

Reputation: 65

OnClick Javascript Scroll to iframe location within PHP repeating results

I have a PHP page (index_stats_2.php) that displays the results of the last 5 records from the database with a view button associated which, when clicked, will display the results in an iframe in a "map" section on the index.php page that is loaded initially. I have added a javascript script that will scroll the user up to the map iframe on the index.php page, however, it will only work one time. If you scroll back down and click on a different option, it will not scroll up to the top. It still loads the results, but now the user would have to manually scroll to the top.

How would I change this so that it would work for each of the 5 buttons?

javascript code on index.php:

<script>
$(document).ready(function (){
            $("#click_recent").click(function (){
                //$(this).animate(function(){
                    $('html, body').animate({
                        scrollTop: $("#indexmap").offset().top
                    }, 2000);
                //});
            });
        });
</script>

iframe code on index.php

<div class="indexmap">
    <iframe id="indexmap" name="indexmap" class="indexmap" src="http://globe-trekking.com/vg/en/maps/map.php" frameborder="0" scrolling="no"></iframe>
</div>

relevant button code on index_stats_2.php 

echo "     <td width='10%'><input id='click_recent' class='btn-sm btn-primary' type='button' value='View' onclick='indexmap.location.href=\"http://globe-trekking.com/vg/en/vluchtinfo/vbijreizen/vbijreizen_kaart.php?id=" . $gID . "\"'></td>";

entire php script on index_stats_2.php

<?php

$mysqli = mysqli_connect('xxxx', 'xxxx', 'xxxx', 'xxxx');

if (mysqli_connect_errno($mysqli)) {
    trigger_error('Database connection failed: '  . mysqli_connect_error(), E_USER_ERROR);
}

$query = "  SELECT *
            FROM tbl_reizen  r 

            INNER JOIN tbl_vluchtgegevens vg
            ON r.reizenID = vg.reisID

            GROUP BY reizen
            ORDER BY departuredate DESC
            LIMIT 5;";

$result = mysqli_query($mysqli, $query) or trigger_error("Query Failed! SQL: 
$query - Error: ". mysqli_error($mysqli), E_USER_ERROR);

if($result) {
echo"  <table class='table table-hover table-striped' width='100%'>";
echo "  <tbody>";

while($row = mysqli_fetch_assoc($result)) {
$gID = $row['reizenID'];

echo "   <tr>";
echo "     <td width='10%'><input id='click_recent' class='btn-sm btn-primary' type='button' value='View' onclick='indexmap.location.href=\"http://globe-trekking.com/vg/en/vluchtinfo/vbijreizen/vbijreizen_kaart.php?id=" . $gID . "\"'></td>";
echo "     <td width='60%' ><h6>&nbsp; &nbsp;".$row['reizen']."</h6></td>";
echo "    </tr>";

}
echo "  </tbody>";
echo "</table>";
        }

mysqli_close($mysqli);

?>

Upvotes: 0

Views: 41

Answers (1)

Ernani Azevedo
Ernani Azevedo

Reputation: 461

You're binding an event to element id #click_recent, but you're recreating it on browser DOM, loosing the previously bind. It will keep refreshing because it's a form button.

To fix this, change your javascript code to this:

<script>
$(document).ready ( function ()
{
  $('document').on ( 'click', '#click_recent', function ()
  {
    $('html, body').animate ( { scrollTop: $('#indexmap').offset ().top }, 2000);
  });
});
</script>

Now, you'll bind an event to document element, with a filter that descendants of the selected elements that trigger the event, so, you'll not lost your bind if you recreate the element.

Upvotes: 0

Related Questions