質問:外部のphpファイルが1回だけ追加されるように、.get()を.one()(または.live())と組み合わせて使用する適切な方法は何ですか?
最近の編集: ソリューション
<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>
すなわち:
私はJavascriptとPHPを使用して、メインテンプレートのセクションとしていくつかの外部PHPページをロードしています。
私はswitchとappend()を使用しているので、含まれているファイルは追加し続けます。すべてのファイルを1回だけ追加できるようにする必要があります。これが私が望んでいるシナリオです
1)ダウンロードリンクをクリックします
2)downloads.phpが表示されます
3)エラーリンクがクリックされた
4)errors.phpがdownloads.phpの下に表示されます
5)ダウンロードリンクをもう一度クリックします
6)ページはdownloads.phpの一番上までスクロールします
.one()のドキュメントページの例と同じ機能が必要です。ここでは、すべてのdivを1回だけクリックできます。
また、 .one()と.live()jQueryの使用についても調べましたが、受け入れられた回答で使用されているアプローチが特に気に入りました。
以下に示すようにブールフラグを使用してイライラしましたが、同じリンクでの連続クリックを1つに制限するだけでした。したがって、1つをlink 1
複数回クリックすると、ページ1.phpが1回だけ表示されますが、リンク1、リンク2、リンク1をもう一度クリックすると、ページ1.phpが表示され、ページ2.phpを追加して、別のページを追加します。 1.phpページ。
setIntervalが間違っていると思い始めており、関数全体に.one()を使用して、タグcheckAnchor()
にバインドする場合があります。<a>
私はこれを試しましたが、どちらも機能していません:(((
core.js-.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();
});
}
});
アプローチとして私が気に入ったもう1つの点は、ページの名前を配列に追加し、その配列をチェックして、ページがまだ表示されていないことを確認することです。.push()を使用して配列をページ名で埋めることができましたが、その中の値を検索するときに行き止まりになりました。あなたがそれがどのように見えるべきかについての考えを持っているなら、それも非常に役立つでしょう。
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;
}
}
これが私の
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;
}
?>
そして私のメインファイル
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
また、ここでテストページを見ることができますhttp://period3designs.com/phptest/1/4100.php