javascript - 为什么 JustGage 显示多次

Question

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

出于某种我不明白的原因，如果多次按下提交按钮，则仪表会多次显示在其自身之上。

谁能告诉我我做错了什么？

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);
            }
        }
    });
}