Question

我正在进行ASP.Net MVC 5 Web应用程序。其中一个页面是一个统计页面，假设有一个SelectList，用于选择我在此页面上的图表数量（1,2,4或6）。然后，我将使用相同数量的按钮来单独生成每个图形

像这样：

<div id="myContainer">
  <select id="totalCharts>
     ....
  </select>
  <div id="ChartArea1">
      <button id="btn1"></button>
      <canvas id="chart1></canvas>
  </div>

    ....
  <div id="ChartAreaN">
     <button id="btnN"></button>
     <canvas id="chartN></canvas>
  </div>
</div>

然后我想在单击按钮时生成带有Ajax请求的每个图表。

我尝试了几种方法，但不使用它们。你能告诉最简单的方法吗？

Answer 1

检查链接是否有完整代码： http://jsfiddle.net/hacker1211/n72vv902/

$(document).ready(function(){
            var n=10; //no of items in dropdown
            for(i=1;i<=n;i++){
                $('#totalCharts').append('<option value="'+i+'">'+i+'</option>');
            }                   
        });     
        //code to populate divs,buttons,canvas
        $('#totalCharts').change(function(){
            for(j=1;j<=$(this).val();j++){
                $('#myContainer').append('<div id="ChartArea'+j+'"><button id="btn'+j+'">Button '+j+'</button><canvas id="chart'+j+'"> </canvas></div>');
            }
        });
        $('button').click(function(e){
            e.preventDefault();
            var url="http://www.example.com"; //put your url here
            var id=$(this).attr('id'); //if you need button id
            $.ajax(url, {
                success: function(data) {
                    //code to draw chart here
                },
                error: function() {
                    alert('Error in sending ajax');
                }
            });

        });

为Ajax请求生成多个按钮

1 个答案: