グローバルJS変数をDOMに渡す

Question

私は自分のサイトにSELECTフィールドを使ってクライアントを選択できるページを持っています。クライアントが選択されると、クライアントのアップロードされた画像をブートストラップのウェルにロードするJS/AJAX関数があります。これはすべて素晴らしいです。

イメージをロードするJavaScriptの前に、 "clientid"というグローバル変数を定義し、javascriptでは変数（データベースのクライアントの数値ID）に値を割り当てます。

ロードされた画像の最後に、ユーザーがクライアントのアカウントに追加のファイルを追加できるjqueryファイルのアップロードボックスが表示されます。ファイルアップロードがserversideスクリプトに$ _POST値を送信するときに、スクリプトはグローバル変数 "clientid"を必要とします。

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>