local webView duplicating div and overlaying graph

You must Login before you can answer or comment on any questions.

I have a simple web page with jQuery and a plugin for graphing. 

<!DOCTYPE html>
<html>
    <head>
        <title>Bar Graph</title>
        <script src="jquery-1.8.2.min.jsf"></script>
        <script src="jqBarGraph.1.1.min.jsf"></script>      
        <script>
        $(document).ready(function(){
                // This is how you trigger the event listener created above
                // from within javascript inside index.html
                Ti.App.addEventListener('webPageReady',function(e) {
                    var Rate = e.message;
                    arrayOfData = new Array(
                         [penetrationRate,'col1','#F2027E'],
                         [3,'col2','#F6FF00'],
                         [10,'col3','#FFFFFF']
                    );              
                    $('#graph').jqBarGraph({ data: arrayOfData,
                                            width:200, 
                                            height: 200, 
                                            postfix:'%',
                                            title:'Industry Standard'});  
                });
            });            
        </script>   
    </head>
    <body>
        <div id="graph"></div>
        <p style="bottom: 25">
            <a href="#" onClick="Ti.App.fireEvent('bestInClass');">Get to Best in Class!</a>
        </p>    
    </body>
</html>
The div at the bottom is at the top of the page and once the graph loads also shows up under it. Any ideas on how that would happening?

Second, I would like to clear the div on page load, but every time I load the view it just makes another copy over the first. So the user changes some value on a previous view and re-loads the graph it text and graph just overlay the previous result.

I have tried .repaint/.reload the view, in a bunch of different configurations, I have tried using jQuery to clear out the div. Each time I get a blank page (the view loads, but only with the background image I used with the createWebView property. 

var viewA4 = Ti.UI.createWebView({
        url:'barGraph.html',
        backgroundImage: 'images/repeating-bg.png',
        backgroundRepeat: true
    });
 
 
saveButtonA3.addEventListener("click",function(e){
        //viewA4.reload();
        scrollableViewA.setCurrentPage(3);
        var penRate = Ti.App.Properties.getString('penetrationRate');
        Ti.App.fireEvent("webPageReady", {message:penRate});
    });

Any ideas on why the view won't clear itself or on how to get itself to repaint/refresh?

Thanks

Your Answer

Think you can help? Login to answer this question!