?
Solved

Javascript error - assistance needed

Posted on 2011-10-12
2
Medium Priority
?
671 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:error77
2 Comments
 

Author Comment

by:error77
ID: 36960515
Anyone please?
0
 
LVL 2

Accepted Solution

by:
kamalranjan earned 2000 total points
ID: 36961022
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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question