Pass Global JS Variable to DOM

Question

У меня есть страница на моем сайте, которая позволяет пользователю выбирать клиента, используя поле SELECT. Когда клиент выбран, у меня есть функция JS/AJAX, которая загружает загруженные фотографии клиента в бутстрап-колодцы. Все это прекрасно работает.

Перед javascript, который загружает изображения, я определяю глобальную переменную, называемую «clientid», а в javascript присваиваю значение переменной (идентификатор базы данных для клиента).

В конце загруженных изображений появляется окно загрузки файла jquery, где пользователь может добавлять дополнительные файлы в учетную запись клиента. Для сценария требуется глобальная переменная «clientid» для работы, поскольку загрузка файла отправляет значение $ _POST для скрипта serveride.

Поскольку загрузка файла 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>