JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="usermanagement-canvas col-md-10">
<div class="selecttitle col-md-8">
</div>
<p>Double click to edit the employee's app access</p>
<div class="showallusers container col-md-8">
<div class="form-group">
<select class="form-control showallusers" name="user" size=5>
<option>Employee one</option>
<option>Employee two</option>
<option>Employee three</option>
<option>Employee four</option>
</select>
</div>
</div>
</div>
JavaScript
$(function(){
$("select.showallusers").dblclick(load_edituser);
$(".usermanagement-canvas").on("click","button.testbutton",display_user_apps);
$(".usermanagement-canvas").on("load","select.left-current",display_user_apps);
}); //It represents what I want but it doesn't work.
//Creating global variables to be accessed by more than one function
var appsinfo = [];
var currentlist = "";
var notallowedlist = "";
//It opens the page to edit one user's apps access
function load_edituser(){
iduser = $("select.showallusers option:selected").val();
name = $("select.showallusers option:selected").text();
$.ajax({'url': base_url+'/ManageUser/open_edituser',
'type': 'POST',
'data':{'iduser': iduser, 'name': name},
'success' : function(data){
var container = $('.usermanagement-canvas');
if(data)
{
get_user_apps();
container.html(data);
}
else
alert('Error!!');
},
'complete': function()
{
//alert("esse aqui mesmo");
display_user_apps();
}
});
}
//This function only loads the user apps' info in an array
function get_user_apps(){
//alert("it works! name: "+name+" id: "+iduser);
$.ajax({'url': base_url+'/ManageUser/get_json_user_apps',
'type': 'POST',
'data':{'iduser': iduser, 'name': name},
'success' : function(data){
//alert("Hell yes");
//var container = $('.usermanagement-canvas');
if(data)
{
appsinfo = JSON.parse(data);
}
else
alert('Error!!');
}
});
}
//This function updates the list of apps that the user can and can't access:
function display_user_apps()
{
//alert(appsinfo.currentapps.length);
//alert("Shut up");
var i;
for (i = 0; i < appsinfo.currentapps.length; i++)
{
var id = appsinfo.currentapps[i].idApplication;
var appName = appsinfo.currentapps[i].appName;
currentlist += "<option value="+id+">"+appName+"</option>";
}
$("select.left-current").html(currentlist);
for(i=0; i <...