2011-07-06 17 views
3

我有一些JavaScript,我試圖在jsf應用程序中使用。我已經縮小了範圍,所以如果我將下面的行刪除,事情就可以正常工作,但是當我將這些行寫入時,我在Chrome控制檯中發現錯誤,指出「意外;」它顯示第一行爲if(maxdays &gt; 1000) {在我的jsf應用程序的javascript中將「>」和「<」轉換爲「<」和「>」的奇怪問題

爲什麼它將大於符號轉換爲&gt;?編輯: 這裏是整個JSF頁面。

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"> 


<h:head> 


    <title>Protocol Dashboard</title> 
    <link type="text/css" rel="stylesheet" href="../css/styles.css" /> 
    <script type="text/javascript" src="../js/jquery-1.5.2.js"></script> 
    <script type="text/javascript" src="../js/highcharts.src.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(
       function() { 
        //var chartData; 
        //var goodData; 
        var chart; 
        var studyType; 
        var categories; 
        var maxdays; 
        //var chart = new Highcharts.Chart({ 
        var options = { 

         chart : { 
          renderTo : 'container', 
          type : 'bar' 
         }, 

         title : { 
          text : 'Gantt module development plan' 
         }, 
         subtitle: { 
          text: studyType 
         }, 
         xAxis : { 
          categories : [ 'Planning', 'Development', 
            'Testing', 'Documentation' ] 
         }, 

         yAxis : { 
          type : 'datetime', 
          min : Date.UTC(2012, 0, 1), 
          labels : { 
           formatter : function() { 
            return Highcharts.dateFormat('%m/%d/%Y', 
              this.value); 
           } 
          } 

         }, 

         tooltip : { 
          formatter : function() { 
           var point = this.point; 
           return '<b>' 
             + point.category 
             + '</b><br/>' 
             + Highcharts.dateFormat('%b %e, %Y', 
               point.low) 
             + ' - ' 
             + Highcharts.dateFormat('%b %e, %Y', 
               point.y); 
          } 
         }, 

         series : [ { 
          data : [ { 
           low : Date.UTC(2012, 0, 1), 
           y : Date.UTC(2012, 0, 15) 
          }, { 
           low : Date.UTC(2012, 0, 10), 
           y : Date.UTC(2012, 4, 28) 
          }, { 
           low : Date.UTC(2012, 3, 15), 
           y : Date.UTC(2012, 4, 28) 
          }, { 
           low : Date.UTC(2012, 4, 15), 
           y : Date.UTC(2012, 4, 28) 
          } ] 
         }, { 
          data : [ { 
           low : Date.UTC(2012, 0, 1), 
           y : Date.UTC(2012, 1, 15) 
          }, { 
           low : Date.UTC(2012, 0, 10), 
           y : Date.UTC(2012, 3, 15) 
          }, { 
           low : Date.UTC(2012, 3, 15), 
           y : Date.UTC(2012, 6, 14) 
          }, { 
           low : Date.UTC(2012, 4, 15), 
           y : Date.UTC(2012, 4, 25) 
          } ] 
         } ] 

        }; 

        function loadData() { 

         //options.series.length = 0; 
         //options.xAxis.categories.length = 0; 

         $('#hiddenData').val('09-034,99|10-053,194'); 
         $('#hiddenCategories').val('09-034|10-053'); 
         $('#clickedMenu').val('P2C'); 
         $('#hiddenMaxDays').val('194'); 



         var chartData = $('#hiddenData').val(); 
         console.log('hiddenData = '+chartData); 

         categories = $('#hiddenCategories').val(); 
         console.log('hiddenCategories = '+categories); 

         studyType = $('#clickedMenu').val(); 
         console.log('clickedMenu = '+studyType); 

         maxdays = $('#hiddenMaxDays').val(); 
         console.log('hiddenMaxDays = '+maxdays); 
         console.log('maxdays = '+maxdays); 



         //options.yAxis.max = maxdays; 

         options.subtitle.text = studyType; 

         var goodData = chartData.split('|'); 
         //console.log('goodData = '+goodData); 

         //var goodCategories = categories.split(","); 
         //console.log('goodCategories = '+goodCategories); 
         /* 
         var series = { 

          data : [] 
         }; 

         var cat = { 
          categories : [] 
         }; 

         try { 
          $.each(goodData, function(index, value) { 
           var goodData2 = value.split(","); 
           //series.name = goodData2[0]; 
           series.data.push(parseFloat(goodData2[1])); 

          }); 

          $.each(goodCategories, function(index, value) { 
           var prot = value; 
           options.xAxis.categories.push(value); 

          }); 

          options.series.push(series); 
          //console.log(options); 
         } catch (err) { 
          //console.log("ERROR ..." + err.description + ' message:' 
          //+ err.message); 

         }*/ 

        } 

        function loadDataAndCreateChart() { 
         loadData(); 
         //console.log(options); 
         chart = new Highcharts.Chart(options); 
        } 

        loadDataAndCreateChart(); 

       }); 
    </script> 

</h:head> 
<h:body> 

    <div id="container"></div> 

    <h:inputHidden value="#{selectCategory.jsonResults }" id="hiddenData" /> 
    <h:inputHidden value="#{selectCategory.jsonResultsCategories }" id="hiddenCategories" /> 
    <h:inputHidden value="#{selectCategory.menuItem}" id="clickedMenu" /> 
    <h:inputHidden value="#{selectCategory.maxDays}" id="hiddenMaxDays" /> 

</h:body> 
</html> 
+4

您應該顯示周圍的JSF代碼。發生什麼事是JSF正在JavaScript文本上執行HTML轉義。 – Pointy

+0

我該如何讓它不這麼做? – Catfish

回答

4

您正在使用Facelets,它是基於XML的視圖技術。諸如>,&等JavaScript運算符在XML中是special characters,並且是非法在XML文件中用於其他目的時。 Facelets正在以這種方式照顧他們。

我強烈建議將所有JS代碼放入其自己的.js文件中,並參考<script src><h:outputScript>

例如

<script src="#{request.contextPath}/js/global.js"></script> 

<h:outputScript name="js/global.js" /> 

額外的好處是,你可以微調瀏覽器緩存這種方式,並在更有效地提供服務的網站中結束。


無關的具體問題:請注意我如何引用庫。您應該優先使用URI相對路徑上的域相關路徑。使用../是一種維修痛苦。如果您移動視圖或更改請求URI,它將會中斷。

+0

很抱歉打擾你,但是這對IE進行IE條件註釋並沒有幫助。我會如何將Facelets轉換爲有條件註釋的括號? –

+0

@Buhake:http://stackoverflow.com/questions/8574588/if-ie-doesnt-work-with-facelets/ – BalusC

+0

謝謝BalusC,我沒有看到它了。我現在正在使用你的OmniFaces庫。它像一個魅力。 :-) –

1

&gt;是必須被用來輸出在HTML中>字符的HTML實體。 <>是HTML標記使用的特殊字符,因此必須轉義爲&lt;&gt;,如果這些字符必須顯示在頁面中。我懷疑你正在使用一個轉義輸入的JSF標籤。

我沒有與JSF太多的經驗,但你可能會試圖包圍腳本CDATA節:

<script type="text/javascript"> 
<![CDATA[ 
    your JavaScript code here 
]]> 
</script> 

但最好的辦法是不要有JavaScript的HTML中的所有,和負載它來自外部文件。

+0

這裏面全是h:head標籤 – Catfish

+0

請參閱我編輯的答案 –

+0

您在HTML/XML註釋中首次嘗試使用JS是沒有意義的。這只是90年代的剩餘風格,當並非所有瀏覽器都支持/理解JavaScript,因此無法解析「

  • 11. 列表<String>到ArrayList的<String>轉換問題
  • 12. 爲什麼<$>和<*>的輸入順序是>> =?
  • 13. 爲什麼我的「<br />」標籤轉換爲「< br/>」?
  • 14. 如何將IObservable <IObservable <T>>轉換爲IObservable <IEnumerable <T>>?
  • 15. 如何將List <IEnumerable <ProductViewModel >>轉換爲<IEnumerable <ProductViewModel >>?
  • 16. 如何將UnsafeMutablePointer <UnsafeMutablePointer <Int8>?>轉換爲UnsafeMutablePointer <UnsafeMutablePointer <Int8>>!
  • 17. 如何將shared_ptr <Foo<Derived>>轉換爲shared_ptr <Foo<Base>>?
  • 18. 替換&amp;&,<lt < and > gt gt to gt在javascript中
  • 19. 我可以將列表<Date>轉換爲ArrayList <String>?
  • 20. 在F#中將System.Func <>轉換爲FastFunc <>
  • 21. 如何在PHP中將HTML <TAGS>轉換爲<tags>?
  • 22. 奇怪的行爲:isAssignableFrom(類<?>)
  • 23. 將轉換列表<string>轉換爲列表中的<int> C#
  • 24. 與由矢量稱爲構造奇怪的問題<T>
  • 25. 帆API - 問題刪除,所以我有一個奇怪的問題</p> <p>我有我的藍圖正常的模型,其中一些字段</p> <p>的領域之一是</p> <pre><code>id: { type: 'integer', primaryKey: true }, </code></pre> <p>所以如果我行
  • 26. 爲什麼JavaScript將我的<轉換爲>
  • 27. Tuple之間的轉換<T1,T2>和KeyValuePair <T1, T2>
  • 28. 的IList <T>和列表<T>轉換與接口
  • 29. 如何將<< with > =和>替換爲<=,並用<替換爲<= with >和> =如果它們在同一個字符串中出現多次?
  • 30. 奇怪的剃刀嵌套的foreach(...){<tr> @Html ....</tr>}