CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Robert Dickey
Robert Dickey

Reputation: 834

Issue with Ajax refreshing entire page

I have a page using JqueryUI-Mobile (listview more specifically) along with PHP with some Ajax code.

The page loads a list generated from a MySQL DB, and then I'd like that list to refresh itself, without refreshing the page (for a better user experience).

Currently, I am able to get the data to refresh using .load, but I have a weird side effect.

On page load, it renders correctly. I'm guessing due to the fact that it loads the proper way first. However, once the ajax .load call comes in. it loads the entire page inside of the div, instead of just the content inside of the div. Can anyone see what I am doing wrong? Or recommend the proper way to do this if I am not just not doing it correctly?

Here is my code.

<?php
session_start();
if(isset($_SESSION['username']))
{

}
else
{
$_SESSION['error']="You are logged in.";
header('Location: index.php');
    exit;
}

?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

 <script>

function myFunction(){
    $(".ui-content").load("thispage.php");
}
$(document).ready(function() {
    setInterval(myFunction, 1000);
});
</script>
<style>
.split-custom-wrapper {
    /* position wrapper on the right of the listitem */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.split-custom-button {
    position: relative;
    float: right;   /* allow multiple links stacked on the right */
    height: 80%;
    margin:10px;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    moz-border-radius: 0;
    webkit-border-radius: 0;
    border-radius: 0;
    moz-box-shadow: none;
    webkit-box-shadow: none;
    box-shadow: none;
}

.split-custom-button span.ui-btn-inner {
    /* position icons in center of listitem*/
    position: relative;
    margin-top:50%;
    margin-left:50%;
    /* compensation for icon dimensions */
    top:11px; 
    left:-12px;
    height:40%; /* stay within boundaries of list item */
}
.ui-icon-delete:after{
    background-color: #B22222 !important;

background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

.ui-icon-home:after{
    background-color: #A2CD5A !important;

}
.ui-icon-search:after{
    background-color: #3D59AB !important;

}

li{
 border: none !important;
}
</style>
</header>
  </head><img src="images/kidlinklogo.png" style="width:30%;height:30%;;" alt="" class="logo" /><center>  <h2 style="">WALKER DISMISSAL
  <br><br>
     </h2></center>
<a href="home.php" class="ui-btn ui-icon-home ui-btn-icon-left" data-ajax='false'>HOME</font></a>
<a href="WalkerOther.php" class="ui-btn ui-icon-search ui-btn-icon-left" data-ajax='false'> LIST</a>
<br><br><br>
<div id="dovo">

</div> 
  <div data-role="main" class="ui-content"style="margin-top:-75px;">

    <h2 style=""></h2>
    <ul data-role="listview">

<?php 
include "../../includes/databaseconnections/demo/database_connection.php";
///////////////////////////////////////////////////////////////////////////////////////////////
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
else{}
$query = "SELECT * FROM s WHERE currentZone = '2' and status != '4' ORDER BY lastName ASC LIMIT 100";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {

        if ($row[leftGym] == "1") { $flash = "style='color:#B22222;font-size:140%'";} else {$flash ="";}
            $row['firstName'] = strtoupper($row['firstName']);
        $row['lastName'] = strtoupper($row['lastName']);
            echo "<li><a href='PupSelect.php?sid=${row['ID']}' $flash  style='font-size:140%;' width='25px' data-ajax='false'>&nbsp;  &nbsp;  {$row["lastName"]}, {$row["firstName"]}</a><div class='split-custom-wrapper'>

            <a href='Data.php?sID={$row['ID']}&lane=1{$ID}'  data-role='button' class='split-custom-button' data-icon='delete' data-rel='dialog' data-theme='c'  data-ajax='false' data-iconpos='notext'></a>           
        </li>";
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);

 /////////////////////////////////////////////////////////////////////////////////
?>
</div></div>


  </body>

</html>

Upvotes: 0

Views: 45

Answers (1)

Robert Dickey
Robert Dickey

Reputation: 834

I overlooked a key requirement of .load. I was not specifying what content on the page I was loading, so it was loading the entire page.

function myFunction(){
    $(".ui-content").load("thispage.php");

was changed to

function myFunction(){
    $(".ui-content").load("thispage.php .ui-content");

this resolved the issue.

Upvotes: 1

Related Questions