爲什麼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); 
      } 
     } 
    }); 
} 

Answer 2

的問題是，每次$就成功了，你創建JustGage的新實例，並JustGage在DOM $（'＃號），每次過，那麼它得到了重複添加圖表。

您應該只創建一個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