1. 首页
  2. 问答
  3. jQuery Mobile listview在Chrome中没有正确刷新

jQuery Mobile listview在Chrome中没有正确刷新

2012-07-27 50 views
0

虽然我已经完全注释掉了我的listview（'refresh'）方法，但我在将page切换到列表视图时出现以下错误。 Safari加载我的列表视图罚款，但每当我使用铬我遇到问题。这发生在其他人身上吗？我做我的所有装载的的document.ready（）{}jQuery Mobile listview在Chrome中没有正确刷新

问题甚至发生在我完全注释掉我的列表视图....发起changePage

<!DOCTYPE html> 
<html> 
<head> 

    <title>First jQuery Mobile Example</title> 

    <!-- the three things that jQuery Mobile needs to work--> 
<link rel="stylesheet" href="./signup.css"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 

</head> 

<body> 
    <!-- Page starts here --> 
<div data-role="page" data-theme="c" id="surveyList"> 

<script> 

$(document).bind('mobileinit', function() { 
    $.mobile.page.prototype.options.theme = "c"; 
}); 

function createNewSurvey() { 

    console.log("Creating new survey"); 

    $.mobile.changePage("surveyCreator.html", { transition: "slide"}); 
} 

function goToSurveyResults(surveyID) { 
    console.log("hello"); 
    console.log("This survey's id is: ",surveyID); 

    surveyId = surveyID; 
    console.log("surveyId is = ", surveyId); 

    // $.getJSON("http://iwaiter-app.com/iWaiter_scripts/getSurveyAnalytics.php?surveyID=" + surveyId, function(json) { 
    //  console.log(json); 

     console.log("surveyId is = ", surveyId); 
     $.mobile.changePage("surveyResults.html", { transition: "slide"}); 
      console.log("changed page"); 
    // }); 

} 

function deleteSurvey(surveyID) { 
    console.log("Deleting survey with id: ",surveyID); 
} 


//$(document).ready(function(){ 
    $('#surveyList').bind('pageinit', function() { 

    var currentTime = new Date() 
var month = currentTime.getMonth() + 1 
var day = currentTime.getDate() 
var year = currentTime.getFullYear() 
var fullDate = month + "-" + day + "-" + year; 

$('#footer').append('<p> Today: ' + fullDate + '</p>'); 
//document.write(month + "/" + day + "/" + year) 

// get the JSON data from server 
    $.getJSON("http://iwaiter-app.com/iWaiter_scripts/[email protected]", function(data) { 

     console.log(data); 

     // Define some local instance variables 
     var listOfSurveys = data.Results; 
     var currentDate; 
     var numbersOrLetters; 
     var onOff; 
     var surveyDescription; 
     var dataTheme; 

     $('ul#surveyList').append('<li><a href="javascript:void(createNewSurvey());">Create New Survey</a></li>'); 

     for (i = 0; i < listOfSurveys.length; i++){ 

      // set whether the survey uses numbers or letters 
      if (listOfSurveys[i].Numbers_or_letters > 0) 
       {numbersOrLetters = 'Letters';} 
      else {numbersOrLetters = 'Numbers';} 

      // set whether survey is on or off 
      if (listOfSurveys[i].On_off > 0) {onOff = 'Off'; dataTheme = 'data-theme="c"';} 
      else {onOff = 'On'; dataTheme = 'data-theme="b"';} 

      // Set description 
      if (listOfSurveys[i].Survey_description != '') 
       surveyDescription = ', ' + listOfSurveys[i].Survey_description; 
      else 
       surveyDescription = listOfSurveys[i].Survey_description; 

      // set surveyAuthKey 
      var authKey = listOfSurveys[i].Survey_authKey; 
      console.log("authkey: ",authKey); 

      if (listOfSurveys[i].Date == currentDate) { 
       // create row in same section 

      /* old list element 
       $('ul#surveyList').append('<li><a href="javascript:void(goToSurveyResults(' + listOfSurveys[i].Survey_id + '));"><h1>' + listOfSurveys[i].Survey_authKey + '</h1><p>' + listOfSurveys[i].Number_of_options + ' Options, ' + numbersOrLetters + ', ' + onOff + ', ' + surveyDescription + '</p></a></li>'); 
      */  
       $('ul#surveyList').append('<li class="ui-btn ui-btn-icon-right"' + dataTheme + '><a href="javascript:void(goToSurveyResults(' + listOfSurveys[i].Survey_id + '));"><h1>' + listOfSurveys[i].Survey_authKey + '</h1><p>' + listOfSurveys[i].Number_of_options + ' Options, ' + numbersOrLetters + ', ' + onOff + surveyDescription + '</p></a><a href="#" onclick="deleteSurvey(' + listOfSurveys[i].Survey_id + ')" data-icon="delete" class="ui-li-link-alt ui-btn "' + dataTheme + ' ></a></li>'); 


      } 
      else { 
       // otherwise create a new section 
       currentDate = listOfSurveys[i].Date; 
       console.log(currentDate); 

       $('ul#surveyList').append('<li data-role="list-divider">' + currentDate + '</li>'); 

       $('ul#surveyList').append('<li class="ui-btn ui-btn-icon-right"' + dataTheme + '><a href="javascript:void(goToSurveyResults(' + listOfSurveys[i].Survey_id + '));"><h1>' + listOfSurveys[i].Survey_authKey + '</h1><p>' + listOfSurveys[i].Number_of_options + ' Options, ' + numbersOrLetters + ', ' + onOff +surveyDescription + '</p></a><a href="#" onclick="deleteSurvey(' + listOfSurveys[i].Survey_id + ')" data-icon="delete" class="ui-li-link-alt ui-btn "' + dataTheme + '></a></li>'); 
      } 
      } 
     console.log("Refreshed"); 
     $('ul#surveyList').listview('refresh'); 

    }); 

}); 

</script> 


    <header data-role="header"> 
    <a href="Master_Survey.html" data-direction="reverse" rel="external" data-icon="" data-transition="slide" class="ui-btn-right">Logout</a> 
    <h1>My Surveys</h1> 

    </header> 

    <div data-role="myContent"> 

    <div id="surveysContainer"> 

     <ul id="surveyList" data-role="listview" data-split-icon="delete"> 
     </ul> 

    </div> 

    </div> 




<footer data-role="footer" id="footer"></footer> 

</div> 

    </body> 

</head> 
</html>

代码

页w /错误

<!DOCTYPE html> 
<html> 
<head> 

    <title>First jQuery Mobile Example</title> 

    <!-- the three things that jQuery Mobile needs to work--> 
<link rel="stylesheet" href="./signup.css"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 

</head> 

<body> 
    <!-- Page starts here --> 
<div data-role="page" data-theme="c" id="resultsListPage" data-add-back-btn="true"> 

<script> 

$('#resultsListPage').bind('pageinit', function() { 

    console.log("new page"); 
    /* 
    $('ul#resultsList').append('<li>Mean: </li>'); 
     $('ul#resultsList').append('<li>Standard Deviation: </li>'); 

    $('#resultsList').listview(); 
     $('#resultsList').listview('refresh'); 
     */ 
}); 


$(document).ready(function(){ 
    console.log("how far?"); 
//document.write(month + "/" + day + "/" + year) 

// get the JSON data from server 
    //$.getJSON("http://iwaiter-app.com/iWaiter_scripts/get_analytics.php?surveyAuthKey=alo-1", function(data) { 

    // console.log(data); 

     // Define some local instance variables 
    // var listOfSurveys = data.Results; 
     var currentDate; 
     var numbersOrLetters; 
     var onOff; 
     var surveyDescription; 

     // header 
     // $('ul#surveyList').append('<li data-role="list-divider">' + currentDate + '</li>'); 

/* 
     // result rows 
     $('ul#resultsList').append('<li>Mean: </li>'); 
     $('ul#resultsList').append('<li>Standard Deviation: </li>'); 
    */ 

    // $('#resultListContainer').html('<ul id="resultsList" data-role="listview" data-inset="false" data-filter="true"><li>Mean: </li><li>Standard Deviation: </li></ul>'); 

    // $("#resultsList").listview(); 
    // $("#resultsList").listview('refresh'); 

    // $("#resultsList").listview() 

     // $('ul#resultsList').listview('refresh'); 

// }); 

}); 

</script> 


    <header data-role="header"> 
    <a href="Master_Survey.html" data-direction="reverse" rel="external" data-icon="" data-transition="slide" class="ui-btn-right">Logout</a> 
    <h1>Survey Analytics</h1> 
    </header> 








<footer data-role="footer" id="footer"></footer> 

</div> 

    </body> 

</head> 
</html> 


Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

来源

2012-07-27 Apollo

+1

http://jquerymobile.com/demos/1.1.1/docs/api/events.html不使用document.ready（） – 2012-07-27 02:03:08

+0

是的，我实际上已经从另一个堆栈帖子中找到了这个......不过谢谢！ – Apollo 2012-07-27 02:19:27

+1

请正确格式化您的代码，缩进不是结构化的。 – Calavoow 2012-07-27 12:48:34

回答

0

因为你的错误：

Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

表示.listview('refresh')在您的代码中某个尚未作为列表视图启动的元素上被调用。

在你的代码的唯一.listview('refresh')是在以下绑定：

$('#surveyList').bind('pageinit', function() { 
    ... 
    $('ul#surveyList').listview('refresh'); 
    ... 
}

这会不会松绑，当你changePage。这意味着当你改变页面和pageinit事件发生时，javascript仍然会尝试执行这个块中的代码。但是该元素不在当前页面上，因此（可能）未正确初始化。

来源

2012-07-27 13:40:01 Calavoow

相关问题

 相关问题