+ Start a Discussion
SaintMichaelSaintMichael 

JQuery Mobile is not filtering my list

JQuery mobile is not filtering my list. The list change with the select box works.
I cannot get the text filter to work.

The same code works elsewhere, but not on this project.

I tried updated the libraries to no avail.

Here is the Visualforce page:

<apex:page controller="OnlineStoreOrderController" showHeader="false"
sidebar="false">
<head>

<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<apex:includeScript value="{!$Resource.jquery191}" />
<apex:includeScript value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.css')}" />


<script>

        $(document).ready(function() {

             $("#conference").on("change", function(){
                //$.mobile.showPageLoadingMsg();
               OnlineStoreOrderController.getSessions(this.value,handleGetSessions)
              //$.mobile.hidePageLoadingMsg();
              });

        });

  function handleGetSessions(result, event) {
      $("#sessionList").empty();
      $.each(result, function(index, value){
         $('#sessionList').
         append('<li data-filtertext="value.Name value.Session_Name__c" data-role=\"list-divider\">'+value.Name+' - ' + value.Session_Name__c+'</li>');

    });
    $("#sessionList").listview("refresh");
}

</script>
</head>
<select name="conference" id="conference">
  <option value="All">select a conference</option>
  <apex:repeat value="{!conferences}" var="conference">
   <option value="{!conference.Id}">{!conference.Name}</option>
  </apex:repeat>
</select>

<!-- page content -->
<div id="#content" data-role="content">
<ul id="sessionList" data-role="listview" data-filter="true"
  data-inset="true">
  <apex:repeat value="{!sessions}" var="session">
   <li data-theme="d"
    data-filtertext="{!session.Name} {!session.Session_Name__c}">
   {!session.Name} - {!session.Session_Name__c}</li>

  </apex:repeat>
</ul>
</div>
</apex:page>
Adnubis LLCAdnubis LLC
My first thought while looking at your code is that you need to clear the conflict with JQuery. Salesforce uses $ to represent Global Variables. Using a statement like this $j = jQuery.noConflict(); will help. This document will help walk you through it if you need more. 


http://developer.force.com/cookbook/recipe/using-jquery-in-a-visualforce-page

SaintMichaelSaintMichael
I added the no conflict. the next thing was to clear up the <i>. I was overdoing with the attributes for filtering.
I guess the no conflict helped?

Thank you.

Here is the result:

<apex:page controller="OnlineStoreOrderController" showHeader="false"
    sidebar="false">
    <head>

    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <apex:includeScript value="{!$Resource.jquery191}" />
    <apex:includeScript value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.js')}" />
    <apex:stylesheet value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.css')}" />


    <script>
$.noConflict();
  jQuery(document).ready(function($) {
     $("#conference").on("change", function(){
               OnlineStoreOrderController.getSessions(this.value,handleGetSessions)
              });
             
             
      function handleGetSessions(result, event) {
            $("#sessionList").empty();
            $.each(result, function(index, value){
            $('#sessionList').
            //append('<li data-filtertext="value.Name value.Session_Name__c" data-role=\"list-divider\">'+value.Name+' - ' + value.Session_Name__c+'</li>');
            append('<li>'+value.Name+' - ' + value.Session_Name__c+'</li>');

    });
    $("#sessionList").listview("refresh");
}       
  });
 
 
 
 
 
      
</script>
    </head>
    <select name="conference" id="conference">
        <option value="All">select a conference</option>
        <apex:repeat value="{!conferences}" var="conference">
            <option value="{!conference.Id}">{!conference.Name}</option>
        </apex:repeat>
    </select>

    <!-- page content -->
    <div id="#content" data-role="content">
    <ul id="sessionList" data-role="listview" data-filter="true"
        data-inset="true">
        <apex:repeat value="{!sessions}" var="session">
            <li data-theme="d"
                data-filtertext="{!session.Name}">
            {!session.Name} - {!session.Session_Name__c}</li>

        </apex:repeat>
    </ul>
    </div>
</apex:page>
Adnubis LLCAdnubis LLC
Is it working now?
SaintMichaelSaintMichael
Yes, it is working now.