2011-06-22 50 views
1

我使用flot來繪製一些數據。我在表單中輸入開始日期和結束日期,然後檢索要繪製的數據。圖表正常顯示一段時間,但url被重定向到同一頁面,但附有「?0 = on & 1 = on & 2 = on & 3 = on & 4 = on & 5 = on」which doesn不存在。這裏是我的代碼:Flot繪製圖表然後無端重定向

<form onsubmit='formValidator()' > 
     Start Date: <input type='text' id='date1' /><br /> 
     End Date: <input type='text' id='date2' /><br /> 
    <input type='submit' value='Go' /> 

    <div align="center"><div id="placeholder" style="width:80%; height: 700px"></div></div> 

    <p id="choices" style="color:#FFFFFF">Show:</p> 

    <script type="text/javascript" id="source"> 


function formValidator(){ 
    // Make quick references to our fields 
    var d1 = document.getElementById('date1'); 
    var d2 = document.getElementById('date2'); 
    var msg = "Please enter the date in the format yyyymmdd. e.g. 20110609 for June 9, 2011"; 
    // Check each input in the order that it appears in the form! 
    if(notEmpty(d1, msg)&& notEmpty(d2, msg) && isNumeric(d1, msg)&& isNumeric(d2, msg)&& lengthRestriction(d1, msg)&& lengthRestriction(d2, msg)){ 
     $(function() { 
       var date1 = d1.value; 
       var date2 = d2.value; 

/* foo1-6 are arrays that get their assigned values here */ 

       var datasets = [ 
        {label: "Foo1", data: foo1  }, 
       {label: "Foo2", data: foo2  }, 
       {label: "Foo3", data: foo3  }, 
       {label: "Foo4", data: foo4  }, 
       {label: "Foo5", data: foo5  }, 
       {label: "Foo6", data: foo6  } 
       ]; 

       // hard-code color indices to prevent them from shifting as 
       // options are turned on/off 
       var i = 0; 
       $.each(datasets, function(key, val) { 
        val.color = i; 
        ++i; 
       }); 


       // insert checkboxes 
       var choiceContainer = $("#choices"); 
       $.each(datasets, function(key, val) { 
        choiceContainer.append('<br/><input type="checkbox" name="' + key + 
              '" checked="checked" id="id' + key + '">' + 
              '<label for="id' + key + '">' 
              + val.label + '</label>'); 
       }); 
       choiceContainer.find("input").click(plotAccordingToChoices); 



       function plotAccordingToChoices() { 
        var data = datasets; 

        choiceContainer.find("input:checked").each(function() { 
         var key = $(this).attr("name"); 
         if (key && datasets[key]) 
          data.push(datasets[key]); 
        }); 

        if (data.length > 0) { 
         var options = { 
          legend: { 
           backgroundColor: "#000000", 
           backgroundOpacity: 0.9, 
           labelFormatter: function(label,series) { 
            return "<div style=color:#FFFFFF>" + label + "</div>"; 
           } 
          }, 
          yaxis: { min: 0 }, 
         } 
        }; 
        $.plot($("#placeholder"), data, options); 
       } 

       plotAccordingToChoices(); 

      }); 
    } 
} 

回答

2

不得不得出這樣的結論是導致該行爲在頁面上其他一些JavaScript:你減少了頁面只jQuery的海軍報和數據源,並確保您沒有其他用戶提供的JavaScript導致重新加載? flot庫中沒有任何東西會導致自動重新加載,所以我猜測它是您的應用程序部署在框架中的一些工件。

+0

我們使用jQuery UI Datepicker來解決問題的日期選擇。仍然不知道爲什麼發生刷新問題,但很高興能夠正常工作。 –

+0

因此,切換到jQuery UI的日期選擇器修復它(如果是這樣,你以前使用什麼)? – Femi

+0

只是規則形式(與上面的代碼相同)。 –