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

<p>MOST RECENT EDIT:
<strong>solution</strong></p>

<pre><code>&lt;script&gt;
$(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('&amp;');
    //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;
 });
});
&lt;/script&gt;
</code></pre>

<p>More Specifically:</p>

<p>I'm using Javascript and PHP to load some external PHP pages as sections in my main template. </p>

<p>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</p>

<p>1) downloads link is clicked</p>

<p>2) downloads.php appears</p>

<p>3) errors link  is clicked</p>

<p>4) errors.php appears below downloads.php</p>

<p>5) downloads link is clicked again</p>

<p>6) page just scrolls up to top of downloads.php</p>

<p>I need the same functionality as the example on the <a href="http://api.jquery.com/one/" rel="nofollow">documentation page</a> of .one() where every div can be clicked only once.</p>

<p>I also looked at <a href="http://stackoverflow.com/questions/3796207/using-one-with-live-jquery">Using .one() with .live() jQuery</a> and I especially liked the approach used in the accepted answer.</p>

<p>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 <code>link 1</code> 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.</p>

<p>I'm starting to think that the setInterval is wrong and I may use .one() for the whole <code>checkAnchor()</code> function and bind it to the <code>&lt;a&gt;</code> tags. I tried this but it's not working either :(((</p>

<p><strong>core.js</strong> - using .one()</p>

<pre><code>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&amp;id=2 in URL/?section=main&amp;id=2
        var splits = currentAnchor.substring(1).split('&amp;');
        //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();
        });


}
});
</code></pre>

<p>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.</p>

<p><strong>core.js</strong></p>

<pre><code>///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&amp;id=2 in URL/?section=main&amp;id=2
        var splits = currentAnchor.substring(1).split('&amp;');
        //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;


}
}
</code></pre>

<p>here is my </p>

<p><strong>callbacks.php</strong></p>

<pre><code>&lt;?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;
}
?&gt;
</code></pre>

<p>And my main file</p>

<p><strong>4100.php</strong></p>

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

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

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


}
?&gt;

&lt;/div&gt;

&lt;/body&gt;  
&lt;/html&gt;  
</code></pre>

<p><strong>4100dowloads.php</strong></p>

<pre><code>Downloads test page
</code></pre>

<p><strong>4100error.php</strong></p>

<pre><code>Errors test page
</code></pre>

<p>Also you can look at the test page here <a href="http://period3designs.com/phptest/1/4100.php" rel="nofollow">http://period3designs.com/phptest/1/4100.php</a></p>
