時間の経過とともに非常に大きくなる可能性のあるアプリケーションを作成しています。そのため、物事をシンプルに保つために、特定の機能の Javascript (主に jQuery コード)、CSS、および html を 1 つのファイルに保持することにしました。たとえば、アップロードが関数の場合、アップロード用のすべての jQuery 検証と css、html が 1 つのファイルに含まれています (head タグと html タグなし)。
クリック ハンドラーが ajax によってすべてのリンクを読み込み、「whereTOadd」と呼ばれるリンクの追加属性によって示されるクラスの指定された DIV に追加するホーム ダッシュボードがあります。したがって、リンクの「WhereTOadd」属性が「.here」に設定され、href が upload.php に設定されている場合、upload.php のコンテンツは同じページの「here」クラスの div に追加されます。以下に示すスクリプトを使用して実行されます。
しかし、私が直面している問題は、コードを機能させるためにすべてのファイルに jQuery ファイルを再度含める必要があることです。これはひどいことです。これを避けるために何ができますか？
これは私のダッシュボードの html です:
<html>
<head>
..
<script src="Path-to-jquery-min-file.php" ></script>
<script>
$( document ).ready(function(){
$(document).on("click","a",function(e){
if( $(this).attr('href'))var ajaxurl = $(this).attr('href').valueOf();
if( $(this).attr('whereTOadd'))
var target = $(this).attr('whereToadd').valueOf();
/*for ajax request */
var options= {
type: 'GET',
url: ajaxurl,
dataType: 'html',
success: function (html, textStatus){
$(target).empty().append(html);
},
error: function(xhr, textStatus){
alert('error');
}
}
$.ajax(options);
return false;
});
});
</script>
</head>
<body>
<a href="upload.php" >Upload data</a>
<div class=".here" ></div>
</body>
upload.php には以下が含まれます。
<script type="javascript" >
$('body').append('load successful!');
</script>
このセットアップは、upload.php を次のように変更するまで機能しません。
<script src="Path-to-jquery-min-file.php" ></script>
<script type="javascript" >
$('body').append('load successful!');
</script>
同じページで jQuery を何度も読み込むとエラーや競合が発生する可能性があるため、この問題の解決にご協力ください。私がやっていることへのより良いアプローチを提案してください。
ありがとう