Question

QUESTION: What is the proper way to use .get() in conjunction with .one() (or .live()) so that an external php file is appended only once?

MOST RECENT EDIT:
solution

<script>
$(document).ready(function(){
$('.tree li a').one("click", function() {
    var currentAnchor = $('.tree li a').attr('href');
    if(!currentAnchor){
        var query = "page=1";
    }
    else
    {
    var splits = currentAnchor.substring(1).split('&');
    //Get the section
    var page = splits[0];
    delete splits[0];
    var query = "page=" + page;
    alert ("page=" + page);
    }
    //Send the petition
    $("#loading").show();
    $.get("callbacks.php",query, function(data){
        $("#content").append(data);
        $("#loading").hide();
    });       
    return false;
 });
});
</script>

More Specifically:

I’m using Javascript and PHP to load some external PHP pages as sections in my main template.

I’m using a switch and append() so the included files keep appending. I need every file to be able to be appended ONLY ONCE. Here is the scenario as I’d like it to happen

1) downloads link is clicked

2) downloads.php appears

3) errors link is clicked

4) errors.php appears below downloads.php

5) downloads link is clicked again

6) page just scrolls up to top of downloads.php

I need the same functionality as the example on the documentation page of .one() where every div can be clicked only once.

I also looked at Using .one() with .live() jQuery and I especially liked the approach used in the accepted answer.

Iried using boolean flag as suggested below but all it did was limit my consecutive clicks on the same link to one. So if I click one link 1 multiple times it’ll show page 1.php only once but if I click on link 1, then link 2, then link 1 again it will display page 1.php, then append page 2.php and append another page 1.php.

I’m starting to think that the setInterval is wrong and I may use .one() for the whole checkAnchor() function and bind it to the <a> tags. I tried this but it’s not working either :(((

core.js – using .one()

var currentAnchor = null;
//$(document).ready(checkAnchor);
//Function which chek if there are anchor changes, if there are, sends the ajax petition checkAnchor
$("a").one("click", function (){
//Check if it has changes
if(currentAnchor != document.location.hash){
    currentAnchor = document.location.hash;
    //if there is not anchor, the loads the default section
    if(!currentAnchor){
        query = "page=1";
    }
    else
    {
        //Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
        var splits = currentAnchor.substring(1).split('&');
        //Get the section
        var page = splits[0];
        delete splits[0];
        var query = "page=" + page;

    }
    alert ("hello");
    //Send the petition
    $("#loading").show();

    $.get("callbacks.php",query, function(data){
        $("#content").append(data);
        $("#loading").hide();
        });


}
});

The other thing I liked as an approach is adding the names of the pages to an array and then checking that array to make sure the page wasn’t displayed yet. I managed to fill up an array with the page names using .push() but I hit a dead end when looking up for a value in it. If you have an idea how that’s supposed to look like that’d be very helpful as well.

core.js

///On load page
var contentLoaded;
$().ready(function(){
contentLoaded = false;
setInterval("checkAnchor()", 300);
    alert (contentLoaded);
});
var currentAnchor = null;

//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
//Check if it has changes
if(currentAnchor != document.location.hash){
    currentAnchor = document.location.hash;
    //if there is not anchor, the loads the default section
    if(!currentAnchor){
        query = "page=1";
    }
    else
    {
        //Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
        var splits = currentAnchor.substring(1).split('&');
        //Get the section
        var page = splits[0];
        delete splits[0];
        var query = "page=" + page;

    }
    alert ("hello");
    //Send the petition
    $("#loading").show();

    alert (contentLoaded);

    if (!contentLoaded){
    $.get("callbacks.php",query, function(data){
        $("#content").append(data);
        $("#loading").hide();
        });

        alert (contentLoaded);

    }
    contentLoaded = true;


}
}

here is my

callbacks.php

<?php  
//Captures the petition and load the suitable section  
switch($_GET['page']){  
case "4100errors" : 
  include 'template/4100errors.php';
  break;
case "4100downloads" :      
 include 'template/4100downloads.php';
  break;
}
?>

And my main file

4100.php

<?php
include 'template/header.php';
include 'template/4100menu.php';
include 'template/log.php';
include 'template/links.php';
include 'template/4100breadcrumbs.php';
?>
<div class="left-widget">
<div style="display:none; position:absolute; top:-9999; z-index:-100;">
<a href="4100.php?page=4100downloads"></a>
<a href="4100.php?page=4100errors"></a>
</div>

<div id="side-nav-bar" class="Mwidget">
    <h3>Contents</h3>
        <ul class="tree">
            <li><a href="#4100downloads" class="links" >Downloads</a>        </li>
            <li><a href="#4100errors" class="links">Error  Troubleshooting</a></li>
        </ul>
   </div>
   </div>

    <div id="content" style="margin-top:100px; margin-left:300px;">  
  <?
switch ($_GET['page']) 
{
case "4100downloads": include 'template/4100downloads.php'; break;
case "4100errors": include 'template/4100errors.php'; break;


}
?>

</div>

</body>  
</html>  

4100dowloads.php

Downloads test page

4100error.php

Errors test page

Also you can look at the test page here http://period3designs.com/phptest/1/4100.php

Answer 1

“What is the proper way to use .get() in conjunction with .one() (or .live()) so that an external php file is appended only once?”

.one() and live() really have little to do with $.get. They’re only for event handling.

If you intend to run the code every 50ms as you are, but want to replace the current content, then use .html() instead of .append().

$("#content").html(data);

This will overwrite the old content.

---

I assume you’re aware of this, but just to be sure, your code is running at an interval because of this…

$().ready(function(){
    setInterval("checkAnchor()", 50); // better--> setInterval(checkAnchor, 50);
});

If you only want it once on document load, then do this…

$(document).ready(checkAnchor);