将全局JS变量传递给DOM

时间:2016-08-23 12:04:01

标签: javascript jquery variables scope

我的网站上有一个页面,允许用户使用SELECT字段选择客户端。当选择客户端时,我有一个JS / AJAX函数,它将客户端上传的图片加载到bootstrap井中。这一切都很有效。

在加载图像的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>

1 个答案:

答案 0 :(得分:0)

我改变了一点方法。我没有将文件上传脚本作为$(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>