將全局JS變量傳遞給DOM

Question

我在我的網站上有一個頁面，允許用戶使用SELECT字段選擇一個客戶端。選擇客戶端時，我有一個JS/AJAX功能，可將客戶端上傳的圖片加載到引導井中。這一切都很好。

它加載我定義了一個名爲「客戶端ID」，並在JavaScript我賦值給變量（客戶端的數據庫稱爲數字ID），全局變量圖像的JavaScript之前。

在加載圖片的末尾出現一個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>