使用JQUERY重新加载div而不重新加载页面

Question

I am working with amCharts and want to put a simple button in the my header that gives the option to refresh the chart chart div when needed.

I have looked all over the internet for a solution and all the code I have found is similar to what I am using, it does not want want to reload the div. Being new at JQUERY I am not sure what I doing wrong.

your assistance is greatly appreciated.

I have attached the JQUERY and HTML code Below:

<div id="chartwrapper">
    <!-- Unit Price Dollar -->
    <div id="unit-price" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">VPM Global Select Opportunities Fund - Dollar Unit Price
        <br> Weekly: 2012/02/03 to 2014/10/24

    </div>
    <div id="chartdiv1" style="width:100%; height:600px;"></div>

    <!-- Unit Price Dollar Target Return -->
    <div id="unit-price-value" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of $1000 Invested at inception relative to Target Return
        <br> Weekly: 2012/02/03 to 2014/10/24
    </div>
    <div id="chartdiv2" style="width:100%; height:600px;"></div>

    <!-- Unit Price Rand Versus Inflation -->
    <div id="unit-price-rand" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of R1000 Invested at inception relative to Inflation Benchmarks
        <br> Weekly: 2012/02/03 to 2014/10/24
    </div>
    <div id="chartdiv3" style="width:100%; height:600px;"></div>

    <div style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; color: #666; clear: both;">
        <br>* VPM GSO - VPM Global Select Opportunities Fund
    </div>
    <br>
</div>
<!-- END CHART WRAPPER -->

jQuery:

$(document).ready(function() {
    $("#resetZoom1").bind("click", function() {
        var url = 'index.html';
        $("#chartwrapper").load( url + "div#chartdiv1")
    });
});

Answer 1

From the documentation :

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

So, you must use a space:

$("#chartwrapper").load(url + " div#chartdiv1");
                  //           ^
                  // a space --'

Or, this is better (without div ):

$("#chartwrapper").load(url + " #chartdiv1");