将全局JS变量传递给DOM
Pass Global JS Variable to DOM
我的网站上有一个页面,允许用户使用select字段选择客户端。当选择客户端时,我有一个JS/AJAX函数,它将客户端上传的图片加载到bootstrap井中。
在javascript加载图像之前,我定义了一个名为"clientid"的全局变量,并在javascript中为该变量分配了一个值(数据库称为客户端的数字id)。
在加载图片的末尾出现一个jquery文件上传框,用户可以在其中添加额外的文件到客户端帐户。该脚本需要全局变量"clientid",以便在文件上传向服务器端脚本发送$_POST值时工作。
由于jquery文件上传是一个文档。准备函数,我不确定如何将全局变量传递到它,因为全局变量没有给定值,直到页面加载和用户选择客户端之后。
如果有任何帮助,我将不胜感激。
下面是页面的代码:
<?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>
我稍微改变了一下我的方法。我没有将文件上传脚本设置为$(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>
相关文章:
- Ionic:AngularJS变量未使用$scope更新DOM
- 变量中的交叉DOM
- dom元素与javascript变量的绑定
- 将变量和DOM元素分别传递给jquery
- 如何使用cheerio(类似jquery的选择器,但没有dom)生成javascript变量的内容
- 当附加到DOM时,可以将变量与字符串连接起来吗?它能处理逃跑吗
- C#WebBrowser控件-使用DOM创建和修改javascript变量,然后使用Applet读取它
- 如何在 javascript 中存储 dom 元素的变量
- jQuery - 检查变量是否为 dom 元素
- 带有类的 DOM 树元素,它们是全局变量吗?
- Javascript 和 JQuery dom 全局变量范围
- 尝试在不使用 jQuery dom ready 函数的情况下传入变量
- 如何反转 JavaScript 变量中 HTML DOM 元素的顺序
- 为什么通过缓存变量访问 DOM 更快
- 创建一个数组,而不是一个从 dom 获取的值变量 使用 jQuery
- 在 DOM 中构建全局变量
- SVG DOM 使用变量来定义对象属性
- 如何在jQuery中缓存DOM变量
- 将数据从PHP直接传递到DOM变量
- 如何在为单页应用程序动态加载新的 innerHTML 时清除 DOM 变量和存储