Shubham Batra
Shubham Batra

Reputation: 2375

Go to other link if a web page is not available in HTML/JavaScript

Is there any option in HTML or JavaScript for when a user clicks on a link, if that link is available then done, if not then goes on another link.

Here is part of my code:

<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
 <ul>
    <li><a href="/returns"><span class="glyphicon glyphicon-log-in"></span> Returns</a></li>
    <li  class="active"><a href="/pay_reco" target="_blank"><span class="glyphicon glyphicon-log-in"></span> Payment Recouncillation </a></li>
    <li ><a href="/pay_get" target="_blank"><span class="glyphicon glyphicon-log-in"></span> Payment Get </a></li>
    <li><a href="/import"><span class="glyphicon glyphicon-log-in"></span> Import </a></li>
    <li>

<!-- Here I want to add  Two link in a href tag if first link does not 

available (web page not available) then it go to another link
        <!-- <object data="http:/127.0.0.1:9004" type="href" > -->
        <a target="_blank" href="http://127.0.0.1:9001">
            <span class="glyphicon glyphicon-log-in"></span>
             ComPare
        </a>
    </li>
    <li><a target="_blank" href="http://127.0.0.1:9000"><span class="glyphicon glyphicon-log-in"></span> Portal </a></li>

Upvotes: 7

Views: 740

Answers (1)

Furkan Başaran
Furkan Başaran

Reputation: 1947

Step 1: Update your HTML code like below.

<a id="selector" href="javascript:void(0)">
            <span class="glyphicon glyphicon-log-in"></span>
             ComPare
</a>

Step 2: After update your HTML, handle click event with jQuery and send ajax request, if response ok, go link 1, or another case you route to user another url.

$(function(){
    $('body').on('click', '#selector', function() {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:9001",    
            complete: function(xhr, textStatus) {
               if(xhr.status == 200) window.location = "http://127.0.0.1:9001";
               else window.location = "http://127.0.0.1:9004";
            } 
        });
    })
})

I created little jQuery plugin for this case on here

With AnotherJS:

HTML:

<a href="http://127.0.0.1:9001" data-another="http://127.0.0.1:9004">Link Text</a>

Javascript:

$(function() {
   $('a').another();
})

That's all! :)

Upvotes: 5

Related Questions