2014-11-03 101 views
0

基於搜索,我遇到了這個stackoverflow線程'Is it possible to ping a server from Javascript?',並決定遵循trante的jfiddle示例。它適用於我所需要的與jQuery和CSS部分完全相同的HTML代碼頁面。Ping功能顯示在HTML

我的問題是,並希望看到如果有人能幫助我,是當我創建一個.js文件和一個.css並引用他們在HTML的標題,該功能不起作用。

所以這就是我想要完成的。 - 在jQuery的js文件 - 樣式表.css文件 - HTML輸出HTML頁面

這裏是trante的jfiddle例如:http://jsfiddle.net/GSSCD/203/

,這裏是我的html例子參考:

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <link rel="icon" href="../favicon.ico"> 
     <link rel="stylesheet" href="dist/css/bootstrap.min.css"/> 
     <link rel="stylesheet" href="dist/css/panel_dropdown.css"/> 
     <link rel="stylesheet" href="dist/css/ping_response.css"/> 
     <script type="text/javascript" src="dist/js/jquery-2.0.3.min.js"></script> 
     <script type="text/javascript" src="dist/js/bootstrap.min.js"></script> 
     <script type="text/javascript" src="dist/js/modals.js"></script>  
     <script type="text/javascript" src="dist/js/ping-function.js"></script>  

     <title>Test Ping</title> 
    </head> 
    <body> 
     <ul data-bind="foreach:servers"> 
     <li> <a href="#" data-bind="text:name,attr:{href: 'http://'+name}">tester</a> 
     <span data-bind="text:status,css:status"></span> 
     </li> 
     </ul> 
    </body> 

謝謝,

Karsten

+0

因爲在小提琴的代碼在窗口中運行的onload和你可能不運行代碼的onload。 – epascarello 2014-11-03 18:17:53

回答

0

你的小提琴使用Kno ckout.js,雖然我沒有看到你的HTML使用它。你的問題的答案取決於你是否願意使用Knockout JS,或者你只想在JQuery中使用相同的功能?

+0

嘿亞歷山大,我使用bootstrap和它提供的jquery。我準備嘗試它。我剛剛下載了knockout-3.2.0.js。我刪除了對jquery的引用。 – 2014-11-03 19:15:19

+0

我不認爲刪除jQuery是必要的,只是添加淘汰賽應該做的伎倆,它看起來像你已經弄清楚了。 – 2014-11-04 17:43:37

0

@Alexander 這是我所做的,我刪除了對jquery的引用,並下載了knockout-3.2.0.js並在html中引用它。我將knockout和.js文件的ping函數放置在遠離jquery的另一個文件夾中。

@epascarello 我將參考文獻從頭部移至身體。我首先在jfiddle中測試它。

無論如何,這裏是現在的html代碼,我可能仍然遇到服務器沒有顯示的問題,只是測試人員在頁面上顯示。

<!DOCTYPE html> 
    <html lang="en"> 

     <head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <link rel="stylesheet" href="dist/css/bootstrap.min.css"/> 
     <link rel="stylesheet" href="dist/css/ping_response.css"/> 


     <title>Test Ping</title> 
     </head> 


     <body> 

     <script type="text/javascript" src="dist/js/knockout-3.2.0.js"></script> 
     <script type="text/javascript" src="dist/ko_js/ping-function.js"></script> 

     <ul data-bind="foreach:servers"> 
     <li> <a href="#" data-bind="text:name,attr:{href: 'http://'+name}">tester</a> 
     <span data-bind="text:status,css:status"></span> 
     </li> 
     </ul> 

     </body> 

感謝,

卡斯滕

0

我有固定我的問題。謝謝大家,指導我朝着正確的方向前進。

我把參考放在html的末尾,現在工作正常。

<!DOCTYPE html> 
    <html lang="en"> 

    <head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <link rel="stylesheet" href="dist/css/bootstrap.min.css"/> 
     <link rel="stylesheet" href="dist/css/ping_response.css"/> 


    <title>Test Ping</title> 
    </head> 


    <body> 

    <ul data-bind="foreach:servers"> 
    <li> <a href="#" data-bind="text:name,attr:{href: 'http://'+name}">tester</a> 
    <span data-bind="text:status,css:status" style="margin-left:50px"></span> 
    </li> 
    </ul> 

    </body> 

    <script type="text/javascript" src="dist/ko_js/knockout-3.2.0.js"></script> 
    <script type="text/javascript" src="dist/ko_js/ping-function.js"></script> 

感謝, 卡斯滕