+ Start a Discussion
maiyakumaiyaku 

Page is not show list data in html 5

I'm fairly new to using html 5 Please advise.

 

The first query is object Account it work. but secord query is object Opportunity is not work, page is not show list opportunity.

I think it would be wrong to this Static Resources. this code all 

 

Interface

 

Customer Visit is work and Order View not show list when cilck.

 

 

When click Order View

 

this code

 

global with sharing class AccountController {

information

    @RemoteAction
    global static List<Account> queryAlbums() {
       return [SELECT Id,Name,Customer_Number__c,Business__c,Pay_Type__c,Term__c,Phone,Website, Street__c, State_Province__c, Zip_Postal_Code__c, Country__c, City__c
       FROM Account Where Customer_Number__c != null LIMIT 5];
    }
    
    @RemoteAction
    global static List<Opportunity> queryOpp() {
       return [SELECT Id,Name, OrderNumber__c, Amount,StageName, MainCompetitors__c,Probability,AccountID,TrackingNumber__c,CurrentGenerators__c 
       FROM Opportunity];
    }
}

 and static Resources

 

var currentAlbums = new Array();
var currentOpp = new Array();

var $j = jQuery.noConflict(); 
    
$j(document).ready(function() {
    if(window.location.href.indexOf('#') > 0) {
            window.location.href = window.location.href.split("#")[0];
        }
    addPageListeners();
    
    getAlbums(function(){
                $j.mobile.hidePageLoadingMsg();
            
    });
    

});


function addPageListeners() {
    $j('#addalbum').live('pagebeforeshow', function () { 
                    $j("#albumNameTxt").val('');
                });

    $j('#addOpportunity').live('pagebeforeshow', function () { 
                    $j("#OppNameTxt").val('');
                });

    
    $j('#addtrack').live('pagebeforeshow', function () { 
                    $j("#trackNameTxt").val('');
                    $j("#trackPriceTxt").val(0.00);
                });
}


function getAlbums(callback) {
    $j('#albumlist').empty();
    AccountController.queryAlbums(function(records, e) { showAlbums(records, callback) }, {escape:true}); 
}

function showAlbums(records, callback) {
    currentAlbums.length = 0;
    for(var i = 0; i < records.length; i++) { currentAlbums[records[i].Id] = records[i]; }
    var x = 0;
    $j.each(records,
        function() {
        $j('<li></li>')
        .attr('id',this.Id)
        .hide()
	.append('<h2>' + this.Name + '</h2>')
        .click(function(e) {
            e.preventDefault();
            $j.mobile.showPageLoadingMsg();
            
	    $j('#AlbumName').html(currentAlbums[this.id].Name);
	    $j('#AlbumNumber').html(currentAlbums[this.id].Customer_Number__c);
            $j('#AccountBusiness').html(currentAlbums[this.id].Business__c);
	    $j('#AccountPayType').html(currentAlbums[this.id].Pay_Type__c);
	    $j('#AccountTerm').html(currentAlbums[this.id].Term__c);
	    $j('#AccountPhone').html(currentAlbums[this.id].Phone);
	    $j('#AccountWebsite').html(currentAlbums[this.id].Website);
	    $j('#AccountStreet').html(currentAlbums[this.id].Street__c);
	    $j('#AccountSP').html(currentAlbums[this.id].State_Province__c);
	    $j('#AccountZP').html(currentAlbums[this.id].Zip_Postal_Code__c);
	    $j('#AccountCountry').html(currentAlbums[this.id].Country__c);
	    $j('#AccountCity').html(currentAlbums[this.id].City__c);
       
            })

        .appendTo('#albumlist')
        .show();
         x++;
        });
    
    $j('#albumlist').listview('refresh');
    if(callback != null) { callback(); }
}

//this start not work 

function getOpps(callback) {
    $j('#Oppslist').empty();
    AccountController.queryOpp(function(records, e) { showOpps(records, callback) }, {escape:true}); 
}

function showOpps(records, callback) {
    currentOpp.length = 0;
    for(var i = 0; i < records.length; i++) { currentOpp[records[i].Id] = records[i]; }
    var x = 0;
    $j.each(records,
        function() {
        $j('<li></li>')
        .attr('id',this.Id)
        .hide()
	.append('<h2>' + this.Name + '</h2>')
        .click(function(e) {
            e.preventDefault();
            $j.mobile.showPageLoadingMsg();
            $j('#OppName').html(currentOpp[this.id].Name);
            })

        .appendTo('#Oppslist')
        .show();
         x++;
        });
    
    $j('#Oppslist').listview('refresh');
    if(callback != null) { callback(); }
}

 this VF Page

 

<apex:page showHeader="false"  standardStylesheets="false" cache="true" controller="AccountController" >
<apex:outputText escape="false" value="{!'<!DOCTYPE html>'}"/>
<html>
<head>
<title>MarketingApp</title>

<link rel="stylesheet" href="{!URLFOR($Resource.cloudtunes_jQuery, 'jquery.mobile-1.0rc2.min.css')}" />
<script type="text/javascript" src="{!URLFOR($Resource.cloudtunes_jQuery, 'jquery.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.cloudtunes_jQuery, 'jquery.mobile-1.0rc2.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.MarketingApp)}"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>

<body>
    
    
    <div data-role="page" data-theme="b" id="mainpage">
            
        <div data-role="header">
            <a href='#' id="logout" class='ui-btn-left' data-icon='home' >Home</a>
            <h1>Main Menu</h1>        
        </div>
          <div data-role="content">
            <ul data-inset="true" data-role="listview" data-theme="b" data-dividertheme="b" align="center">
            <a href='#detailpage' style="text-decoration:none"><font color="#363636" size="3"><br><dd>Customer Visit</dd></br></font></a>
            </ul>
            <ul  data-inset="true" data-role="listview" data-theme="b" data-dividertheme="b"  align="center">
            <a href='#Opppage' style="text-decoration:none"><font color="#363636" size="3"><br><dd>Order View</dd></br></font></a>
            </ul>
          </div>
    </div>    
    
    <div data-role="page" data-theme="b" id="detailpage">           
        <div data-role="header">
            <a href='#mainpage' id="backAlbum" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse">Home</a>
            <h1>Customer List</h1>
        </div>
        <div data-role="content">  
           
        <a href='#trackpage' style="text-decoration:none"><font color="#363636" size="3">
            <input type="hidden" id="albumId" />  
            <ul id="albumlist" data-inset="true" data-role="listview" 
                data-theme="b" data-dividertheme="b">
            </ul>
        </font></a>
        </div>
    </div>
    
    <div data-role="page" data-theme="b" id="Opppage">           
        <div data-role="header">
            <a href='#mainpage' id="backAlbum" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse">Home</a>
            <h1>Order List</h1>
        </div>

        <input type="hidden" id="OppId" />                        
            <ul id="Oppslist" data-inset="true" data-role="listview" 
                data-theme="c" data-dividertheme="a">
            </ul>
    </div>
</body>
</html>
</apex:page>

 

thank you very much.



akhilesh_sfdcakhilesh_sfdc

I believe this is because you don't have any onClick event listener on "Order View" button that is calling your getOpps javascript function. 

maiyakumaiyaku

I should add Onclick event here, please guide meI am new for this.

 

If you comfortable the previewI would appreciate very much.

 

Best,Regards