セットアップの詳細を読むのが面倒な場合は、最後の 2 つの段落にスキップしてください...
私は、直線的な PHP+JavaScript CMS から、jQuery と Ajax の機能を備えたオブジェクト指向の PHP モデルに移行しています。次の設定で、できるだけ多くのコードを集中化しようとしています。
index.php
- (require_once() を介して) setup.php (一般的な変数 (ディレクトリなど)、定数、設定、デバッグのオンとオフの切り替えなどへの簡単なアクセス)、actions.php (jQuery.ajax() によって使用されるファイルへの呼び出し)データを送信する関数またはオブジェクトを決定します)、functions.php (その他の関数)、objects.php (通常、MySQL データベースとの間で受信/送信データを準備するために使用されるオブジェクト)
- functions.js、jQuery (Google から)、tiny_mce、fancybox を呼び出します (これらの最後の 2 つは問題の変数ではない可能性がありますが、いずれにせよ言及したいと思います)
- jQuery.ajax() がコンテンツをロードする場所を持つように div#content を含めます
functions.js
- $(#content).html... を介して index.php の div#content にコンテンツをロードするためのスクリプトが含まれています。
- フォーム コンテンツを準備するためのスクリプトが含まれています。.ajax() を使用して actions.php にデータを送信し、サーバーからの成功またはエラー メッセージを受け取り、ユーザーにメッセージを表示します。
- フォームに .live('submit') メソッドを追加する doc.ready 関数が含まれています
/inc/ フォルダ
- .ajax() を介してインデックスの div#content にロードするための PHP ファイル (主にフォーム) が含まれています
ほとんどすべてが正常に動作します。機能しない部分は、インデックスの div#content にロードされたフォームが、インデックスによって既にロードされているさまざまな PHP ファイル (つまり、setup.php および functions.php) にアクセスできないことです。これらのフォームは、それ自体を設定するために時折機能を必要とします。
たとえば、ユーザーが編集または削除できるように、Web サイトのすべてのページを表示する「フォーム」があります。私の古い CMS モデルでは、その関数 (getPages() と呼びましょう) を functions.php に格納して、ページが単純に getPages(); をエコーできるようにしていました。
現在、フォームは getPages() 関数にアクセスできません。これは、.ajax() によってロードされたファイルが、index.php によってロードされた functions.php を認識しないためです。これを回避するには、require_once('functions.php'); を追加します。/inc/ フォルダー内のすべてのファイルの先頭に、しかし私はむしろしたくありません。私は自分のフォームが単なるフォームであることを望んでいます。
以前は、PHP と POST/GET だけでフォームを所定の位置にロードしていました。これにより、インデックス ヘッダー、必要なファイル、および新しいコンテンツが 1 つのまとまりのあるファミリとして再ロードされます。では、Ajax とそのリロードの欠如を組み合わせて、どうすれば同じ結果を得ることができるでしょうか? それは可能ですか？私はこれについて間違った方法で進んでいますか？
いくつかのメモ:
- もしあれば、jQuery、JavaScript、または PHP ソリューションを好むでしょう。私がやっていることのほとんどはすでに私にとって新しいものなので、別のライブラリを追加すると頭が爆発するかもしれません. …でもそれしかないなら… やるべきことはやる。
- 必要に応じていくつかのコードをコピーして貼り付けることができますが、オンラインで利用できるファイルはありません。それは私のXAMPP開発サーバーにあります
- これらのファイルはすべて私のサーバー上にあるため、考慮すべきクロスドメイン ビッドネスは明らかに存在しません。
前もって感謝します！
index.php (このファイルのすべてが正常に動作するようです)...
<?php
require_once('setup.php');
require_once('functions.php'); //functions.php calls to objects.php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
<link href="styles/styles.css" type="text/css" media="screen" rel="stylesheet" />
<link href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
...
<script src="js/functions.js"></script>
</head>
<body>
<div id="pagewrapper">
<div id="header">unimportant header content</div><!-- /header -->
<div id="nav_area">
<ul id="nav">
<li class="parent">Pages</li>
<ul class="children">
<li class="child" onclick="navto('inc/add_page.php');">Add a Page</li>
</ul>
</ul>
</div><!-- mana_nav_area -->
<div id="content"><!-- This is the DIV where the forms will appear -->
<?php
echo getPagesAsSelect(); //the function works here, although it doesn't make any sense to put it here. It's only here for illustrative purposes.
?>
</div><!-- mana_content -->
</div><!-- pagewrapper -->
</body>
</html>
functions.js (このファイルのすべてが正常に動作しているようです)...
jQuery(document).ready(function(){
// called by index.php, this function adds an event handler to our example form
...
$("#add_page_form").live("submit", function () { add_page(); return false; });
...
});
function navto(destination) {
// use JQuery's ajax method to control main navigation
var request = $.ajax({
url: destination
});
request.done(function(msg) {
$("#content").html( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
function add_page() {
// this function grabs the data from the add_page_form and sends it to actions.php
// actions.php determines what function or object to send it to
// JS-based security is not an issue at this time
var serialized = $('#add_page_form').serialize();
var dataString = 'action=add_page&' + serialized;
var destination = 'actions.php';
var jqXHR = $.ajax({
type: "GET",
url: destination,
data: dataString,
cache: true,
error: function(response) {
$('msg').append(response);
},
success: function(response) {
$('#msg').append(response);
}
});
return false;
}
ページの例: ユーザーに自分のサイトのページを作成する機会を与える add_page.php。ユーザーの新しいページが別のページのサブページであるかどうかを判断するために (以下のフォームでは親と呼ばれる)、a<SELECT>が作成され<OPTION>、PHP 関数 (functions.php にあります) を介して sが取り込まれます。ファイル) getPagesAsSelect() を呼び出します。
<?php
// if I leave this code in place, it works
require_once('../functions.php'); //(you may recall that this file is in an /inc folder)
// this require_once() is the one I'd like to remove if possible
?>
<fieldset id="fieldset">
<legend>Add a Page</legend>
<form id="add_page_form" name="add_page" action="" method="get">
<label for="name">Page Name:</label>
<input type="text" id="name" name="name" value="" /><br />
<label for="parent">Parent:</label>
<select id="parent" name="parent">
<option value="0">No parent</option>
<?php
echo getPagesAsSelect();
// getPagesAsSelect() queries the database and returns eligible
// pages as a series of <option value="pageID">pageName</option>
// Unless functions.php is loaded on this page, this call fails
// and the page stops loading here
?>
</select>
<br />
<input id="submit_add_page" type="submit" name="add_page" value="Submit" class="save" /><input type="reset" value="Cancel" class="cancel" />
</form>
<div id="msg"><!-- where success or error messages show upon completion --></div>
</fieldset>
要約すると、.ajax() は上記の add_page.php を index.php の div#content に取り込みます。functions.php ファイルは index.php によって読み込まれますが、.ajax() を使用すると、新しいコンテンツが必要な関数を呼び出すことができなくなります。
すべてが正常に機能していることに疑いの余地はありませんが、.ajax() によってロードされるすべてのファイルで functions.php を要求するという私の回避策のファンではありません。もしあれば、私は代替手段を探しています。