CODEWITHSUNDEEP
phpmysqlajax
Michael Rodwell
Michael Rodwell

Reputation: 21

Ajax, PHP/MySQL search request keeps crashing

I have built a mobile application for Android using Phonegap, the data is stored within a MySQL table and the data is fetched via ajax request, this works fine however, when trying to create a search query to filter the data literally after typing 2 letters my application is crashing? - Any idea?

<!-- Remote call to Server -->
    <script type="text/javascript">
         // Call the server for content
         $.ajax({
              url: 'https://www.ppl-support.co.uk/ratchetserver/getdata',  // URL -> load the data
              crossDomain: true,
              success: function(data){
                  $(".list").html(data).show();
              }
          }); 
          $(function(){
            $(".search").keyup(function() 
            { 
                var searchid = $(this).val();
                var dataString = 'search='+ searchid;
                if(searchid!='') {
                  $.ajax({
                    type: "POST",
                    url: "https://www.ppl-support.co.uk/ratchetserver/newgetdata.php",
                    data: dataString, 
                    cache: false,
                    success: function(data) {
                      $(".list").html(data);
                      }
                  });
                }else{
                  $.ajax({
                    url: 'https://www.ppl-support.co.uk/ratchetserver/getdata.php',  //load data 
                    success: function(data){
                      $(".list").html(data);
                    }
                    });
                }
                return true;    
            });
        }); 

         function Reload(){
            location.reload(); // Reload the page onclick 
         }
         //  Send user to Home Screen
         function Home(){
            location.assign('index.html');
         }
    </script>
</head>

<body class="is-ump"><br><br>
  <div id="users">
  <!-- Load abbreviations markup -->
      <ul class="table-view" style="padding-left:0px;" id="theList">
          <ul class="list"  style="padding-left:0px;">
              <li class="table-view-cell media" >
                  <a class="navigate-right">
                      <img class="media-object pull-left" src="img/P1.png" style="width:50px;" alt="" >
                      <div class="media-body">
                          <h4 align="center">
                            Downloading contents, please wait...
                          </h4>
                      </div>
                  </a>
              </li>
          </ul>
      </ul> 

    <!-- Search functionality --->
    <div class="ump">
        <div class="ump-widget-container">
            <div class="ump-widget ump-search-widget ump-hidden" id="ump-search-widget">
                <form action="#" method="POST">
                  <input class="search" style="font-family:exo;" value="" placeholder="Search Abbreviations.." /><!--
                  <button class="ump-button" style="color:white;background:#ffda00;font-family:exo;font-shadow:white;">Search</button> -->
                </form>
            </div>
            <div class="ump-clear"></div>
        </div>
        <!-- navigational panel -->
        <div class="ump-bar">
          <div class="ump-clear">
              <a href="#" class="ump-brand" title="UMP - Ultra Menu Pro">Pocket Pilot</a>
              <div class="ump-icons">
                  <a href="#"><i class="fa fa-envelope"></i></a>
                  <a href="#" class="ump-widget-toggle" data-target="#ump-search-widget"><i class="fa fa-search"></i></a>
                  <div class="ump-clear"></div>
              </div>
          </div>
          <div class="ump-overlay"></div>
        </div>
        <nav>
            <div class="ump-nav-container">
                <div class="ump-header">
                    <img src="img/1.png" alt="" class="ump-header-background-image">
                    <a href="#" title="UMP - Ultra Menu Pro">
                        <img src="img/logo.png" alt="">
                    </a>
                </div>
                <div class="ump-nav">
                    <ul class="ump-default">
                        <li>
                            <a><h4 onclick="Home()">Home</h4></a>
                        </li>
                        <li>
                            <a><h4>About</h4></a>
                        </li>
                    </ul>
                    <ul class="ump-social">
                        <li>
                            <a href="#" class="ump-facebook"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-google-plus"><i class="fa fa-google-plus"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-twitter"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-pinterest"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-youtube"><i class="fa fa-youtube-play"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <a class="ump-toggle">
                <i class="fa fa-times ump-close"></i>
                <i class="fa fa-bars ump-open"></i>
            </a>
        </nav>
    </div>
 </div>   
</body>

And this is my PHP file (Search)

<?php
header('Access-Control-Allow-Origin: *');
  header("Access-Control-Allow-Methods: POST, GET, OPTIONS");   
    $str = '';
    if($_POST['search'] && $_POST['search'] != "") {
        $q = $_POST['search'];
        include_once('dbconnection.php');
        $sql = "SELECT * FROM `co_abbreviation` WHERE `acronym` LIKE = '%$q%'";
        $result = mysql_query($sql);
        while($row = mysql_fetch_array($result)) {
          $str .= "<div class='card' style='border-radius:0px;'>
                  <ul class='table-view'>
                    <ul class='list' style='padding-left:0px;'>
                        <li class='table-view-cell media'>
                            <a class='navigate-right'>
                                <div class='media-body'>
                                    <h3 class='name'>
                                        <b>
                                            ".$row['acronym']."
                                        </b>
                                    </h3>
                                    <h4 class='born' style='color:#1e404e;'>
                                        <i>
                                            ".$row['meaning']."
                                        </i>
                                    </h4>
                                    <p class='mean' align='left'>
                                   CAA Source:   ".$row['source']."
                                    </p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </ul>
            </div>";    
          }
      }
  echo $str;
?>

App screen

Upvotes: 0

Views: 74

Answers (1)

Furkan Ayta&#231;
Furkan Ayta&#231;

Reputation: 73

You may just return the array in a formatted form(ex. in json format) and return it. When you create the HTML code in server and send it to client, then create the HTML code in JS function in client. Sending HTML code takes a lot bigger time than sending the result array( as you said there is approximately 1k data) .Moreover it will creates more data traffic also.

Upvotes: 1

Related Questions