SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with a Link Ping Onclick event

    Okay, I have an oddball requirment for a one time use scenario.

    Expected functionality is:

    When a nav link (not all the links on the page) is clicked and goes to another machine, we want to ping the machine. If it pings properly, go to the link. If not go to an alternate link, probably a screen shot.

    Basically, I see that I need to trigger an onclick javascript function that then triggers a php system command to ping the href with a single packet

    PHP Code:
    <? system("ping -n 1 $href"); ?>
    where 1 is the number of packets and $host is the href that needs to be pinged.

    Can anyone point me in the right direction as to how to assemble this code and make php and javascript live together...

    Code:
    <script type="text/javascript"><!--
    document.onclick = function(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if (target.nodeName.toLowerCase() == 'a') {
    //I assume the system command to ping goes here...
    }
    }
    // -->
    </script>
    As always, thanks in advance for your help.

    Mark
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do it with Ajax, assuming the PHP page returns true or false from its ping.

  3. #3
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hmmm...

    I assume that's because we need "stuff" to happen asynchronously...

    Is there a tuturial on how to work with Ajax somewhere that might send me down the right road? I can certainly get the php script to return a true or false if it doesn't already...

    Thanks...
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Loads, take your pick, or use something like Prototype which has built-in Ajax functionality.

  5. #5
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm in shock...

    Okay, here's the Ajax script - but it's currently returning the full text of the ping response, not my true or false...

    Notes:

    1. You can ping a server or url - not a webpage - so it's got to strip the actual page info out, or it returns an error.

    The PHP Script
    PHP Code:
    <?PHP
    $host 
    $_GET['href'];
    if (@
    system("ping -n 1 $host")) {
    return 
    true;
    }
    else {
    return 
    false;
    }
    ?>
    The Ajax bit...

    Code:
      
    <script type="text/javascript"><!--
    /* The variable http will hold our new XMLHttpRequest object. */
    function createRequestObject(){
     var request_o; //declare the variable to hold the object.
     var browser = navigator.appName; //find the browser name
     if(browser == "Microsoft Internet Explorer"){
      /* Create the object using MSIE's method */
      request_o = new ActiveXObject("Microsoft.XMLHTTP");
     }else{
      /* Create the object using other browser's method */
      request_o = new XMLHttpRequest();
     }
     return request_o; //return the object
    }
    /* You can get more specific with version information by using 
     parseInt(navigator.appVersion)
     Which will extract an integer value containing the version 
     of the browser being used.
    */
    var http = createRequestObject(); 
    
    /* Function called to get the product categories list */
    function getProducts(){
     /* Create the request. The first argument to the open function is the method (POST/GET),
      and the second argument is the url... 
      document contains references to all items on the page
      We can reference document.form_category_select.select_category_select and we will
      be referencing the dropdown list. The selectedIndex property will give us the 
      index of the selected item. 
     */
     //grab the link to check
     var thisLink = document.getElementById("_link");
     //thisLink = 'www.atex.com';
    
     if (thisLink == 'http://serverbase:9080/aoa') {
     thisServer = 'serverbase';
     }
     
      http.open('get', 'pingme.php?href=' + thisServer);
     /* Define a function to call once a response has been received. This will be our
      handleProductCategories function that we define below. */
     http.onreadystatechange = handleProducts; 
     /* Send the data. We use something other than null when we are sending using the POST
      method. */
     http.send(null);
    }
    /* Function called to handle the list that was returned from the internal_request.php file.. */
    function handleProducts(){
     /* Make sure that the transaction has finished. The XMLHttpRequest object 
      has a property called readyState with several states:
      0: Uninitialized
      1: Loading
      2: Loaded
      3: Interactive
      4: Finished */
     if(http.readyState == 4){ //Finished loading the response
      /* We have got the response from the server-side script,
       let's see just what it was. using the responseText property of 
       the XMLHttpRequest object. */
      var response = http.responseText;
      /* And now we want to change the product_categories <div> content.
       we do this using an ability to get/change the content of a page element 
       that we can find: innerHTML. */
      alert(response);
      document.getElementById('product_cage').innerHTML = response;
      
     }
    }
    
    // -->
    </script>
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  6. #6
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mcahill
    Okay, here's the Ajax script - but it's currently returning the full text of the ping response, not my true or false...

    The PHP Script
    PHP Code:
    <?PHP
    $host 
    $_GET['href'];
    if (@
    system("ping -n 1 $host")) {
    return 
    true;
    }
    else {
    return 
    false;
    }
    ?>
    Don't treat the return value as if it is a function - Ajax wants the actual output of the page, so use echo "true" or echo "false" instead. That will then be in the responseText of the XMLHttpRequest object.

  7. #7
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Excellent!

    It's getting close. Basic functionality is there, one minor tweak needed...

    My only problem now is that for multiple links, I shouldn't be using document.getElementById("_link") to pass in the url. Any thoughts on that appreciated...

    But the basics are here and working! Much thanks Buddy B.!


    PHP Code:
    <?PHP
    $host 
    $_GET['href'];
    if (@
    system("ping -n 1 $host")) {
    echo 
    'live=true';
    }
    else {
    echo 
    'live=false';
    }
    ?>
    The ajax bit is now opening a new window with the href if it's open, as well as creating an alert telling us it's up. If not, then it sends us to an alternate location, and tells us it's down.

    Code:
    <script type="text/javascript"><!--
    /* The variable http will hold our new XMLHttpRequest object. */
    function createRequestObject(){
    var request_o; //declare the variable to hold the object.
    var browser = navigator.appName; //find the browser name
    if(browser == "Microsoft Internet Explorer"){
    /* Create the object using MSIE's method */
    request_o = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
    /* Create the object using other browser's method */
    request_o = new XMLHttpRequest();
    }
    return request_o; //return the object
    }
    /* You can get more specific with version information by using 
    parseInt(navigator.appVersion)
    Which will extract an integer value containing the version 
    of the browser being used.
    */
    var http = createRequestObject(); 
     
    /* Function called to get the product categories list */
    function getProducts(){
    /* Create the request. The first argument to the open function is the method (POST/GET),
    and the second argument is the url... 
    document contains references to all items on the page
    We can reference document.form_category_select.select_category_select and we will
    be referencing the dropdown list. The selectedIndex property will give us the 
    index of the selected item. 
    */
    //grab the link to check
    var thisLink = document.getElementById("_link");
    //thisLink = 'www.atex.com';
     
    if (thisLink == 'http://serverbase:9080/aoa') {
    thisServer = 'serverbase';
    thisAltHref = 'www.yahoo.com';
    }
    if (thisLink == 'http://another.server.somewhere/index.php') {
    thisServer = 'another.server.somewhere';
    thisAltHref = 'www.yahoo.com';
    }
    //document.write(thisLink);
    http.open('get', 'pingme.php?href=' + thisServer);
    /* Define a function to call once a response has been received. This will be our
    handleProductCategories function that we define below. */
    http.onreadystatechange = handleProducts; 
    /* Send the data. We use something other than null when we are sending using the POST
    method. */
    http.send(null);
    }
    /* Function called to handle the list that was returned from the internal_request.php file.. */
    function handleProducts(){
    /* Make sure that the transaction has finished. The XMLHttpRequest object 
    has a property called readyState with several states:
    0: Uninitialized
    1: Loading
    2: Loaded
    3: Interactive
    4: Finished */
    if(http.readyState == 4){ //Finished loading the response
    /* We have got the response from the server-side script,
    let's see just what it was. using the responseText property of 
    the XMLHttpRequest object. */
    var response = http.responseText;
    /* And now we want to change the product_categories <div> content.
    we do this using an ability to get/change the content of a page element 
    that we can find: innerHTML. */
     
    var is_live=response.indexOf('live=true');
    var thisLink = document.getElementById("_link");
    if (is_live != -1) {
    alert(thisLink + " is Up - Web Service Availability is Unconfirmed.");
    window.open(thisLink,'jav','width=300,height=200,resizable=yes'); 
    }
    else {
    alert(thisLink + ' This Server is not online at this time.');
    window.open(thisAltHref,'jav','width=300,height=200,resizable=yes'); 
    } 
    //alert(response);
    }
    }
     
    // -->
    </script>
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •