I recently change the code of a page that I had in a html page to an aspx one because I needed to implement a master page. The code and the function worked perfectly fine in the htmlpage but since I had changed it to the aspx page the bootbox dialog stop working properly, as soon as I click on it, it closes immediately and refreshes the page. These are the scripts that Im using.
<script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/popper.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootbox.js"></script>
Here are some of the functions of the page:
function disableTool(Herramientaid) {
bootbox.confirm({
message: "¿Estas seguro que deseas eliminar este herramienta?",
buttons: {
confirm: {
label: 'Si',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
if (result) {
sendRequest('DisableTool', { "Herramientaid": Herramientaid },
function (response) {
if (response[0] == 'OK') {
gettool();
bootbox.alert('La herramienta se ha eliminado');
}
else {
bootbox.alert('Error! ' + response[0]);
}
});
}
}
});
}
function UpdateTool(ToolControl) {
var Herramientaid = $(ToolControl).parent().parent().find('td').eq(0).html();
var NombreH = $(ToolControl).parent().parent().find('td').eq(1).html();
var Adminid = $(ToolControl).parent().parent().find('td').eq(2).html();
var HDesc = $(ToolControl).parent().parent().find('td').eq(3).html();
bootbox.dialog({
title: "Actualizar herramientas",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<div class="form-group"> ' +
'<label class="col-md-3 control-label" for="txNombreH">Nombre:</label> ' +
'<div class="col-md-9"> ' +
'<input type="text" id="txNombreH" class="form-control" placeholder="Nombre" value=""' + NombreH + '/>' +
'</div>' +
'</div>' +
'<div class="form-group"> ' +
'<label class="col-md-3 control-label" for="txAdminid">ID del Administrador:</label> ' +
'<div class="col-md-9"> ' +
'<input type="text" id="txAdminid" class="form-control" placeholder="Administrador ID" value=""' + Adminid + '/>' +
'</div>' +
'</div>' +
'<div class="form-group"> ' +
'<label class="col-md-3 control-label" for="txHDesc">Descripcion de la herramienta:</label> ' +
'<div class="col-md-9"> ' +
'<input type="text" id="txHDesc" class="form-control" placeholder="Descripcion" value=""' + HDesc + '/>' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
buttons: {
No: {
label: "No",
className: "btn-danger",
callback: function () {
}
},
Yes: {
label: "Si",
className: "btn-success",
callback: function () {
var newNombreH = $('#txNombreH').val();
var newAdminid = $('#txAdminid').val();
var newHDesc = $('#txHDesc').val();
sendRequest('UpdateTool', {
"Herramientaid": Herramientaid, "NombreH": newNombreH, "Adminid": newAdminid, "HDesc": newHDesc
},
function (response) {
if (response[0] == 'OK') {
gettool();
bootbox.alert('Se ha configurado la herramienta');
}
else {
UpdateTool(ToolControl);
bootbox.alert('Error! ' + response[0]);
}
}
)
}
}
}
});
}
I had this same issue today, updating to latest and greatest bootbox didn't help. I eventually tracked down that the button click for "Close", "Ok", even "Esc" was triggering the submission of the form event.
I've had to add a propagation catcher after calling my dialog:
$(".dialog-class-name").on('hidden.bs.modal', function (e) {
e.preventDefault();
e.stopPropagation();
});
It feels hacky, but it doesn't involve editing the actual library, and it does work....
Related
I build a function to display a value in a HTML element for a
<input type="range">
object.
My function works fine:
var rangeValues = { "50": "Fifty" , "100": "Hundred" , "...": "..." };
$(function Skilllevel() {
$('#rangeText').text(rangeValues[$('#rangeInput').val()]);
$('#rangeInput').on('input change', function ()
{
$('#rangeText').text(rangeValues[$(this).val()]);
});
});
See example in jsfiddle
My problem now is the following:
I putted the function Skilllevel() into a $.each(result, function and into it, it doesn't work, because every entry from my second JSON file var urlBewerbungID = "json.php"; generated one separate list element in $("#ergebnisSkill").append(
The second JSON looks very simple, like this:
[
"item1",
"item2",
"item3"
]
My complete function:
//Skills selektieren
var rangeValues = {
"0": "Keine",
"33": "Anfänger",
"66": "Fortgeschritten",
"99": "Profi"
};
//Abfrage, welche Stelle gewählt wurde
$('#bewerbungID').on('change', function() {
var bewerbungID = ($('#bewerbungID').val());
console.log("BewerbungsID gewählt: " + bewerbungID);
//Zuerst das #HTML Element leeren
$("#ergebnisSkill").empty();
$(document).ready(function() {
var urlBewerbungID = "json.php";
$.getJSON(urlBewerbungID, function(result) {
console.log(result);
$.each(result, function(i, field) {
var skill = field;
//Skill liste erstellen
$(function Skilllevel() {
$('#rangeText').text(rangeValues[$('#rangeInput').val()]);
$('#rangeInput').on('input change', function() {
$('#rangeText').text(rangeValues[$(this).val()]);
});
});
//Jetzt HTML Element neu befüllen
$("#ergebnisSkill").append(
'<li>' +
'<div class="item-content">' +
'<div class="item-media"><i class="icon f7-icons">star</i></div>' +
'<div class="item-inner">' +
'<div class="item-title label">' + skill + '<br> <span id="rangeText"></span></div>' +
'<div class="item-input">' +
'<div class="range-slider">' +
'<input type="range" id="rangeInput" min="0" max="99" value="0" step="33">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</li>'
);
});
});
});
});
Your code is inside out.
You need document.ready to wrap the event handlers.
Use class instead of IDs, IDs need to be unique
use delegation - currently you have a function per result which does not work.
You need the skills functionality assigned to each result but delegated - see how a click on the ergebnisSkill will be captured by the rangeInput:
//Skills selektieren
var rangeValues = {
"0": "Keine",
"33": "Anfänger",
"66": "Fortgeschritten",
"99": "Profi"
};
$(document).ready(function() {
//Skill liste erstellen
$("#ergebnisSkill").on('input change', ".rangeInput", function() { // delegation
$(this).closest("item-inner") // a parent div
.find('.rangeText') // the input field
.text(rangeValues[$(this).val()]);
});
//Abfrage, welche Stelle gewählt wurde
$('#bewerbungID').on('change', function() {
var bewerbungID = ($('#bewerbungID').val());
console.log("BewerbungsID gewählt: " + bewerbungID);
//Zuerst das #HTML Element leeren
$("#ergebnisSkill").empty();
var urlBewerbungID = "json.php";
$.getJSON(urlBewerbungID, function(result) {
console.log(result);
$.each(result, function(i, field) {
var skill = field;
//Jetzt HTML Element neu befüllen
$("#ergebnisSkill").append(
'<li>' +
'<div class="item-content">' +
' <div class="item-media"><i class="icon f7-icons">star</i></div>' +
' <div class="item-inner">' +
' <div class="item-title label">' + skill + '<br> <span class="rangeText"></span></div>' +
' <div class="item-input">' +
' <div class="range-slider">' +
' <input type="range" class="rangeInput" min="0" max="99" value="0" step="33">' +
' </div>' +
' </div>' +
' </div>' +
'</div>' +
'</li>'
);
});
});
});
});
I've created two custom directives, one parent and one child directive that communicate with each other through parent directive controller.
Parent Directive
app.directive('attrsCtrl', function ($compile) {
return {
restrict: 'E',
scope: {
attributes: '=array',
options: '='
},
controller: function ($scope, $element) {
$scope.attributes = [];
this.returnOptions = function(){
return $scope.options;
}
this.saySomething = function (obj) {
$scope.attributes.push(obj);
alert(obj.name + "/" + obj.type.name);
var newDirective = angular.element('<attributes> </attributes>');
$element.append(newDirective);
$compile(newDirective)($scope);
}
}
}})
Child Directive
app.directive('attributes', function ($compile) {
return {
restrict: 'E',
require: '^attrsCtrl',
template: '<div ng-class="classInput">' +
' <div class="col-md-6" style="padding-left: 0;">' +
' <label>Nome do Atributo</label>' +
' <input type="text" class="form-control input-sm" placeholder="Nome do Atributo" ng-model="attrname" ng-change="validation()" ng-disabled="afterSend">' +
' </div>' +
' <div class="col-md-4 " style="padding-left: 0;"> ' +
' <label>Tipo do Atributo</label> ' +
' <select class="form-control input-sm" ng-options="option.name for option in options" ng-model="attrtype" ng-disabled="afterSend"></select>' +
' </div> ' +
' <div class="col-md-2" style="padding-right: 0;"> ' +
' <label> </label>' +
' <button type="button" class=" btn btn-default pull-right" ng-click="changeButton()" style="margin-top: 1em;" ng-disabled="disabled"> Adicionar </button>' +
' </div> ' +
'</div>' +
'<div class="clearfix></div>',
link: function (scope, element, attrs, attrsCtrl) {
scope.classInput = 'form-group';
scope.disabled = true;
scope.afterSend = false;
scope.options = attrsCtrl.returnOptions();
scope.changeButton = function () {
scope.attr = {
name: scope.attrname,
type: scope.attrtype
};
attrsCtrl.saySomething(scope.attr);
scope.disabled = true;
scope.afterSend = true;
}
scope.validation = function () {
if (scope.attrname.length < 6) {
scope.classInput = 'form-group has-error';
} else {
scope.classInput = 'form-group has-success';
scope.disabled = false;
}
}
}
};})
HTML
<attrs-ctrl array="myAttributes" options="options" >
<attributes/>
</attrs-ctrl>
My issue is that after i click twice to create a directive, it automatically creates another directive but i can't type anything in it! This behavior was supposed to happen only after i click on "Adicionar" button.
There are two problems here
In above example, link function contains scope.disabled = true;, it should be changed to scope.disabled = false; I guess it is your typo while pasting the example here.
Secondly, I guess you have added the parent directive dependency explicitly as you want to create independent child directive. As per your code, the scope between parent and child directive is getting shared. So, scope of parent directive is being shared across all child directives and all fields are appearing disabled.
Add scope:{}, to your directive function as given below...
This will create separate child directive scope.
There is a nice article explaining scopes in details: https://github.com/angular/angular.js/wiki/Understanding-Scopes
app.directive('attributes', function ($compile) {
return {
restrict: 'E',
require: '^attrsCtrl',
scope: {},
template: '<div ng-class="classInput">' +
' <div class="col-md-6" style="padding-left: 0;">' +
' <label>Nome do Atributo</label>' +
' <input type="text" class="form-control input-sm" placeholder="Nome do Atributo" ng-model="attrname" ng-change="validation()" ng-disabled="afterSend">' +
' </div>' +
' <div class="col-md-4 " style="padding-left: 0;"> ' +
' <label>Tipo do Atributo</label> ' +
' <select class="form-control input-sm" ng-options="option.name for option in options" ng-model="attrtype" ng-disabled="afterSend"></select>' +
' </div> ' +
' <div class="col-md-2" style="padding-right: 0;"> ' +
' <label> </label>' +
' <button type="button" class=" btn btn-default pull-right" ng-click="changeButton()" style="margin-top: 1em;" ng-disabled="disabled"> Adicionar </button>' +
' </div> ' +
'</div>' +
'<div class="clearfix></div>',
link: function (scope, element, attrs, attrsCtrl) {
scope.classInput = 'form-group';
scope.disabled = false;
scope.afterSend = false;
scope.options = attrsCtrl.returnOptions();
scope.changeButton = function () {
scope.attr = {
name: scope.attrname,
type: scope.attrtype
};
attrsCtrl.saySomething(scope.attr);
scope.disabled = true;
scope.afterSend = true;
}
scope.validation = function () {
console.log("validate");
if (scope.attrname.length < 6) {
scope.classInput = 'form-group has-error';
} else {
scope.classInput = 'form-group has-success';
scope.disabled = false;
}
}
}
};})
I have a chat window with a jScrollPane. The problem is that when I submit a message it doesn't scroll down to the last word/line I wrote, it's always a line behind.
$('body').delegate('#private-form', 'submit', function() {
var sendMessage = $(this).find('input.private-message').val();
if (!empty(sendMessage)) {
socket.emit('send private message', {
'message': sendMessage,
'username': $(this).find('input.send-to').val()
});
$(this).find('input.private-message').val('');
var data = '' +
'<div class="person">' +
'<img src="img/avatar.png" alt="">' +
'<div class="details">' +
'<div class="chat">' +
'<p>' + sendMessage + '</p>' +
'</div>' +
'<div class="chat-view">' +
'<p>10 min ago</p>' +
'</div>' +
'</div>' +
'</div>';
var settings = {
showArrows: false,
autoReinitialise: true,
};
var pane = $('.chat-single');
pane.jScrollPane(settings);
var contentPane = pane.data('jsp').getContentPane();
contentPane.append(
data
);
pane.data('jsp').scrollToBottom();
}
return false;
});
Markup:
<div class="chatters">
<div class="chat-single">
</div>
</div>
Styles:
.chatters {
padding: 10px 0;
height: 75%;
width: auto;
max-width: 390px;
}
.chat-single{
height:100%
}
After appending the data, call reinitialise on pane.data('jsp') before scrolling to the bottom.
contentPane.append(
data
);
pane.data('jsp').reinitialise();
pane.data('jsp').scrollToBottom();
Also, if you're using autoReinitialise be sure to provide a reasonable autoReinitialiseDelay since by default it does this re-initialisation twice per sencond (every 500ms).
http://jsfiddle.net/Nidhin/xd3Ab/
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.roles = [
{roleId: 1, roleName: "Administrator"},
{roleId: 2, roleName: "Super User"}
];
$scope.user = {
userId: 1,
username: "JimBob",
roles: [$scope.roles[0]]
};});myApp.directive('multiSelect', function($q) {return {
restrict: 'E',
require: 'ngModel',
scope: {
selectedLabel: "#",
availableLabel: "#",
displayAttr: "#",
available: "=",
model: "=ngModel"
},
template: '<div class="multiSelect">' +
'<div class="leftms fL ">' +
'<label class="control-label fL" for="multiSelectSelected">{{ availableLabel }} ' +
'({{ available.length }})</label>'+'<div class="clear"></div>'+
'<select id="multiSelectAvailable" ng-model="selected.available" multiple ' +
'class="pull-left mselect " ng-options="e as e[displayAttr] for e in available"></select>' + '<div class="clear"></div>'+
'</div>' +
'<div class=" width10p fL" >' +
'<button class="btn mover left" ng-click="add()" title="Add selected" ' +
'ng-disabled="selected.available.length == 0">' +
'<i class="icon-arrow-right clrblk">></i>' +
'</button>' +
'<button class="btn mover right" ng-click="remove()" title="Remove selected" ' +
'ng-disabled="selected.current.length == 0">' +
'<i class="icon-arrow-left clrblk"><</i>' +
'</button>' +
'</div>' +
'<div class="leftms fL">' +
'<label class="control-label fL" for="multiSelectSelected">{{ selectedLabel }} ' +
'({{ model.length }})</label>' +'<div class="clear"></div>'+
'<select id="currentRoles" ng-model="selected.current" multiple ' +
'class="pull-left mselect fL" ng-options="e as e[displayAttr] for e in model">' +
'</select>' + '<div class="clear"></div>'+
'</div>' +
'<div class=" width10p fL" >' +
'<button class="btn mover left" ng-click="up()" title="Add selected" ' +
'ng-disabled="selected.current.length == 0">' +
'<i class="fa fa-angle-up clrblk"></i>' +
'</button>' +
'<button class="btn mover right" ng-click="down()" title="Remove selected" ' +
'ng-disabled="selected.current.length == 0">' +
'<i class="fa fa-angle-down clrblk"></i>' +
'</button>' +
'</div>' +
'</div>', link: function(scope, elm, attrs) {
scope.selected = {
available: [],
current: []
};
/* Handles cases where scope data hasn't been initialized yet */
var dataLoading = function(scopeAttr) {
var loading = $q.defer();
if(scope[scopeAttr]) {
loading.resolve(scope[scopeAttr]);
} else {
scope.$watch(scopeAttr, function(newValue, oldValue) {
if(newValue !== undefined)
loading.resolve(newValue);
});
}
return loading.promise;
};
/* Filters out items in original that are also in toFilter. Compares by reference. */
var filterOut = function(original, toFilter) {
var filtered = [];
angular.forEach(original, function(entity) {
var match = false;
for(var i = 0; i < toFilter.length; i++) {
if(toFilter[i][attrs.displayAttr] == entity[attrs.displayAttr]) {
match = true;
break;
}
}
if(!match) {
filtered.push(entity);
}
});
return filtered;
};
scope.refreshAvailable = function() {
scope.available = filterOut(scope.available, scope.model);
scope.selected.available = [];
scope.selected.current = [];
};
scope.add = function() {
scope.model = scope.model.concat(scope.selected.available);
scope.refreshAvailable();
};
scope.remove = function() {
scope.available = scope.available.concat(scope.selected.current);
scope.model = filterOut(scope.model, scope.selected.current);
scope.refreshAvailable();
};
scope.update = function() {
scope.model = scope.model.concat(scope.selected.current);
//scope.model = filterOut(scope.model, scope.selected.current);
scope.refreshAvailable();
};
scope.up = function() {
var $op = $('#currentRoles option:selected');
if($op.length){
$op.first().prev().before($op);
}
$('#currentRoles').find('option').attr('selected','selected');
//scope.update();
scope.refreshAvailable();
};
scope.down = function() {
var $op = $('#currentRoles option:selected');
if($op.length){
$op.last().next().after($op);
}
//scope.add();
scope.refreshAvailable();
scope.apply();
};
$q.all([dataLoading("model"), dataLoading("available")]).then(function(results) {
scope.refreshAvailable();
});
}};})// JavaScript Document
on this link you will find two select box Available Role & Current role, I have to move item from Available Role to Current role Then Move the item Up and down in Current role Select box
--- Moving Item from available role to Current role I have used angular js
--- For Moving item UP and down in Current role I have used Jquery But when I am posting the value order of item is not passing in same format which is in Current role selectbox.
Pls use the fiddle.
in my opinion, you should just modify the arrays within $scope to get the ordering right.
https://gist.github.com/jfornoff/db2bb5f0c35bc0364529
This is a gist of a bit of code that i used to modify array orders in a project that i worked on.
Basically what you would do is just grab your variable that points to the currently selected element,
and modify the corresponding array to suit what you are trying to do.
$scope.up = function(){
ArrayService.moveUp(correspondingArray, selected.current);
};
Hope that helps, cheers!
You can use Angular itself to move elements up and down too. If you reorder the elements in the array available and current the ui would automatically reorder the elements.
Use the array splice method to move element within the array. See this answer on how to move elements in an array.
Move an array element from one array position to another
I have fineupload working with one button, but I would like to have several upload buttons on 1 page. But cannot get it to work...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader - Boostrapped Minimal Demo</title>
<link href="/fineuploader/fineuploader-3.3.0.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Fine Uploader
-------------------------------------------------- */
.qq-upload-list {
text-align: left;
}
/* For the bootstrapped demos */
li.alert-success {
background-color: #DFF0D8 ;
}
li.alert-error {
background-color: #F2DEDE ;
}
.alert-error .qq-upload-failed-text {
display: inline;
}
</style>
</head>
<body>
<div id="bootstrapped-fine-uploader-1"></div>
<script src="/fineuploader/fineuploader-3.3.0.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-1'),
request: {
endpoint: 'example.php?naam=test.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
}
window.onload = createUploader;
</script>
<div id="bootstrapped-fine-uploader-2"></div>
<script src="/fineuploader/fineuploader-3.3.0.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-2'),
request: {
endpoint: 'example.php?naam=test2.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
}
window.onload = createUploader;
</script>
</body>
</html>
Only the second button is displayed, the first one completely disappears... Is there someone who can help me with this ?
You're assigning the window.onload event the first function, then replacing it with the second one. You should assign the event only once. Also, you don't need two separate script tags.
<body>
<div id="bootstrapped-fine-uploader-1"></div>
<div id="bootstrapped-fine-uploader-2"></div>
<script src="fineuploader-3.3.0.js"></script>
<script>
function createUploaders() {
var uploader1 = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-1'),
request: {
endpoint: 'example.php?naam=test.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
var uploader2 = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-2'),
request: {
endpoint: 'example.php?naam=test2.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
}
window.onload = createUploaders();
</script>
</body>
Here's how I've done it.
It is more code initially but makes sense. You can place as many uploaders on one page as you want.
if (self.settings.businessAddresses !== null) {
$.each(self.settings.businessAddresses, function (index, businessAddress) {
initFileUploader(self.settings.privateAddresses.length + index, businessAddress, "business", self.settings.allowedExtensions);
});
}
Here's implementation of 'generic' file uploader initializer. Mind you it is Fine Uploader 2.1.2 i am using. It should be easier in new version i suppose. I have extensions.js to go with it to support separate parameters for each individual file too and some other improvements which probably have been addressed in new version of file uploader.
// initiate uploader
function initFileUploader(index, addressInstance, addressType, allowedFileExtensions) {
var filesCount = 0;
var uploadButtonSelector = '#triggerUpload-' + addressInstance.Id;
var fileSelectButton = ".qq-upload-button-" + addressInstance.Id;
var uploadedFilesErrorSelector = '#uploadedFilesError-' + addressInstance.Id;
var nextButtonSelector = "#Next";
var previousButtonSelector = "#Previous";
var documentTypeSelector = "#DocumentTypeCode-" + addressInstance.Id;
var prospectCacheKeySelector = "#ProspectCacheKey";
// Set up the upload API
var fileUploader = new qq.FileUploader({
element: $('#filesToUpload-' + addressInstance.Id)[0],
action: '/FileUploader',
autoUpload: false,
uploadButtonText: 'Select a file',
allowedExtensions: allowedFileExtensions,
sizeLimit: 1048576, // 1 MB = 1024 * 1024 bytes,
template: '<div class="qq-uploader">' + // Allow the boostrap styles
'<div class="qq-upload-button-' + addressInstance.Id + ' btn btn-success" style="width: 100px">{uploadButtonText}</div>' +
'<ul class="qq-upload-list-' + addressInstance.Id + '" style="margin-top: 10px; text-align: center;"></ul>' +
'<pre class="qq-upload-drop-area-' + addressInstance.Id + '"><span>{dragText}</span></pre>' +
'</div>',
failUploadText: '',
fileTemplate: '<li>' +
'<span class="qq-document-type-' + addressInstance.Id + '"></span>' +
'<span class="qq-upload-file-' + addressInstance.Id + '">10870</span>' +
'<a class="qq-upload-cancel-' + addressInstance.Id + '" href="#"> Remove</a>' +
'<div class="qq-progress-bar-' + addressInstance.Id + '"></div>' +
'<span class="qq-upload-spinner-' + addressInstance.Id + '" style="display: none;"></span>' +
'<span class="qq-upload-finished-' + addressInstance.Id + '"></span>' +
'<span class="qq-upload-size-' + addressInstance.Id + '" style="display: none;"></span>' +
'<span class="qq-upload-failed-text-' + addressInstance.Id + '"></span>' +
'</li>',
classes: {
button: 'qq-upload-button-' + addressInstance.Id + '',
drop: 'qq-upload-drop-area-' + addressInstance.Id + '',
dropActive: 'qq-upload-drop-area-active-' + addressInstance.Id + '',
dropDisabled: 'qq-upload-drop-area-disabled-' + addressInstance.Id + '',
list: 'qq-upload-list-' + addressInstance.Id + '',
progressBar: 'qq-progress-bar-' + addressInstance.Id + '',
file: 'qq-upload-file-' + addressInstance.Id + '',
documentType: 'qq-document-type-' + addressInstance.Id + '',
applicationId: 'qq-application-id-' + addressInstance.Id + '',
addressId: 'qq-address-id-' + addressInstance.Id + '',
addressType: 'qq-address-type-' + addressInstance.Id + '',
spinner: 'qq-upload-spinner-' + addressInstance.Id + '',
finished: 'qq-upload-finished-' + addressInstance.Id + '',
size: 'qq-upload-size-' + addressInstance.Id + '',
cancel: 'qq-upload-cancel-' + addressInstance.Id + '',
failText: 'qq-upload-failed-text-' + addressInstance.Id + '',
success: 'alert-success',
fail: 'alert-error',
successIcon: null,
failIcon: null
},
onError: function (id, fileName, errorReason) {
alert(errorReason);
},
onComplete: function (id, fileName, response) {
filesCount--;
if (response.success) {
$('<input>').attr({
type: 'hidden',
name: 'UploadedFileIds',
value: response.cacheKey
}).appendTo('form');
}
// Check that we have finished downloading all files
if (fileUploader.getInProgress() == 0) {
// Re-enable the Next button
$(nextButtonSelector).removeAttr('disabled');
$(previousButtonSelector).removeAttr('disabled');
$(uploadButtonSelector).css('visibility', 'hidden');
}
},
onSubmit: function (id, fileName) {
filesCount++;
fileUploader._options.params[id] =
{
documentType: $("select" + documentTypeSelector)[0].value,
documentTypeText: $("select" + documentTypeSelector)[0].options[$("select" + documentTypeSelector)[0].selectedIndex].text,
addressId: addressInstance.Id,
addressType: addressType,
applicationId: addressInstance.ApplicationId,
prospectCacheKey: $(prospectCacheKeySelector).val()
};
// $(documentTypeSelector).prop('selectedIndex', 0);
// $(fileSelectButton).attr('disabled', 'disabled');
// Show the upload button
if ($(uploadButtonSelector).css('visibility') === 'hidden') {
$(uploadButtonSelector).css('visibility', 'visible');
}
// Hide the error for mandatory files upload
$(uploadedFilesErrorSelector).css('display', 'none');
},
onCancel: function (id, fileName) {
filesCount--;
if (filesCount === 0) {
$(uploadButtonSelector).css('visibility', 'hidden');
}
}
});
You have two globally-scoped functions with the same name. The second createUploader overwrites the first createUploader.