Ping functionality to display on HTML

Question

Based on a search, I came across this stackoverflow thread, 'Is it possible to ping a server from Javascript?', and decided to follow trante's jfiddle example. It works for what I need it to do with the jquery and CSS part all in the same page as the html code.

My issue is and would like to see if some one could help me, is that when I create a .js file and a .css and reference them in the header of the html, the function does not work.

So here is what I am trying to accomplish. - jquery in .js file - stylesheet in .css file - HTML output in html page

Here is trante's jfiddle example: http://jsfiddle.net/GSSCD/203/

Here is my html example reference:

    <!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>

Thanks,

Karsten

Because the code in the fiddle runs on window onload and you are probably not running the code onload. — epascarello, Nov 03 '14 at 18:17

score 0 · Answer 1 · answered Nov 03 '14 at 18:26

0

Your fiddle uses Knockout.js, while I don't see your HTML using it. The answer to your question depends on if you are willing to use Knockout JS or you want the same functionality in JQuery only?

answered Nov 03 '14 at 18:26

Alexander Troshchenko

190
1
10

Hey Alexander, I am using bootstrap and the jquery it is provided with. I am up for trying it. I just downloaded knockout-3.2.0.js. I removed the reference to jquery. – Karsten Hilton Nov 03 '14 at 19:15
I don't think removing jQuery is necessary, just adding knockout should do the trick, and it looks like you've figure it out. – Alexander Troshchenko Nov 04 '14 at 17:43

score 0 · Answer 2 · answered Nov 03 '14 at 19:23

@Alexander Here is what I have done, I removed the reference to jquery and downloaded knockout-3.2.0.js and referenced it in the html. I placed the knockout and the .js file ping-function in a different folder away from jquery.

@epascarello I moved the references from the head to the body. I tested it in jfiddle first.

Anyway, here is the html code now, and I ma still getting the issue where the servers aren't showing, just tester shows on page.

    <!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>

Thanks,

Karsten

score 0 · Answer 3 · answered Nov 03 '14 at 20:28

I have fixed my issue. Thank you all for helping guide me in the right direction.

I placed the references at the end of the html and it is working fine now.

    <!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>

Thanks, Karsten

Ping functionality to display on HTML

3 Answers3