0

I have the following function in Javascript.

function showInfo(str)
{
if (str=="")
{
    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","information.php?q="+str,true);
xmlhttp.send();
}

I have created a select so that once something is chosen it will display a list.

<ul>
        <li><select name="days" id="days" onchange="showInfo(this.value)" data-native-menu="false">
            <option value="">  select   </option>
            <option value="1"> option 1 </option>
            <option value="2"> option 2 </option>
        </select></li>
</ul>

The information.php takes the value and querys a database to get the infor I want in a list. This all works fine, however when I want to show the list it comes out with the incorrect format.

echo '
<ul data-role="listview">
<li>
    <h3>Author:'.$the_author.'</h3>
    <p><b>Description:</b>'.$description.'</p>
    <p class="ui-li-aside">Last update:'.$date.'</p>
</li>
    //Etc.
</ul>
';

Now the list displayed should be simillar to the one from jquery mobile demos (http://demos.jquerymobile.com/1.0.1/docs/lists/lists-formatting.html)

however it comes out looking like a standard html list.

1 Answer 1

0

Because you are dynamically creating the <UL> element and not just the listitems, you need to call enhanceWithin() (http://api.jquerymobile.com/enhanceWithin/) on txtHint after setting its HTML

Instead of this:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}

Try

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        $('#txtHint').append(xmlhttp.responseText).enhanceWithin();
    }
}

Here is a working DEMO with a mock AJAX call

10
  • Where should that be added exactly.
    – donlonc
    Feb 27, 2014 at 17:28
  • I can't figure out if it goes in the javascript, or in my php code. I am just getting to grips with this at the minute. Sorry that it is so basic a question
    – donlonc
    Feb 27, 2014 at 18:49
  • It is a JavaScript statement that has to run after the listview items have been added. If I understand your code... after the line document.getElementById("txtHint").innerHTML=xmlhttp.responseText; in the onreadystatechange (isn't that where you are adding the items?)
    – ezanker
    Feb 27, 2014 at 19:00
  • yes, however it isn't formating the list. I have added an id to my list in the php file (echo "<ul data-role='listview' data-inset='true' id='infolist'>";) and have added the line $(#infolist").listview("refresh"); in the javascript
    – donlonc
    Feb 27, 2014 at 19:13
  • $("#infolist").listview("refresh"); should be correct (i assume missing quote before the # was a typo). You could try adding a setTimeout to delay it and see if it is a timing issue... I don't really know how your project is setup, so it is hard to say what the problem is.
    – ezanker
    Feb 27, 2014 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.