Javascript 为什么JustGage显示多次

我有一个表单，可以将数据保存到mysql数据库，还可以检索使用插件显示的一些变量

出于某种原因，我不明白为什么，如果多次按下提交按钮，仪表会在其上方显示多次

谁能告诉我我做错了什么

Jquery

$(document).ready(function() {
    $("#message").hide();
    $("#myform").validate({
        submitHandler: function() {
            event.preventDefault();

            var formdata = $("#myform").serialize();
            //Post form data
            $.post('insert.php', formdata, function(data) {
                //Process post response
                //Reset Form
                $('#myform')[0].reset();
                fetchRowCount();
            });
            return false;

        }

    });


    //Fetch data from server
    function fetchRowCount() {
        $.ajax({
            url: 'server.php',
            dataType: "json",
            success: function(data) {
                $("#rows").html(data.rows);
                $("#min").html(data.min);
                $("#max").html(data.max);
                $("#mean").html(data.total);
                $("#last").html(data.last_entry);


                $("#your_results").fadeIn("slow");
                $("#your_data").fadeIn("slow");
                //Scroll to Gauge
                $('html, body').animate({
                    scrollTop: $('#results').offset().top
                }, 'slow');

                //Show gage once json is receved from server

                var gage = new JustGage({
                    id: "gauge",
                    value: data.total,
                    min: data.min,
                    max: data.max,
                    title: "Sample Data"
                });

            }
        });
    }



});

形式

 <!-- Form 1-->
            <div class="form1">

                <form class="form-inline" action="" id="myform" form="" method="post">


                    <!-- Select Basic -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="type"></label>
                        <div class="col-sm-3">



                            <select id="type" name="type" class="form-control input-lg" required/>
                            <option value="">a</option>
                            <option value="b">b</option>
                            <option value="c">c</option>
                            </select>
                        </div>
                    </div>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="cost"></label>
                        <div class="col-sm-3">
                            <input id="cost" name="cost" type="text" placeholder="Cost" class="form-control input-lg" required>

                        </div>
                    </div>
                    <!-- Select Basic -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="location"></label>
                        <div class="col-sm-3">
                            <select id="location" name="location" class="form-control input-lg" required>
 <option value="" >Location</option>
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>
                        </div>
                    </div>

               <!-- Button -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="submit1"></label>
                        <div class="col-md-4">
                            <input type="submit" id="submitButtonId" name="submit" class="btn btn-primary btn-xl" value="Submit">


                        </div>
                    </div>
            </div>
            </form>



  <div id="gauge" class="300x260px"></div>

A.
B
C
位置
A.
B
C

在回调外部存储对仪表的引用，以便对所有ajax成功回调使用相同的变量。然后，每次创建量表时，查看它是否已经创建并刷新它

我还将一些

.html

更改为

.text

。这些元素似乎是显示值的文本的元素，因此我让它们使用

.text

，而不是

.html

，从而使其更加安全

var gage;    

//Fetch data from server
function fetchRowCount() {
    $.ajax({
        url: 'server.php',
        dataType: "json",
        success: function(data) {
            $("#rows").text(data.rows);
            $("#min").text(data.min);
            $("#max").text(data.max);
            $("#mean").text(data.total);
            $("#last").text(data.last_entry);


            $("#your_results").fadeIn("slow");
            $("#your_data").fadeIn("slow");
            //Scroll to Gauge
            $('html, body').animate({
                scrollTop: $('#results').offset().top
            }, 'slow');

            if (!gage) {
                gage = new JustGage({
                    id: "gauge",
                    value: data.total,
                    min: data.min,
                    max: data.max,
                    title: "Sample Data"
                });
            } else {
                gage.refresh(data.total, data.max);
            }
        }
    });
}

---

问题是，每次$.ajax成功时，您都会创建一个新的JustGage实例，而JustGage每次也会在dom$（'#gage）中添加一个图表，然后它就会被复制

您应该只创建一个JustGage实例，并在每次$.ajax成功时刷新它。就这样,

$(document).ready(function() {
  $("#message").hide();
  $("#myform").validate({
    submitHandler: function() {
      event.preventDefault();

      var formdata = $("#myform").serialize();
      //Post form data
      $.post('insert.php', formdata, function(data) {
        //Process post response
        //Reset Form
        $('#myform')[0].reset();
        fetchRowCount();
      });
      return false;
    }
  });

  var gage = new JustGage({
    id: "gauge",
    value: 0,
    min: 0,
    max: 100,
    title: "Sample Data"
  });

  //Fetch data from server
  function fetchRowCount() {
    $.ajax({
      url: 'server.php',
      dataType: "json",
      success: function(data) {
        $("#rows").html(data.rows);
        $("#min").html(data.min);
        $("#max").html(data.max);
        $("#mean").html(data.total);
        $("#last").html(data.last_entry);


        $("#your_results").fadeIn("slow");
        $("#your_data").fadeIn("slow");
        //Scroll to Gauge
        $('html, body').animate({
          scrollTop: $('#results').offset().top
        }, 'slow');

        // Refresh gage once json is receved from server
        gage.refresh(data.total, data.max, {min: data.min});
      }
    });
  }
});

---

使用

Hi，为什么不在按下按钮后禁用它？每次都会创建一个新的

JustGage

。你期望它做什么？我试着隐藏按钮，但不知道如何再次显示它。我在这个表单上得到了很多帮助，我的jquery知识不是很好。只是重申一下这个问题。代码工作正常，但当表单再次提交时，Gauge不会消失并刷新，它只是绘制另一个Gauge，以此类推。如果在仪表出现之前快速按下提交按钮，我会看到多个仪表出现在彼此上方。我希望这是清楚的。太棒了。这正是我所希望的。谢谢你，谢谢你的精彩解释。赏金将属于你！