your header and player div will remain unchanged, only content div will be updated/changed when link is clicked.
2nd your js
// ajax to change content
function nextpage(id,type) //this is call when someone clicks a link
{
// ajax
$.ajax({
url: URL
}).done(function(data) {
$('#content').html(data);
// js code if you have some specific page related, for example
$('#list').select2();
});
}
3rd your content, pages, your pages should not have id#content div, your pages will be the content(music list, artist list etc) you wanted to display in content div. consider content div as a Page, and all your pages are content or data you want to display/load in page.
for more understanding, just consider stackoverflow, you have one column on left and rght and content div in the middle, and when you open any question middle div changes with the new content.
Problem :
I am developing a website which plays music. As the music needs to play continuously when navigating through out the website so I am using AJAX to load the content inside a div and keeping the player in an another div. Whenever someone plays any music then player page loads in the player div and the contents are being showed in the content div. Now when someone navigates from one page to another in the website then the content div is loaded with the new content of the other page and the player div remains same unless new music is needed to play. But sometimes, not always during navigating to other page the player becomes unavailable but the music still keeps playing in background and also after that if I try to make a new request for playing music then both the previous one and the new audio keeps playing. But there was no problem when I did the same using iFrame instead of AJAX. I am not able to figure out why these problems are occuring as I am completely new to AJAX.
This is the code for navigating to another page
function nextpage(id,type) //this is call when someone clicks a link
{
var URL = "list.php?id="+id+"&t="+type;
$.ajax({
url: URL
}).done(function(data) {
$('#content').html(data);
});
history.pushState(null,null,URL);
}
This is the function to call the player when someone clicks on any music on any page
function play(index,type)
{
var URL = "player.php?i="+index+"&t="+type;
$.ajax({
url: URL
}).done(function(data) {
$('#player').html(data);
});
}
This is the body for all of my pages, every page has a content div and player div and the contains of every page lies inside the content div
Could it be the problem for placing content and player div on every page?
Could anyone please help me to fix it, as I am trying AJAX for the first time.
Comments
Comment posted by Ahmed Sunny
if its duplicating then yes its a problem, just have one div for player and content, because you are updating content to same div, it will work.
Comment posted by MrinmoyMk
Yes, you are right. But there is an another problem by only one div for player and content. Suppose I have the both div in page1 and if any one directly goes to page2 by URL or if they reload the page2 then the fresh page2 will be loaded without the div for player and content
Comment posted by Ahmed Sunny
you need to understand one thing, you should have one page with content and player, the change of page is just virtual,or you can say for the user, but in actual its only changing content of the page but not the page. do if user open page 2 by url then get the param from url and pass it to your content function, and if the params are empty then load page one.
Comment posted by MrinmoyMk
I have total 7 pages with different types of data being showed. Supposed page1 shows music list, now if user wants to see the next music list then the content is changing but the page is same then I can do as you said. But now suppose page2 is showing artist list and now when user move to page2 then both the content and the page is changed. I am having problem for this page change.
Comment posted by MrinmoyMk
Thanks for the answer. I have changed the way it was before and now currently trying to do as my second plan. If it fails then I should try the above answer. Now I am including the player in every page by default so that if user loads any page directly still player is available. During changing the page I am trying to choose only the content div excluding the player div then again we will have only one content div and the initial player div.
Comment posted by Ahmed Sunny
yes, you just need to update or load html inside content div, which comes from your pages. so content div will always be there and only one..
Comment posted by MrinmoyMk
Could you please show me how can I select the content of a specific div of the other page. I am not able to do it. If I do this way var URL= “mp3.php?id=”+id+”&image=”+image+”&name=”+name+”&index=”+i+”&t=”+t; $(“#content”).load(URL+” #content”); then it works for parameters without special character but my parameters contain special character so I am unable to do it.
Comment posted by Ahmed Sunny
you can try
Comment posted by Ahmed Sunny
you can solve it by $(document).ready(function () { $(‘#content’).html(”); } you can hide them and only show them when clicked, or make them empty
