10. Some Javascript & JQuery concepts

abril 10, 2022

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 then "dbclick" event is not triggered

To badly solve this, I have used the control-click event instead of click. To do so, I use Andrew's solution

  // Refresh the record when control-click is used from the DB and positons the recordset
  rowClick: function(args) {
    if (args.event.ctrlKey) {
	  var getData = args.item;
      var innerFields = Object.keys(getData);
    			
	  var myId=getData.id;
	  var pos=args.itemIndex;
	            
	  var count=arrData.length;
	  hiddenPos.val(pos);
	            	            
	  getAndUpdateActualRecord(getData, myId, myPos, myForm, divBotonera, count, innerFields, pos, true );
    }
	            
  },
       
  //Edit with double clic
  rowDoubleClick: function(args) {
    if(this.editing) {
      this.editItem($(args.event.target).closest("tr"));
    }
  },

3. JQuery: find elements with id and class

Sometimes, to locate certain components, it may be interesting to add a specific CSS class to them. A new css class can be created for that purpose. Imagine the name of the css clas is "myclass"

['pick','search','searchen','new','edit','copy','delete','print']
.forEach(value=>$("#botonera")
  .find($('#' + value + '-' + '0.myclass")).html(value));

In the previous example '#' + value + '-' + '0' represents the id, and ".myclass" is the defined css class.

Only the elements whose id is in the array and whose class is "myclass" , their Html info will be updated.

4. JQuery: find elements whose id starts with ..

You can locate the elements whose id that starts with "news"

['pick','search','searchen','new','edit','copy','delete','print']
.forEach(value=>$("#botonera")
  .find("[id^='news']").html(value);

5. Javascript get the ids separated by commas of a bidimensional array of records.

var strIds=(myArrData[myPos].map(obj => obj.id)).join(',');

Buscar este blog

Dantesque JSP