将全局 JS 变量传递给 DOM

Question

我的网站上有一个页面，允许用户使用 SELECT 字段选择客户端。选择客户端后，我有一个 JS/AJAX 功能，可以将客户端上传的图片加载到引导程序井中。这一切都很好。

在加载图像的 javascript 之前，我定义了一个名为“clientid”的全局变量，并在 javascript 中为该变量分配了一个值（数据库称为客户端的数字 id）。

在加载图片的末尾会出现一个 jquery 文件上传框，用户可以在其中向客户的帐户添加其他文件。该脚本需要全局变量“clientid”才能工作，因为文件上传会将 $_POST 值发送到服务器端脚本。

由于 jquery 文件上传是一个 document.ready 函数，我不确定如何将全局变量传递给它，因为全局变量在页面加载之后和用户选择客户端之后才被赋予值。

对此的任何帮助将不胜感激。

这是页面的代码：

<?php
$sql = $db->query("SELECT c_id, last_name, first_name FROM pan_clients WHERE client_status != 9 ORDER BY last_name ASC");
?>
<link href="http://hayageek.github.io/jQuery-Upload-File/4.0.10/uploadfile.css" rel="stylesheet" />
<script src="http://hayageek.github.io/jQuery-Upload-File/4.0.10/jquery.uploadfile.min.js"></script>

<script type="text/javascript">
var clientid = '';
function selectClient(svalue)
{
     clientid = svalue;
     $.ajax({
          url: 'http://<?php echo $_SESSION['sitevars']['siteurl'] ?>/js/ajax_query.php',
          type: 'POST',
          data: {
               'get_docs':true,
               'client_id':svalue
          },
          success: function(data) {
               document.getElementById("hidden_panel").style.display = "block";
               document.getElementById("results").innerHTML = data;
          }
     });     
}
</script>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Select a Client to view documents.</div>
<div class="panel-body">
<div class="col-lg-4">
<label>Select a Client:</label>
<select name="c_id" id="c_id" class="form-control" onchange="selectClient(this.value)">
<option value="">Select</option>
<?php
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
     echo '<option value="'. $row['c_id'] .'">'. $row['last_name'] .', '. $row['first_name'] .'</option>';
}
?>
</select>
</div>
<div class="col-lg-8"></div><br />
<hr /><br />
<div id="hidden_panel" class="col-lg-12" style="display: none;">
<div class="panel panel-default">
<div class="panel-heading">Saved Documents</div>
<div class="panel-body" id="results">


</div>
</div>
<div class="row">

<div id="fileuploader">Upload</div>
</div>
</div>
</div>
<script>
$(document).ready(function()
{
    $("#fileuploader").uploadFile({
          url:"http://<?php echo $_SESSION['sitevars']['siteurl'] ?>/js/ajax_query.php",
          multiple:true,
          dragDrop:true,
          formData: {"c_id":clientid},
          fileName:"client_files",
          acceptFiles:"image/*",
          showPreview:true,
          previewHeight: "100px",
          previewWidth: "100px"          
    });
});
</script>
</div>
</div>

Answer 1

我稍微改变了我的方法。我没有将文件上传脚本变成一个 $(document).ready() 函数，而是将它变成了一个常规的被调用函数。这样，我可以在 selectClient() 函数成功完成后将所需的变量发送到其中。像魅力一样工作！：

<?php
$sql = $db->query("SELECT c_id, last_name, first_name FROM pan_clients WHERE client_status != 9 ORDER BY last_name ASC");
?>
<link href="http://hayageek.github.io/jQuery-Upload-File/4.0.10/uploadfile.css" rel="stylesheet" />
<script src="http://hayageek.github.io/jQuery-Upload-File/4.0.10/jquery.uploadfile.min.js"></script>

<script type="text/javascript">
function selectClient(svalue)
{
     $.ajax({
          url: 'http://<?php echo $_SESSION['sitevars']['siteurl'] ?>/js/ajax_query.php',
          type: 'POST',
          data: {
               'get_docs':true,
               'client_id':svalue
          },
          success: function(data) {
               document.getElementById("hidden_panel").style.display = "block";
               document.getElementById("results").innerHTML = data;
               runUploader(svalue);
          }
     });     
}
</script>
<script>
function deleteImage(imageid)
{
     $.ajax({
          url: 'http://<?php echo $_SESSION['sitevars']['siteurl'] ?>/js/ajax_query.php',
          type: 'POST',
          data: {
               'delete_file':true,
               'file_id':imageid
          },
          success: function(data) {
               document.getElementById("well" + imageid).style.display = "none";
          }
     });      
}
</script>
<script>
function assignType(imageid, filetype)
{
     $.ajax({
          url: 'http://<?php echo $_SESSION['sitevars']['siteurl'] ?>/js/ajax_query.php',
          type: 'POST',
          data: {
               'change_file_type':true,
               'file_id':imageid,
               'filetype':filetype
          }
     });         
}
</script>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Select a Client to view documents.</div>
<div class="panel-body">
<div class="col-lg-4">
<label>Select a Client:</label>
<select name="c_id" id="c_id" class="form-control" onchange="selectClient(this.value)">
<option value="">Select</option>
<?php
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
     echo '<option value="'. $row['c_id'] .'">'. $row['last_name'] .', '. $row['first_name'] .'</option>';
}
?>
</select>
</div>
<div class="col-lg-8"></div><br />
<hr /><br />
<div id="hidden_panel" class="col-lg-12" style="display: none;">
<div class="panel panel-default">
<div class="panel-heading">Saved Documents</div>
<div class="panel-body" id="results">


</div>
</div>
<div class="row">

<div id="fileuploader">Upload</div>
</div>
</div>
</div>
<script>
function runUploader(clientid)
{
    $("#fileuploader").uploadFile({
          url:"http://<?php echo $_SESSION['sitevars']['siteurl'] ?>/js/ajax_query.php",
          multiple:true,
          dragDrop:true,
          formData: {"c_id":clientid},
          fileName:"client_files",
          acceptFiles:"image/*",
          showPreview:true,
          previewHeight: "100px",
          previewWidth: "100px"          
    });
}
</script>
</div>
</div>