Question

I’m working with AJAX on a website and I’m currently making some pages to load on a certain div: “pageContent”. Now I have another content I want to be opened on another div: “reproductor”. I want to open ‘page’ in ‘pageContent’ div and ‘play’ in ‘reproductor’ div. I don’t know how to modify my script.js and load_page.php files in order to make it work. Here’s what I got:

_HTML:

<script type="text/javascript" src="js/script.js"></script>
<a href="#page1">PAGE</a>
<a href="#play1">PLAY</a>
<div id ="pageContent"></div>
<div id="reproductor"></div>

_script.js:

var default_content="";
$(document).ready(function(){

    checkURL();
    $('ul li a').click(function (e){
        checkURL(this.hash);
    });

    default_content = $('#pageContent').html();
    setInterval("checkURL()",250);

});

var lasturl="";
function checkURL(hash)
{
    if(!hash) hash=window.location.hash;

    if(hash != lasturl)
    {
        lasturl=hash;
        if(hash=="")
            $('#pageContent').html(default_content);
        else
        loadPage(hash);
    }
}

function loadPage(url)
{
    url=url.replace('#page','');
    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }   
    });
}

_{load_page.php:}

<?php

if(!$_POST['page']) die("0");

$page = (int)$_POST['page'];

if(file_exists('pages/page_'.$page.'.html'))
    echo file_get_contents('pages/page_'.$page.'.html');
else 
    echo 'There is no such page!';
?>

I forgot to mention: I have my ‘pages’ content in a folder named ‘pages’ and my ‘play’ content in another named ‘plays’.
Thanks for your help!

Answer 1

If I understand, your have two groups of links (for pages and a play list) each one to be loaded in a different container. Here is something you can try: mainly I eliminated the global variables and put the current hash inside each containter’s data, and separated the management of the two groups of links.

In this code I supposed you have a separate load_play.php file. If not, then you can use the same page for both kind of links, but you’ll have to merge loadPlay with loadPage, change loadPage(newHash) to loadPage(newHash, linkType) and change the ajax parameter from 'page='+newHash to 'number='+newHash+'&type='+linkType, and do the corresponding changes server side in your PHP page. I would recommend you to create two separate PHP files in order to manage the two types of content.

I remember you where doing something with the hash of the current page’s url, you can still set it in the ajax’s success, inside the loadPage function.

Here is a working sfiddle example with some console calls (open browser’s console) but without the ajax call.

UPDATE:

I updated the code, so your can manage the dynamically added links (new content loaded via AJAX) and fixed the management of urls with hashes, which was broken because of the new code.

<div id="#page">
    <a href="#page1" class="pageLink">PAGE 1</a>
    <a href="#page2" class="pageLink">PAGE 2</a>
    <a href="#play1" class="playLink">PLAY 1</a>
    <a href="#play2" class="playLink">PLAY 2</a>
    <a href="#play3" class="playLink">PLAY 3</a>
    <div id ="pageContent"></div>
    <div id="reproductor"></div>
</div>

And this is the javascript:

$(document).ready(function(){
    $('#pageContent').data('currentPage', '');
    $('#reproductor').data('currentPlay', '');

    //This will allow it to work even on dynamically created links
    $('#page').on('click', '.pageLink', function (e){
        loadPage(this.hash);
    });

    $('#page').on('click', '.playLink', function (e){
        loadPlay(this.hash);
    });

    //And this is for managing the urls with hashes (for markers)
    var urlLocation = location.hash;
    if(urlLocation.indexOf("#page") > -1){
        $('.pageLink[href='+ urlLocation +']').trigger('click')
    }

});

function loadPage(newHash)
{
    //This is the current Page
    var curHash = $('#pageContent').data('currentPage');
    //and this is the new one
    newHash = newHash.replace('#page', '');

    if(curHash===newHash){
        //If already loaded: do nothing 
        return
    }

    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+newHash,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg).data('currentPage',newHash);
                $('#loading').css('visibility','hidden');
            }
        }   
    });
}

function loadPlay(newHash)
{//Similar to loadPage...
    var curHash = $('#reproductor').data('currentPlay');
    newHash = newHash.replace('#play', '');

    if(curHash===newHash){return}

    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_play.php",
        data: 'play='+newHash,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                $('#reproductor').html(msg).data('currentPlay',newHash);
                $('#loading').css('visibility','hidden');
            }
        }   
    });
}

Check this and comment if this is what you need, or I got something wrong 🙂