Skip to content

Verificar si key existe en objeto JSON / Check if key exists in JSON object using jQuery

JQuery

 

 

 

if you have an array

var subcategories=[{name:"test",desc:"test"}];

function hasCategory(nameStr) {
        for(let i=0;i<subcategories.length;i++){
            if(subcategories[i].name===nameStr){
                return true;
            }
        }
        return false;
    }

if you have an object

var category={name:"asd",test:""};

if(category.hasOwnProperty('name')){//or category.name!==undefined
   return true;
}else{
   return false;
}

Continue reading "Verificar si key existe en objeto JSON / Check if key exists in JSON object using jQuery"

Close a Modal using the ESC Key? / Cerrar Modal usando ESC

JavaScriptJQuery

 

 

 

$(document).ready(function(){

    $('.modal').modal({show: false, keyboard: false}); // disable keyboard because it conflicts below

    $('.modal').on('show.bs.modal', function (event) {
       //add modal id to array
       modals.push(event.target.id);
    });


    document.onkeydown = function(evt) {
        evt = evt || window.event;
        var isEscape = false;
        if ("key" in evt) {
            isEscape = (evt.key === "Escape" || evt.key === "Esc");
        } else {
            isEscape = (evt.keyCode === 27);
        }
        if (isEscape) {

            if(modals.length>0){
                //get last modal id by using pop(). 
                //This function also removes last item in array.
                var id = modals.pop();
                if($('#'+id).is(':visible')){ // if modal is not closed by click or close button
                    $('#'+id).modal('toggle');
                }
            }else{
                alert("Could not find any modals!");
            }
        }
    };

});
Continue reading "Close a Modal using the ESC Key? / Cerrar Modal usando ESC"

Determine Click Position (Row and Column Number) on click of a table cell

JQuery

 

 

Prepare a dummy HTML table for testing purpose. 'result' Div will show the corresponding row and column number when a particular cell of 'myTable' table is clicked.

<div id="result"> </div>
<table id="myTable" border="1" style="border-collapse: collapse;" cellpadding="8">
    <!--1st ROW-->
    <tr>
        <td>row 1, col 1</td>
        <td>row 1, col 2</td>
        <td>row 1, col 3</td>
        <td>row 1, col 4</td>
        <td>row 1, col 5</td>
    </tr>

    <!--2nd ROW-->
    <tr>
        <td>row 2, col 1</td>
        <td>row 2, col 2</td>
        <td>row 2, col 3</td>
        <td>row 2, col 4</td>
        <td>row 2, col 5</td>
    </tr>

    <!--3rd ROW-->
    <tr>
        <td>row 3, col 1</td>
        <td>row 3, col 2</td>
        <td>row 3, col 3</td>
        <td>row 3, col 4</td>
        <td>row 3, col 5</td>
    </tr>

    <!--4th ROW-->
    <tr>
        <td>row 4, col 1</td>
        <td>row 4, col 2</td>
        <td>row 4, col 3</td>
        <td>row 4, col 4</td>
        <td>row 4, col 5</td>
    </tr>

    <!--5th ROW-->
    <tr>
        <td>row 5, col 1</td>
        <td>row 5, col 2</td>
        <td>row 5, col 3</td>
        <td>row 5, col 4</td>
        <td>row 5, col 5</td>
    </tr>
</table>
Copy

Add following Javascript code to determine the click position on click of a table cell.

$(document).ready(function(){
    $("#myTable td").click(function() {

        var column_num = parseInt( $(this).index() ) + 1;
        var row_num = parseInt( $(this).parent().index() )+1;

        $("#result").html( "Row_num =" + row_num + "  ,  Rolumn_num ="+ column_num );
    });
});
Copy

Download SrcCodes

demo.html

Continue reading "Determine Click Position (Row and Column Number) on click of a table cell"

Alertify, cambios estilos (css)

JQuery

 

 

Either update the theme you are using or override the message CSS rules, the default theme uses the following rules:

.alertify-notifier .ajs-message {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  text-align: center;
  border: solid 1px #ddd;
  border-radius: 2px;
}
.alertify-notifier .ajs-message.ajs-success {
  color: #fff;
  background: rgba(91, 189, 114, 0.95);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.alertify-notifier .ajs-message.ajs-error {
  color: #fff;
  background: rgba(217, 92, 92, 0.95);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.alertify-notifier .ajs-message.ajs-warning {
  background: rgba(252, 248, 215, 0.95);
  border-color: #999;
}

To change the font color of a specific message type, override it's corresponding rule:

.alertify-notifier .ajs-message.ajs-success{
      color: blue;
}
 
Continue reading "Alertify, cambios estilos (css)"

Insertar Html dentro de otro HTML

JavaScriptJQuery

 

 

My solution is similar to the one of lolo above. However, I insert the HTML code via JavaScript's document.write instead of using jQuery:

a.html:

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

Alternatively for browsers that support template literals the following also works:

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);
 
Continue reading "Insertar Html dentro de otro HTML"

Tabulator, table, multiple filtro

JQuery


FILTROS CON SELECTORES CHOSEN, ACUMULAR FILTROS USANDO TABULATOR

selGrupos.on('change',function (){
    var filters = table.getFilters();
    $.each(filters, function (i,row) {
        if (row.field==="artgru") {
            table.removeFilter(row.field,row.type,row.value)
        }
    })
    if ($(this).val()!=='0') {
        table.addFilter("artgru", "like", $(this).val());
    }
});

selLineas.on('change',function (){
    var filters = table.getFilters();
    $.each(filters, function (i,row) {
        if (row.field==="artlin") {
            table.removeFilter(row.field,row.type,row.value)
        }
    })
    if ($(this).val()!=='0') {
        table.addFilter("artlin", "like", $(this).val());
    }
});

Array de objetos, sort, order, by key

JavaScriptJQuery

 

How to sort alphabetically an array of objects by key in JavaScript

To sort an array of objects by some key, you will need a valid structure in your array, obviously an array of objects can only have objects with at least one key (the one that you want to sort). In this example, we'll have the MyData variable that has the following structure: 

var MyData = [
    { id : 1, name: "Angel Miguel",   city: "Nex Mexico" },
    { id : 2, name: "Michael Rogers", city: "Bogotá"     },
    { id : 3, name: "Steve Rogers",   city: "New York"   },
    { id : 4, name: "Ángel José",     city: "Bucaramanga"},
    { id : 5, name: "Carlos Delgado", city: "Nex Mexico" },
    { id : 6, name: "Jhonny Zapata",  city: "Zacatecas"  },
    { id : 7, name: "Bruce Wayne",    city: "Gotham"     },
    { id : 8, name: "Speedy Gonzales",city: "Nex Mexico" }
];

Create a custom sort Function

you can simply use:

/**
  Function to sort alphabetically an array of objects by some specific key.
  
  @param {String} property Key of the object to sort.
 /
function dynamicSort(property) {
    var sortOrder = 1;

    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }

    return function (a,b) {
        if(sortOrder == -1){
            return b[property].localeCompare(a[property]);
        }else{
            return a[property].localeCompare(b[property]);
        }        
    }
}

 

 Sort by key in ascending order

// Sort the MyData array with the custom function
// that sorts alphabetically by the name key
MyData.sort(dynamicSort("name"));
// Display data with new order !
console.log(MyData);

object with the new order:

[  
    { "id":4, "name": "Ángel José",     "city":"Bucaramanga" },
    { "id":1, "name": "Angel Miguel",   "city":"Nex Mexico"  },
    { "id":7, "name": "Bruce Wayne",    "city":"Gotham"      },
    { "id":5, "name": "Carlos Delgado", "city":"Nex Mexico"  },
    { "id":6, "name": "Jhonny Zapata",  "city":"Zacatecas"   },
    { "id":2, "name": "Michael Rogers", "city":"Bogotá"      },
    { "id":8, "name": "Speedy Gonzales","city":"Nex Mexico"  },
    { "id":3, "name": "Steve Rogers",   "city":"New York"    }
]

Sort by key in descending order

// Sort the MyData array with the custom function
// that sorts alphabetically in descending order by the name key
MyData.sort(dynamicSort("-name"));
// Display data with new order !
console.log(MyData);

This would output:

[
    { "id" :3, "name" : "Steve Rogers",    "city":"New York"   },
    { "id" :8, "name" : "Speedy Gonzales", "city":"Nex Mexico" },
    { "id" :2, "name" : "Michael Rogers",  "city":"Bogotá"     },
    { "id" :6, "name" : "Jhonny Zapata",   "city":"Zacatecas"  },
    { "id" :5, "name" : "Carlos Delgado",  "city":"Nex Mexico" },
    { "id" :7, "name" : "Bruce Wayne",     "city":"Gotham"     },
    { "id" :1, "name" : "Angel Miguel",    "city":"Nex Mexico" },
    { "id" :4, "name" : "Ángel José",      "city":"Bucaramanga"}
]
Continue reading "Array de objetos, sort, order, by key"

Chart Pie, libreria chartJS

JQuery

 

 

Modo de uso de la libreria y ejemplo de random colors

<div class="containerChart">
    <button id="renderBtn">Graficar</button>
    <canvas id="myChart"></canvas>
</div>

 

function renderChart(data, labels, coloR) {
    var pie = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(pie, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                label: 'Servicio Técnico',
                data: data,
                backgroundColor: coloR
            }]
        },
        options: {
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        }
    });
}

$("#renderBtn").on('click', function () {
    var dynamicColors = function() {
        var r = Math.floor(Math.random()  255);
        var g = Math.floor(Math.random()  255);
        var b = Math.floor(Math.random() * 255);
        return "rgb(" + r + "," + g + "," + b + ")";
    };
    data = [];
    labels =  [];
    coloR = [];
    $.each(dataOper.lineas, function (i,item) {
        for (i=0;i<item.length;i++) {
            labels.push(item[i].lindes);
            data.push(item[i].subtot);
            coloR.push(dynamicColors())
        }
    });
    renderChart(data, labels, coloR);
});

JqGrid, busqueda

JQuery

Aqui te dejo una funcion que me permite buscar por cualquier campo mostrado en tu grilla:

definiendo la Grilla y el input de busqueda:

<input type="text" id="#search_cells">
<table id="gridEjemplo"></table>
<div id="pagerEjemplo"></div>

en tu archivo js

        //funcion Buscar
        var timer;
        $("#search_cells").on("keyup", function() {
            var self = this;
            if(timer) { clearTimeout(timer); }
            timer = setTimeout(function(){
                //timer = null;
                $("#gridEjemplo").jqGrid('filterInput', self.value);
            },0);
        });

con esta funcion te buscara por cualquier campo mostrado en tu grid.. espero te sirva..!!

Continue reading "JqGrid, busqueda"

Tabulator, busqueda, filtros

JQuery


 

Forma 1 de filtro (probada LinkedMobile)

$("#nav-search-input").keyup(function () {
    table.setFilter("artdes","like", $(this).val());
});

Forma 2 de filtro (aun no probrada)

var filters = [];
 var columns = table.getColumns();
var search = $(this).val();

columns.forEach(function(column){
    filters.push({
        field:column.getField(),
        type:"like",
        value:search,
    });
});

table.setFilters([filters]);

Manejo de TABS (Pestañas)

JQuery


 

Forma 1 (Personalmente no probada)

$('.selector').tabs({
    activate: function(event ,ui){
    //console.log(event);
    console.log(ui.newTab.index());                    }
});

Forma 2 (Probada en LinkedMobile)

$("#myTab").on("click", "a.tab1", function(){
    console.log("selected tab id: " + $(this).attr("href"));
    console.log("selected tab name: " + $(this).find("span").text());
})
Continue reading "Manejo de TABS (Pestañas)"

Deferred, Promises, Promesas

JavaScriptJQuery

 

 

$.Deferred. ¿Qué es?

El objeto deferred se introdujo en jQuery a partir de la versión 1.5 y provocó una importante mejora en las interfaces de programación asíncrona (y síncrona …) que se usaban hasta entonces. Es un objeto concatenable sobre el que se pueden registrar múltiples callbacks que se ejecutarán en función del resultado final de la deferred.

¿Como creamos uno?

Cuando creamos un objeto deferred mediante …

var deferred = new $.Deferred(); 
//o bien 
var deferred = $.Deferred();

Este objeto deferred puede estar en 3 estados:

pending: El objeto está en un estado incompleto
resolved: El objeto se ha resuelto
rejected: el objeto se ha rechazado;

Cuando lo creamos, por supuesto, estará “pending”.

Si llamados al método resolve() del objeto deferred lo pasaremos al estado “resolved”.

Por el contrario, si llamamos al método reject() lo pasaremos al estado “rejected”.

Usar el método done() para asociar un callback (o varios) que se ejecutarán cuando la deferred pase a “resolved”.

Usar el metodo fail() si en lugar de “resolved” pasa a “rejected”.

Además de done() y fail() hay otros muchos más métodos que nos permiten hacer otras cosas como:

always(): Ejecutará sus callbacks independientemente del estado al que pase la deferred

progress(): Ejecutará callbacks cuando la deferred emita notificaciones de progreso mediante notify()

notify(): Hace que se llamen las callbaks de progress()

then(): puedo usar then() para asociar callbacks para done, fail o progress

También tenemos otra serie de métodos para averiguar el estado de la deferred, por ejemplo

isRejected(): Para saber si ha sido rechazada

isResolved(): Para averigar si se ha resuelto

state(): Para comprobar el estado actual

Retornando promises

function wait() { 
    var deferred = $.Deferred(); 
    setTimeout(function() { 
        deferred.resolve(); 
    }, 5000); 
    return deferred.promise(); 


wait().done(function() { 
    alert("He esperado 5 segundos!!"); 
});

 

Los métodos deferred.resolve y deferred.reject además permiten devolver valores para ser utilizados por las funciones de devolución.

Función con deferred.resolve y deferred.reject devolviendo valores reutilizables

// función que calcula si un numero entero es par o impar
var isEven = function(number) {
 
    var dfd = $.Deferred();
 
    // resuelve o rechaza al objeto utilizando
    // y devuelve un texto con el resultado
    if (number%2 == 0){
        dfd.resolve('El número ' + number + ' es par');
    } else {
        dfd.reject('El número ' + number + ' es impar');
    }
 
    // devuelve al objeto diferido con su estado definido
    return dfd.promise();
 
}
 
isEven(2).then(
 
       function(result){
           console.log(result); // Registra 'El número 2 es par'
       },
 
       function(result){
           console.log(result);
       }
 
);

Nota

Es posible determinar el estado de un objeto diferido a través del método deferred.state. El mismo devuelve un string con alguno de estos tres valores: pendingresolved o rejected. Para más detalles sobre deferred.state, puede consultar http://api.jquery.com/deferred.state/.

Continue reading "Deferred, Promises, Promesas"

Ventanas Modales

JQuery

 

 

Se puede detectar el cierre de una ventana modal y limpiar el contenido de un jgrid y del campo de busqueda:

$('.modal').on('hidden.bs.modal', function () {
    $.jgrid.gridUnload(grilla.selector);
    $('.modal-body').find('input.search').val('');
})

Se puede detectar la apertura de una ventana modal, y activar el foco dentro del a ventana en un input con la clase search:

$('.modal').on('show.bs.modal', function () {
    setTimeout(function () {
        $('input.search').focus();
    },200)
})