Почему отображение 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

Проблема заключается в том, каждый раз, когда $ .ajax успеха, необходимо создать новый экземпляр JustGage и 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