为什么JustGage会多次显示

Question

我有一个表单，它将数据保存到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>

Answer 1

在回调之外存储对量规的引用，因此对所有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);
            }
        }
    });
}

Answer 2

问题是，每次$.ajax成功的时候，您都会创建一个新的JustGage实例，并且JustGage每次也会在dom $(‘#JustGage)中添加一个图表，然后它就被复制了。

您应该只创建一个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});
      }
    });
  }
});

JustGage.prototype.refresh的使用