Entradas

Mostrando entradas de abril, 2022

13. Getting coordinates from image to create map areas

Imagen
0. Introduction  Let's see this code (test01.html) <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title> Insert title here </title> <!-- jQuery --> <script src= "http://code.jquery.com/jquery-latest.js" > </script> <script> function getPos(e){ x = e.clientX; y = e.clientY; //px=e.PageX; //py=e.PageY; qx = $( document ).scrollLeft(); qy = $( document ).scrollTop(); cursor = "xy=(" + x + "," + y + ")(" + px + "," + py + ")(" + qx + "," + qy + ")" ; document .getElementById( "displayArea" ).innerHTML = cursor; document .getElementById( "myImg" ).setAttribute( 'title' ,cursor); } function stopTracking(){ document .getElementById( "disp...
Publicar un comentario
Leer más

12 jsGrid Particularities

Imagen
 1. Controller - loadData To use controller loadData ensure that  autoload: true, autoload : true , controller : { loadData : function (filter) { return arrData}, insertItem : $.noop, updateItem : $.noop } 2. Creating custom options for every row 1. Create the headerTemplate with buttons "clean" and "execute". 2. Add a "select" with the options 3, Create the itemTemplate 4. Add a textbox (for every row) fields : [ { headerTemplate : function () { return $( "<div>" ).append( $( "<button/>" ) .attr( "type" , "button" ) //.text("Clean") .attr( "data-bs-toggle" , "tooltip" ) .attr( "data-bs-placement" , "top" ) .attr( "title" ,cleanText) .addClass( "text-danger" ) .append( "<i cla...
Publicar un comentario
Leer más

11. TypeScript (1) recap with "Makigas"

Imagen
Credits Makigas typescript course . Makigas (Dani)  is a great programming evangelist. His channel is in Spanish.  1. Install VS Code, node, and npm  2. Create a project folder (for instance makigas01)  3. Enter this folder and type npm init . Accept all the default parameters. Verify that the file package.json has been created.  4. Install typescript inside this project ( npm i --save-dev typescript ) and verify that in this folder there are these files or directories (node_modules, package.json, and package-lock.json) and execute  node_modules/.bin/tsc and verify that works.  5. In the package.json file verify the ts version (in the dependencies section, in my case is 4.6.4)  6. Open VS Code and go to the folder makigas01 and press  to create a new file for instance first.ts . Save it with Cntrl-S    7. Compiling: Option 1: (terminal  node_modules/.bin/tsc first.ts  ) Option 2: (Edit package.json and in the scripts se...
Publicar un comentario
Leer más

10. Some Javascript & JQuery concepts

1. Serializing  const myObj = { fld01 : 1 , fld02 : 2 , fld03 : "\"hello\"" } ; //1. Serialize to json // returns { "fld01" : 1 , "fld02" : 2 , "fld03" : "\"hello\"" } var myJsonSerialize = JSON. stringify (myObj); //2. Serialize to URL ->equivalent to $("form").serialize) // returns fld01=1&fld02=2&fld03=%22hello%22 var myURLSerialize = $. param ( myObj ); //3. Serializing a form to pass ass a URL // returs something like FirstName=Mickey&LastName=Mouse $( "form" ). serialize (); //4. Get the form as an object var formData = new FormData ($( 'form' )[ 0 ]); //5. Convert the formdata to json var data = JSON. stringify ( Object . fromEntries (formData)); 2. JQuery click events conflict It is recommended not to use click and dbclick at the same time with jquery (and jsgrid ). If you use alert or console.log  in "click" event th...
Publicar un comentario
Leer más