CODEWITHSUNDEEP
javascriptjqueryhtmlajax
rez
rez

Reputation: 95

jQuery, AJAX: Make part of a page ( <div> ) not refresh on website navigation

I have a website that contains songs, and also an .mp3 player on the bottom.

When you click a song the player starts playing the song, but when you try to navigate to the website and lets say clicking an album, you will naturally get redirected to www.mysite.com/?album=test and as a result, the song will stop playing.

I am trying to make the player, (basically the <div> in which the player is inside) no reload, everytime i click an <a href> or a button. To make it clear, you can see https://soundcloud.com/ for example. This is how i want my site to behave like.

Now, if I use jQueries on every <a href>, the URL of the page will remain the same. Which i don't want to happen. Also i heard that iframes, is a bad solution. So, how does https://soundcloud.com/ and similar websites achieve what i am trying to do ? Somebody knows how to do this ?

Upvotes: 0

Views: 242

Answers (1)

Joseph
Joseph

Reputation: 119847

The way I see SoundCloud works is with AJAX (and yes, you can use jQuery to do that). So you technically remain on the same page. With regards to the "same URL", you can actually manipulate the history and URL of the browser using the History API.

So each navigation, your JS should simulate leaving to another page by manipulating history, making the browser think it left the page. Another bit of JS tracks the url, called a router, to know what to do when a certain url pattern is observed. For example, if I am in route /artists/foo, then the page should AJAX in the data for artist "foo".

Upvotes: 1

Related Questions