Validating special characters in JQUERY

function isValid(str){
return !/[&\[\]\\’/()\\””]/g.test(str);
}

function ValidateSpecialChar()
{
var ErrorMsg = “Special Charectors & [ ] ‘ / ( ) \\ \” are not allowed in”;
var IsValid=1;

var PrenomTxt = $(‘#Prenom’).val();
var NomDeFamilleTXT = $(‘#NomDeFamille’).val();

if(isValid(PrenomTxt) == false)
{
ErrorMsg = ErrorMsg +”\n -First name”;
IsValid =0;

}
if(isValid(NomDeFamilleTXT) == false)
{

ErrorMsg = ErrorMsg +”\n -Last name”;
IsValid =0;
}

if(IsValid ==0)
{
alert(ErrorMsg);
return false;
}
return true;
}

Breadcrumb using jquery

http://code.jquery.com/jquery-1.12.0.js

a + a:before {
content: ” >”;
/* content: ” \0020 \f105″; */
color: #D2322D;
}

a:link {
textcoration: none;
}

/*a:visited {
textcoration: underline;
}*/

a: hover {
color: red;
cursor: pointer;
}

.LastElement{
color:red;
cursor:text;

}

• Test 1
• Test 2
  • Level 1
  • Level 2
    • Level 3
    • Level 4
• Test 3

$(‘.items a’).on(‘click’, function() {
var $this = $(this),
$bc = $(‘

‘);
$this.parents(‘li’).each(function(n, li) {
$a = $(li).children(‘a’).clone();
$bc.prepend(‘ ‘,$a);
console.log($a);
});

$(‘.breadcrumb’).html( $bc );
$(‘.breadcrumb a’).attr(‘onclick’, ‘testfn(this); return false;’);
$(‘.breadcrumb a’).css(“text-decoration”, “none”);
$( “.breadcrumb a:last-child” ).removeAttr(‘href’);
$( “.breadcrumb a:last-child” ).addClass(“LastElement”);

return false;
});

function testfn(th)
{

var LevelName=$(th).text();
var lenLevel=LevelName.length;

if($(‘.breadcrumb’)){
var EntireHTML = $(‘.breadcrumb’).html();
EntireHTML = EntireHTML.substring(0, EntireHTML.indexOf(LevelName)+lenLevel);
$(‘.breadcrumb’).html(EntireHTML);
$( “.breadcrumb a:last-child” ).removeAttr(‘href’);
$( “.breadcrumb a:last-child” ).addClass(“LastElement”);

}
}

Breadcrumb using jquery

Insert title here
http://code.jquery.com/jquery-1.12.0.js
<!— http://code.jquery.com/jquery-migrate-1.3.0.js —>

a + a:before {
content: ” >”;
/* content: ” \0020 \f105″; */
color: #D2322D;
}

a:link {
textcoration: none;
}

/*a:visited {
textcoration: underline;
}*/

a: hover {
color: red;
cursor: pointer;
}

.LastElement{
color:red;
cursor:text;

}

<!—

Home /

—>

• Test 1
• Test 2
  • Level 1
  • Level 2
    • Level 3
    • Level 4
• Test 3

$(‘.items a’).on(‘click’, function() {
var $this = $(this),
$bc = $(‘

‘);
$this.parents(‘li’).each(function(n, li) {
$a = $(li).children(‘a’).clone();
$bc.prepend(‘ ‘,$a);
console.log($a);
});

$(‘.breadcrumb’).html( $bc );
$(‘.breadcrumb a’).attr(‘onclick’, ‘testfn(this); return false;’);
$(‘.breadcrumb a’).css(“text-decoration”, “none”);
$( “.breadcrumb a:last-child” ).removeAttr(‘href’);
$( “.breadcrumb a:last-child” ).addClass(“LastElement”);

return false;
});

function testfn(th)
{

var LevelName=$(th).text();
var lenLevel=LevelName.length;

if($(‘.breadcrumb’)){
var EntireHTML = $(‘.breadcrumb’).html();
EntireHTML = EntireHTML.substring(0, EntireHTML.indexOf(LevelName)+lenLevel);
$(‘.breadcrumb’).html(EntireHTML);
$( “.breadcrumb a:last-child” ).removeAttr(‘href’);
$( “.breadcrumb a:last-child” ).addClass(“LastElement”);
//return false;
}
}

Set URL dynamically for JQgrid

We can use the setGridParam method for setting the URL dynamically. Below is the syntax and example for this.

Syntax:

$(“#gridname”).setGridParam(
{
url:”new url”,
page:1
}
).trigger(“reloadGrid”);//Reload grid trigger

Example:

$(“#list”).setGridParam(
{
url:”RelatedPublication.cfc?method=GetUnrelatedPublications&PublicationID=”+pubid,
page:1
}
).trigger(“reloadGrid”);//Reload grid trigger

Show jqgrid in grid view / show all the records in one page with JQGRId

The below code works with and without the loadOnce option set to true. Note that you have to set the rowNum option to 0 first, if you leave out this option it’ll still default to the 20 records to show. Also, I’m assuming you’re returning the total rows from the server in the documented JSON reader format.

$(‘#bla’).jqGrid({
…
  ‘rowNum’      : 0,
‘loadOnce’    : true,
loadComplete:function(){
  $(this).jqGrid(‘setGridParam’, ‘rowNum’, ‘records‘);
},

//The JSON reader. This defines what the JSON data returned from the CFC should look like
jsonReader: {
root: “ROWS”, //our data
page: “PAGE”, //current page
total: “TOTAL”, //total pages
records:”RECORDS”, //total records
userdata:”USERDATA”, //Userdata we will pass back for feedback
cell: “”, //Not Used
id: “0” //Will default to frist column
}
…
});

 

 

Altrow is not working in JQgrid

There are many methods to set alternate row color for jqgrid.

We can use altRow and altClass property in jqgrid for achieving this. Following is my code:

altRows:true,
altclass:’myAltRowClass’

and CSS is

.myAltRowClass
{
background-color: Fuchsia;
background-image:none;
}

2. By adding a new CSS class to jqgrid.css we can achieve this. Below is the steps to do this

1. Set grid property altRows:true,
2. Add the below CSS class to end of grid.css
.ui-jqgrid tr.ui-priority-secondary td { background-color: #DDDDDD; }

3. Without using altRows and altClass property.

loadComplete: function() {
$(“tr.jqgrow:odd”).css(“background”, “#DDDDDC”);

How to show total records in JQGRID footer

Use the recordtext property wit value like below.

recordtext:'{0} – {1} of {2} records’

For example,

var grid = $(“#list1″)
grid.jqGrid({
url:”RelatedPublication.cfc, //CFC that will return the users
datatype: ‘json’, //We specify that the datatype we will be using will be JSON
colNames:[‘UPID’,’PUBNUMBER’,’VOL”], //Column Names

colModel :[
{name:’UPID’,index:’UPID’, width:50,resizable:false,sortable:true,sorttype:”int”,resizable:false,editrules:{readonly:true}},
{name:’PUBNUMBER’,index:’PUBNUMBER’, width:130,resizable:false, sorttype:”text”,editable:true,edittype:”text”,editoptions:{size:30,maxlength:50},editrules:{required:true}},
{name:’VOL’,index:’VOL’, width:150,resizable:false, align:”left”,sorttype:”text”,editable:true,edittype:”text”,editoptions:{size:30,maxlength:50},editrules:{required:true}},
],

pager: $(‘#pager1’), //The div we have specified, tells jqGrid where to put the pager
rowNum:25, //Number of records we want to show per page
rowList:[25,50,100,500,1000,5000,10000,15000,20000,50000], //Row List, to allow user to select how many rows they want to see per page
sortorder: “asc”, //Default sort order
sortname: “ID”, //Default sort column
viewrecords: true, //Shows the nice message on the pager
imgpath: ‘/themes/jqgrid/css/images’, //Image path for prev/next etc images
caption: ‘Related Publications’, //Grid Name
mtype:’GET’,
recordtext:'{0} – {1} of {2} records’,
scrollerbar:true

 

jqGrid multiselect “check all” in header: how to hide it?

The checkbox in the header has the id which is combined from the “cb_” prefix and the grid id. So you can hide the element with

var myGrid = $("#list");
$("#cb_"+myGrid[0].id).hide();

how to know JqGrid multiselect ‘select all’ checkbox is checked

There is a separate event handler to capture the Select All event. From the documentation:

onSelectAll

Sends you the following parameters: aRowids, status

This event fires when multiselect option is true and you click on the header checkbox. aRowids is an array of the selected rows (rowid’s). status is a boolean variable determining the status of the header check box – true if checked, false if not checked. Note that the aRowids array will always contain the ids whether the header checkbox is checked or unchecked.

When this event fires, in your case you’ll want to do the following to show the correct count of selected rows:

onSelectAll: function(aRowids, status) {
    //Use a ternary operator to choose zero if the header has just been unchecked, or the total items if it has just been checked.
    $("totalSelected").val(status === false ? 0 : aRowids.length);
}

Posting Values to CFC using JQUERY

Using $.POST method we can achieve this. Below is the syntax.

$.ajax({

type: "POST",

url: url,

data: data,

success: success,

dataType: dataType

});

For Example,

jQuery(“#BTN_REMOV”).click( function() {
var s;
CurrentPubNum=”12344″;
DBName=”testdb”;
DBUserType=”testdbtype”;
DBUserName=”testuser”;
DBUserPass=”TestPass”;
s = jQuery(“#list1”).jqGrid(‘getGridParam’,’selarrrow’); //for getting the list of all selected rowids from jqgrid
res=s;
res=res.join();
$.post(“RelatedPublication.cfc”,                      {method:”RemovePublicationsFromRelatedGrid”,PublicationID:res,CurrPub:CurrentPubNum,DBName:DBName,DBType:DBUserType,DBUser:DBUserName,DBPass:DBUserPass, returnFormat:”json”},
function(IsSuccess) {
if(IsSuccess == 1){
alert(“Publication removed successfully.”);

}
else
{
alert($.trim(IsSuccess));
}
})

});