I have a live search page, so the results come up as the user types. The results are meant to come up in a list, and as the site is built with jquery mobile, it should look like this:

Unfortunately, the list items have no jquery mobile style whatsoever and just looks like your garden variety link, as shown below. **The rest of the css works just not the results**
Here is the HTML:
- <div data-role="content">
- <form action="">
- <div data-role="fieldcontain">
- <input name="" id="txt1" placeholder="Search" value="" type="search" onkeyup="showHint(this.value)" />
- </div>
- </form>
- <ul data-role="listview" data-divider-theme="<?php echo $theme;?>" data-inset="true">
- <li data-role="list-divider" role="heading">
- Results:
- </li>
- <span id="txtHint"></span> <!--where the results go-->
- <li data-role="list-divider" role="heading">
- </li>
- </ul>
- </div>
The AJAX script:
- function showHint(str)
- {
- var xmlhttp;
- if (str.length==0)
- {
- document.getElementById("txtHint").innerHTML="";
- return;
- }
- if (window.XMLHttpRequest)
- {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp=new XMLHttpRequest();
- }
- else
- {// code for IE6, IE5
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
- }
- }
- xmlhttp.open("GET","includes/gethint.php?q="+str,true);
- xmlhttp.send();
- }
The gethint.php file:
- <?php
-
- session_start();
-
- $theme = $_SESSION['theme'];
- include 'db.php';
-
- $q=$_GET["q"];
-
- try {
- $sql = "SELECT id, fname, surname FROM user WHERE id != " .$_SESSION['id'] . " AND (fname LIKE '%" . $q . "%' OR surname LIKE '%" . $q . "%')";
- $s = $pdo->prepare($sql);
- $s->execute();
- }
- catch (PDOException $e){
-
- }
-
- foreach($s as $s){
- echo '<li data-theme="' . $theme . '"><a href="profile.php?id=' . $s['id'] . '" data-transition="slide">' . $s['fname'] . ' ' . $s['surname'] . '</a></li>';
- }
-
- ?>
Loading in Jquery css and JS
- <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
-
- <!-- Extra Codiqa features -->
- <link rel="stylesheet" href="includes/custom.css">
-
- <!-- jQuery and jQuery Mobile -->
- <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
- <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
-
- <!-- Extra Codiqa features -->
- <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
*I allow the user to change the theme of the site, hence the session variable. Having the theme for the listitem set instead of variable make no difference.
The txtHint id has no styling attached to it
I have tried changing the span to a div but it didn't make a difference.
Now one suggestion was the remove the entire listview from the HTML and put it in the php file. Fair enough. So the php file now shows this:
- ...
- catch (PDOException $e){
-
- }
- echo '<ul data-role="listview" data-divider-theme="<?php echo $theme;?>" data-inset="true" id="results"><li data-role="list-divider" role="heading">Results:</li>';
- foreach($s as $s){
- echo '<li data-theme="' . $theme . '"><a href="profile.php?id=' . $s['id'] . '" data-transition="slide">' . $s['fname'] . ' ' . $s['surname'] . '</a></li>';
- }
- echo '<li data-role="list-divider" role="heading"></li></ul>';
But that gives no styling at all for the listview. Someone else said I need to incorporate
- $('#results').listview('refresh');
into the code, but I don't know where, and everywhere I've tried has failed.
Please forgive me for my lack of skill with jquery and js in general, I'm really new to it.
There is a difference between marking a post for moderation and marking a post for spam.