poncho4all's Profile User Rating: -----

Reputation: 123 Stalwart
Group:
Contributors
Active Posts:
1,414 (0.63 per day)
Joined:
15-July 09
Profile Views:
7,035
Last Active:
User is offline Aug 28 2015 09:52 PM
Currently:
Offline

Previous Fields

Country:
GT
OS Preference:
Windows
Favorite Browser:
FireFox
Favorite Processor:
Intel
Favorite Gaming Platform:
Nintendo
Your Car:
Hyundai
Dream Kudos:
75

Latest Visitors

Icon   poncho4all has not set their status

Posts I've Made

  1. In Topic: Not loading correctly

    Posted 28 Aug 2015

    Thank you for the help.
  2. In Topic: Not loading correctly

    Posted 28 Aug 2015

    Aparently it was the event delegation, where could I read something about this. I don't understand why a simple event to the class didn't work.
  3. In Topic: Not loading correctly

    Posted 28 Aug 2015

    Ok so the console is not showing any errors, im using Firebug in firefox.

    Changed the dummy buttons clases to separate them and still no fix.

    <!DOCTYPE html>
    <html lang="en-ES">
      <head>
    	<title>Manejo de Equipos</title>
        <meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    	<link rel="stylesheet" href="css/bootstrap-table.css">
    	<link rel="stylesheet" href="css/alertify.core.css">
    	<link rel="stylesheet" href="css/alertify.default.css">
    	<link rel="stylesheet" href="css/site.css">
    	<link rel="stylesheet" href="css/datepicker.css">
    	<script src="js/jquery-1.11.3.min.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    	<script src="js/alertify.min.js"></script>
    	<script src="js/validator.min.js"></script>
    	<script src="js/bootstrap-datepicker.js"></script>
    	<script src="js/perfil.js"></script>
      </head>
      <body>
    	<div class="container">
    		<div class="modal fade" id="addDepto" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar departamento</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtDepto" class="control-label">Nombre departamento:</label>
    								<input type="text" class="form-control" id="txtDepto" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarDepto">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="modal fade" id="addPrograma" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar programa</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtNPrograma" class="control-label">Nombre programa:</label>
    								<input type="text" class="form-control" id="txtNPrograma" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarPrograma">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="modal fade" id="addPuesto" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar puesto</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtNPuesto" class="control-label">Nombre puesto:</label>
    								<input type="text" class="form-control" id="txtNPuesto" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarPuesto">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="modal fade" id="addEmpleado" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar empleado</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtNombreEmpleado" class="control-label">Nombre(s):</label>
    								<input type="text" class="form-control" id="txtNombreEmpleado" required>
    							</div>
    							<div class="form-group">
    								<label for="txtApellidoEmpleado" class="control-label">Apellido(s):</label>
    								<input type="text" class="form-control" id="txtApellidoEmpleado" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarEmpleado">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="panel-group">
    			<div class="panel panel-info">
    				<div class="panel-heading">Información del usuario</div>
    				<div class="panel-body">
    					<div class="row">
    						<div class="col-xs-12 col-sm-8">
    							<label>Nombre del usuario:</label>
    							<select id="ddListEmpleados" class="select-style" name="ddListEmpleados"></select>
    						</div>
    						<div class="col-xs-12 col-sm-4 form-inline">
    							<label>Fecha:</label> 
    							<input type="text" class="form-control datepicker">
    						</div>
    						
    					</div>
    					<div class="row">
    						<div class="col-xs-12 col-sm-4">
    							<label>Puesto que desempeñara:</label> 
    							<select id="ddListPuesto" class="select-style" name="ddListPuesto"></select>
    							<a href="#" class="btn btn-info btn-xs" role="button">Agregar puesto</a>
    						</div>
    						<div class="col-xs-12 col-sm-4">
    							<label>Director que autoriza:</label> 
    							<select id="ddListEmpleados" class="select-style" name="ddListEmpleados"></select>
    							<a href="#" class="btn btn-info btn-xs" role="button">Agregar empleado</a>
    						</div>
    						<div class="col-xs-12 col-sm-4">
    							<label>Departamento:</label> 
    							<select id="ddListDepartamento" class="select-style" name="ddListDepartamento"></select>
    							<a href="#" class="btn btn-info btn-xs" role="button">Agregar departamento</a>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="panel-group">
    			<div class="panel panel-info">
    				<div class="panel-heading">Software y acceso en web</div>
    				<div class="panel-body">
    					<div id="btnDivG"></div>
    				</div>
    				<div class="panel-footer">
    					<div id="btnDiv">
    						
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addDepto">Open depto</button>
    	<input type="button" class="progR" style="display:none"/>
    	<input type="button" class="progG" style="display:none"/>
      </body>
    </html>
    
    


    This is the js now

    $(document).ready(function(){
    	$('.datepicker').datepicker({
    		format:'dd/mm/yyyy'
    	});
    	$.ajax({
            type: "GET",
            url: "php/getdepto.php",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            success: function (result) {
    			var data = JSON.parse(result);
    			if ($("#ddListDepartamento").has('option').length == 0) {
                    
                    for (var i = 0; i < data.length; i++) {
                        $("#ddListDepartamento").append('<option value="' + data[i].id_depto + '" label="' + data[i].activo + '">' + data[i].nombre_depto + '</option>');
                    }
                }
    		},
            error: function (error) {
    			
            }
        });
    	$.ajax({
            type: "GET",
            url: "php/getProgramas.php",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            success: function (result) {
    			var btnsProgramas = JSON.parse(result); 
                for (var i = 0; i < btnsProgramas.length; i++) {
                    $("<input/>").attr({type:"button", value:btnsProgramas[i].nombre_programa, id:"btnPR" + btnsProgramas[i].id_programa, 'class':"btn btn-danger progR"}).appendTo("#btnDiv");
    				$("<input/>").attr({type:"button", value:btnsProgramas[i].nombre_programa, id:"btnPG" + btnsProgramas[i].id_programa, 'class':"btn btn-success progG"}).appendTo("#btnDivG");
           	   }
    		},
            error: function (error) {
    			
            }
        });
    	
    	$('.progR').on("click", function(){
    		var uid = $(this).attr("id");
    		$("#" + uid).hide();
    		uid = uid.replace("btnPR", "btnPG");
    		$("#" + uid).show();
    	});
    	$('.progG').on("click", function(){
    		var uid = $(this).attr("id");
    		$("#" + uid).hide();
    		uid = uid.replace("btnPG", "btnPR");
    		$("#" + uid).show();
    	});
    	
    
    });
    
    


    The only difference I noticed on testing the website is that if there is a break in the click event, it does process, otherwise it is not processed
  4. In Topic: Not loading correctly

    Posted 27 Aug 2015

    I haven't check the console at the moment. I'm not near the computer I'm working that project.
    I didn't think about the classes fighting each other for the event, I'm guessing that will fix the problem.
  5. In Topic: Not loading correctly

    Posted 27 Aug 2015

    This is how the page looks, as you can see at the bottom, i have an input with those classes and also a button i was using to test the modals.

    <!DOCTYPE html>
    <html lang="en-ES">
      <head>
    	<title>Manejo de Equipos</title>
        <meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    	<link rel="stylesheet" href="css/bootstrap-table.css">
    	<link rel="stylesheet" href="css/alertify.core.css">
    	<link rel="stylesheet" href="css/alertify.default.css">
    	<link rel="stylesheet" href="css/site.css">
    	<link rel="stylesheet" href="css/datepicker.css">
    	<script src="js/jquery-1.11.3.min.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    	<script src="js/alertify.min.js"></script>
    	<script src="js/validator.min.js"></script>
    	<script src="js/bootstrap-datepicker.js"></script>
    	<script src="js/perfil.js"></script>
      </head>
      <body>
    	<div class="container">
    		<div class="modal fade" id="addDepto" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar departamento</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtDepto" class="control-label">Nombre departamento:</label>
    								<input type="text" class="form-control" id="txtDepto" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarDepto">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="modal fade" id="addPrograma" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar programa</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtNPrograma" class="control-label">Nombre programa:</label>
    								<input type="text" class="form-control" id="txtNPrograma" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarPrograma">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="modal fade" id="addPuesto" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar puesto</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtNPuesto" class="control-label">Nombre puesto:</label>
    								<input type="text" class="form-control" id="txtNPuesto" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarPuesto">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="modal fade" id="addEmpleado" role="dialog">
    			<div class="modal-dialog">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h4 class="modal-title">Ingresar empleado</h4>
    					</div>
    					<div class="modal-body">
    						<form data-toggle="validator" role="form" id="nuevoDepto">
    							<div class="form-group">
    								<label for="txtNombreEmpleado" class="control-label">Nombre(s):</label>
    								<input type="text" class="form-control" id="txtNombreEmpleado" required>
    							</div>
    							<div class="form-group">
    								<label for="txtApellidoEmpleado" class="control-label">Apellido(s):</label>
    								<input type="text" class="form-control" id="txtApellidoEmpleado" required>
    							</div>
    							<div class="form-group row-centered">
    								<button type="submit" class="btn btn-success" id="btnIngresarEmpleado">Agregar</button>
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="panel-group">
    			<div class="panel panel-info">
    				<div class="panel-heading">Información del usuario</div>
    				<div class="panel-body">
    					<div class="row">
    						<div class="col-xs-12 col-sm-8">
    							<label>Nombre del usuario:</label>
    							<select id="ddListEmpleados" class="select-style" name="ddListEmpleados"></select>
    						</div>
    						<div class="col-xs-12 col-sm-4 form-inline">
    							<label>Fecha:</label> 
    							<input type="text" class="form-control datepicker">
    						</div>
    						
    					</div>
    					<div class="row">
    						<div class="col-xs-12 col-sm-4">
    							<label>Puesto que desempeñara:</label> 
    							<select id="ddListPuesto" class="select-style" name="ddListPuesto"></select>
    							<a href="#" class="btn btn-info btn-xs" role="button">Agregar puesto</a>
    						</div>
    						<div class="col-xs-12 col-sm-4">
    							<label>Director que autoriza:</label> 
    							<select id="ddListEmpleados" class="select-style" name="ddListEmpleados"></select>
    							<a href="#" class="btn btn-info btn-xs" role="button">Agregar empleado</a>
    						</div>
    						<div class="col-xs-12 col-sm-4">
    							<label>Departamento:</label> 
    							<select id="ddListDepartamento" class="select-style" name="ddListDepartamento"></select>
    							<a href="#" class="btn btn-info btn-xs" role="button">Agregar departamento</a>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="panel-group">
    			<div class="panel panel-info">
    				<div class="panel-heading">Software y acceso en web</div>
    				<div class="panel-body">
    					<div id="btnDivG"></div>
    				</div>
    				<div class="panel-footer">
    					<div id="btnDiv">
    						
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addDepto">Open depto</button>
    	<input type="button" class="progR progG" style="display:none"/>
      </body>
    </html>
    
    


    The console idea is not bad I'll try that, because the on(click), didnt work. =(

    EDIT:Right after posting this I noticed maybe is the closing "/" that I'm using in the input?

My Information

Member Title:
D.I.C Head!
Age:
31 years old
Birthday:
May 22, 1984
Gender:
Location:
Coatepeque, Guatemala
Interests:
Become a C++ Expert
Programming Languages:
C++, C#

Contact Information

E-mail:
Private
MSN:
MSN  poncho4all@hotmail.com
Website URL:
Website URL  http://

Friends

Comments

poncho4all has no profile comments yet. Why not say hello?