Javascript error - assistance needed

hi all,

I have getting a couple of javascript errors but cannot find what the problem is or where.

The errors are:

uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'
plot.plugins.donutRenderer is undefined
[Break On This Error] var canvas = plot.plugins.donutRenderer.highlightCanvas;

Any ideas please?

Thanks

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />
<script src="js/jquery.jqplot.js"></script>
<script src="js/plugins/jqplot.donutRenderer.js"></script>

<script type="text/javascript">
function plotData( data ) {
  ds = [];
  $(data).find('answer').each( function() {ds.push( [ $(this).attr('answer'), parseInt( $(this).attr('count') ) ] );} );
  $.jqplot('chart1', [ds], {seriesDefaults:{renderer:$.jqplot.DonutRenderer},legend: {show:true}});
}

function vote( poll, answer ) {
  $.ajax( { url: 'vote.php',
    data:{id:answer},
    success:function( data ) {
     plotData( data );
    }
  });
}
function openPoll( poll ) {
  $.ajax( { url: 'answers.php',
    data:{id:poll},
    success:function( data ) {
      $(data).find('answer').each( function() {
        var name = $(this).attr('answer');
        var id = $(this).attr('id');
        $('#answer-list').append('<li><a href="#results" poll="'+poll+'" answer="'+id+'" class="answer">'+name+'</a></li>');} );
      $('.answer').click(function(e) {
      vote( $(this).attr('poll'),
            $(this).attr('answer') );
      })
      $('ul').listview('refresh');
    }
  });
}
$(document).ready(function(){
   $.jqplot.config.enablePlugins = true;
   $.ajax( { url: 'polls.php',
     success:function( data ) {
       $(data).find('poll').each( function() {
         var name = $(this).attr('question');
         var id = $(this).attr('id');
         $('#poll-list').append('<li><a href="#answers" pollid="'+id+'" class="poll">'+name+'</a></li>');});
       $('.poll').click(function(e) {
         openPoll( $(this).attr('pollid') );
       })
       $('ul').listview('refresh');
     }
   });
});
</script>

</head><body>
  <div data-role="page" id="home"> 
    <div  data-role="header"><h1>Poll Central</h1></div> 
    <div  data-role="content">
  <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" 
       id="poll-list">
  </ul>
      <div id="chart0" class="plot" style="width:400px;height:280px;"></div>
      </div>
  </div> 

  <div data-role="page" id="answers">
    <div data-role="header">
      <h1 id="poll-question">Question</h1>
    </div>
    <div data-role="content">  
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" 
        id="answer-list">
    </ul>
    </div>
  </div>

  <div data-role="page" id="results">
    <div data-role="header">
      <h1>Results</h1>
    </div>
    <div data-role="content"> 
    <div data-role="collapsible">
    <h3>Results Graph</h3>
    <p>
      <div class="jqPlot" id="chart1" style="height:320px; width:480px;"></div>
    </p>
    </div>
    
    <a href="#home" data-role="button">Start Again</a>
    </div>
  </div>
</body></html>

Open in new window

error77Asked:
Who is Participating?
 
kamalranjanCommented:
Hi Error77,

It seems the JQuery component you are using "plugins/jqplot.donutRenderer", you are actually calling the refresh function in your document ready state. And loading of listview would be happening in asynchronous mode, thus though you get the control as if the document is ready/ loaded on the browser but the listview is not yet initialized. So you need to check there would be some event which would get fired when the listview is loaded and then you should fire your refresh function.

Alternatively you could also try scheduling the calling of your ready function using javascript:timeout() by specifying the amount of time it should wait in case you do not find any event from the donutRenderer library. check this link as an example http://www.htmlite.com/JS018.php . You write your function name instead of alert statement.

Regards
Kamal
0
 
error77Author Commented:
Anyone please?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.