Jquery issue on changing the url or loading the url

Question

With the below script I was trying to load the output of the variable "url" in the browser on clicking the anchor tag, while executing it shows the expected result path in the alert box but it loads the path mentioned in the anchor tag. I want to load the output path in the browser's same tab. please help me to solve this.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){   
        $("a").on('click', function(){
            var reqURL = window.location.href;
            var hrefVal = $(this).attr('href');
            var url;        
            if(hrefVal.indexOf("http")== -1){
                if(reqURL.indexOf("/ca-en") != -1){
                    url="http://www.mywebsite.com/site2"+hrefVal;
                }else if(reqURL.indexOf("/ca-fr")> -1){
                    url="http://www.mywebsite.com/site3"+hrefVal;
                }else{
                    url="http://www.mywebsite.com"+hrefVal;     
                }
                alert(url);
                window.open(url,"_self");
            }       
        });
    });
    </script>
</head>

<body>
    <ul>
    <li>
        <a class="category" href="/home.html">home<span class="icon plus"></span></a>
        <ul class="submenu">
            <li><a href="/home/abc.html">abc</a></li>
            <li><a href="/home/xyz.html">xyz</a></li>
            <li><a href="/home/tam.html">tam</a></li>
        </ul>
    </li>
    </ul>
</body>
</html>

So you want to see the content of the url on the browser page, and want to see the url on the address bar. This is exactly what a simple `` does. — Viktor, Aug 18 '17 at 12:40
You seem very confused about the element. Maybe some reading is necessary? — user5014677, Aug 18 '17 at 12:44
@viktor need to see or update the url only to the address bar — thamizhinian, Aug 18 '17 at 12:46
If you just want to change the URL. Check this answer https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page — Pugazh, Aug 18 '17 at 12:48
@Viktor simply, now in address bar i am seeing file:///C:/home.html but i want to see http://www.mywebsite.com/home.html — thamizhinian, Aug 18 '17 at 12:48
@thamizhinian check my answer. The issue is about default behavior of anchor tag. — RaJesh RiJo, Aug 18 '17 at 12:53
also if i am adding window.open(url); it loads the page in the another window so i added window.open(url,"_self"); facing the same issue mentioned in the top — thamizhinian, Aug 18 '17 at 12:56

score 0 · Answer 1 · answered Aug 18 '17 at 12:49

You need to add onclick function on anchor tag. otherwise it will always redirect to href path of anchor tag before the javascrip window.open load.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>

    function redirect(parameter){
            var reqURL = window.location.href;
            var hrefVal = parameter;
            var url;        
            if(hrefVal.indexOf("http")== -1){
                if(reqURL.indexOf("/ca-en") != -1){
                    url="http://www.mywebsite.com/site2"+hrefVal;
                }else if(reqURL.indexOf("/ca-fr")> -1){
                    url="http://www.mywebsite.com/site3"+hrefVal;
                }else{
                    url="http://www.mywebsite.com"+hrefVal;     
                }
                alert(url);
                window.open(url,"_self");

            }
    }

    </script>
</head>

<body>
    <ul>
    <li>
        <a class="category" href="/home.html">home<span class="icon plus"></span></a>
        <ul class="submenu">
            <li><a href="#" onclick="redirect('/home/abc.html')">abc</a></li>
            <li><a href="#" onclick="redirect('/home/xyz.html')">xyz</a></li>
            <li><a href="#" onclick="redirect('/home/tam.html')">tam</a></li>
        </ul>
    </li>
    </ul>
</body>
</html>

score 0 · Answer 2 · answered Aug 18 '17 at 12:51

- <li><a href="/home/abc.html">abc</a></li>

+ <li><a href="javascript:void(0);" data-url="/home/abc.html">abc</a></li>


- var hrefVal = $(this).attr('href');

+ var hrefVal = $(this).data('url');

Very simple..

score 0 · Answer 3 · answered Aug 18 '17 at 12:51

The issue is about when you are using <a> tag, it used to redirect to whatever you value you given in href. So before executing your script you are suppose to prevent default behavior of you <a> tag.

Use event.preventDefault() in your onclick script. This prevent default redirection of your <a> tag.

Find the fiddler for your reference.

Hope it helps.

score 0 · Accepted Answer · answered Aug 18 '17 at 12:55

The default behaviour of the anchor tag has to be stopped prior to executing your custom behaviour logic. your code can be written as follows:

<script>
$(function(){   
    $("a").on('click', function(e){
        e.preventDefault();
        var reqURL = window.location.href;
        var hrefVal = $(this).attr('href');
        var url;        
        if(hrefVal.indexOf("http")== -1){
            if(reqURL.indexOf("/ca-en") != -1){
                url="http://www.mywebsite.com/site2"+hrefVal;
            }else if(reqURL.indexOf("/ca-fr")> -1){
                url="http://www.mywebsite.com/site3"+hrefVal;
            }else{
                url="http://www.mywebsite.com"+hrefVal;     
            }
            alert(url);
            window.open(url,"_self");
        }       
    });
});
</script>

@thamizhinian I posted the same 4 minutes before this ans with fiddler example! have you seen or not? — RaJesh RiJo, Aug 18 '17 at 13:15

Jquery issue on changing the url or loading the url

4 Answers4