CODEWITHSUNDEEP
javascriptjqueryhtml
Banny
Banny

Reputation: 841

JQuery links to open new window

I'm trying to improve a music player i've created for my website by moving in from in-browser to a separate pop-up window, i've created/manipulated code i've found to make the jQuery take the href value and send it to a new window, only issue is on clicking the <a> tag, it performs the href click and jQuery action (as it would do). I'm trying to find an efficient way to make it so that if a user has JavaScript disabled, they can at least use the music player in a new tab rather than not being able to listen at all, but i'm unsure of how to go about this. Would setting the elements href into a var, then removing the href attribute work? Or would this cause errors?

Example HTML:

<a href="this_page.cfm?song=1" target="_blank" class="playSong" id="#artist# - #song#">Play Track</a>

Example jQuery: 

<script type="text/javascript">
    $(document).ready(function(){
        $(".playSong").click(function(){
            var url = $(this).attr('href');
            var windowName = $(this).attr('id');

            window.open(url, windowName, "height=300,width=400");
        });
    });
</script>

Upvotes: 1

Views: 28142

Answers (4)

mplungjan
mplungjan

Reputation: 178411

Here is the actual complete answer to your questions

How to make the link work in a new window if javascript is disabled or a popup blocker is active

$(function(){
  $(".playSong").on("click",function(e){
    var w = window.open(this.href, this.target, "height=300,width=400");
    if (w) e.preventDefault(); // prevent link but only if not blocked
  });
});

Upvotes: 0

ServerBloke
ServerBloke

Reputation: 852

Using a data-* attribute would be better than storing song and artist data in the ID.

<a href="this_page.cfm?song=1" target="_blank" class="playSong" data-info="#artist# - #song#">Play Track</a>

.preventDefault() or return false; can be used to stop the browser from following the link if Javascript is enabled:

$(".playSong").click(function(){
    var url = $(this).attr('href');
    var windowName = $(this).data('info'); // <-- using .data()

    window.open(url, windowName, "height=300,width=400");
    return false;
});

Upvotes: 1

Prabhuram
Prabhuram

Reputation: 1268

You need to give return false upon clicking the link. As follows :

    $(document).ready(function(){
        $(".playSong").click(function(){
            var url = $(this).attr('href');
            var windowName = $(this).attr('id');

            window.open(url, windowName, "height=300,width=400");
            return false;
        });
    });

Upvotes: 0

Spokey
Spokey

Reputation: 10994

Alternatively use e.preventDefault() or return false

$(document).ready(function(){
    $(".playSong").click(function(e){
        e.preventDefault(); // this will prevent the browser to redirect to the href
        // if js is disabled nothing should change and the link will work normally
        var url = $(this).attr('href');
        var windowName = $(this).attr('id');
        window.open(url, windowName, "height=300,width=400");
    });
});

Upvotes: 7

Related Questions