Search jQuery

jQuery Forum

CSS Not Working On SQL/PHP/AJAX Generated List

in jQuery Mobile • 7 years ago

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>
<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">
<link rel="stylesheet" href="includes/custom.css">
<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>
<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.

Response title

Attachments

jQuery Forum

CSS Not Working On SQL/PHP/AJAX Generated List

Statistics

Tags

Actions