I have a dropdownlist and a fileupload control in a panel which is added with other controls in an UpdatePanel. When a value is selected from the dropdown and a file is uploaded, the Upload button is enabled. For this I have a javascript function as follows:
function SetUploadButtonEnabled(controlPanel, fileUploadId) {
var docTypesList = controlPanel.find("select");
var gotListVal = docTypesList.val() != "";
var fileUpload = $find(fileUploadId);
var gotFileVal = fileUpload.getUploadedFiles().length > 0;
var enable = gotListVal && gotFileVal;
if (enable) {
controlPanel.find(".GxButtonBlue").removeAttr("disabled");
}
else {
controlPanel.find(".GxButtonBlue").attr("disabled", true);
}
}
I am trying to call it from code behind as follows, but the function is not being called:
string script = "<script type=\"text/javascript\">"
+ "\n $(document).ready(function (){"
+ "\n $(document).on(\"change\", \"#" + this._DdDocumentTypes.ClientID + "\", function(event){"
+ "\n var docUploadControlPanel = $(this).closest(\"#" + this._DocUploadControlPanel.ClientID + "\");"
+ "\n SetUploadButtonEnabled(docUploadControlPanel, \"" + this._fiInput.ClientID + "\");"
+ "\n });"
+ "\n });"
+ "\n "
+ "</script>";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DocumentAjaxUploadCtrlScript_" + this.ClientID, script);
Since an Update Panel is there I even tried:
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "DocumentAjaxUploadCtrlScript_" + this.ClientID, script, true);
Please help me find why the function is never called!
Here's one way to do it. The key here is the pageComponents
object.
ASPX or User Control
<script>
var pageComponents = {
documentTypeSelector: "#<%= _DdDocumentTypes.ClientID %>",
uploadControlSelector: "#<%= _DocUploadControlPanel.ClientID %>",
fiInputSelector: "#<%= _fiInput.ClientID %>"
};
</script>
JavaScript Place after the above
function SetUploadButtonEnabled(controlPanel, fileUploadId) {
var docTypesList = controlPanel.find("select");
var gotListVal = docTypesList.val() != "";
var fileUpload = $find(fileUploadId);
var gotFileVal = fileUpload.getUploadedFiles().length > 0;
var enable = gotListVal && gotFileVal;
if (enable) {
controlPanel.find(".GxButtonBlue").removeAttr("disabled");
}
else {
controlPanel.find(".GxButtonBlue").attr("disabled", true);
}
}
$(document).ready(function (){
$(document).on("change", pageComponents.documentTypeSelector, function(event){
var docUploadControlPanel = $(this).closest(pageComponents.uploadControlSelector);
SetUploadButtonEnabled(docUploadControlPanel, pageComponents.fiInputSelector);
});
});
Remarks
You can avoid using the "bee sting" syntax above by setting the control ClientIDMode
property to Static
(assuming you're using only ASP.NET Page, not a user control. Then your JavaScript would look like below:
$(document).ready(function (){
$(document).on("change", "#documentType", function(event){
var docUploadControlPanel = $(this).closest("#uploadControl");
SetUploadButtonEnabled(docUploadControlPanel, "#fiInput");
});
});
In addition the line:
var docUploadControlPanel = $(this).closest(pageComponents.uploadControlSelector);
could be written as:
var docUploadControlPanel = $(pageComponents.uploadControlSelector);
since ClientID
always returns a unique element ID for the entire page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.