You need to sign in to do that
Don't have an account?
SaintMichael
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>
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>
http://developer.force.com/cookbook/recipe/using-jquery-in-a-visualforce-page
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>