jqxLoader and it is not appearing - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: ajax loader, jQuery loader, jqwidgets loader, loader widget

This topic contains 3 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

jqxLoader and it is not appearing Posts
October 20, 2015 at 8:04 am jqxLoader and it is not appearing #77112

jonno
Participant

Hi Folks,

I’m attempting to use jqxLoader and it is not appearing.

This is the code i’m using.
$(document).ready(function () {
$(“#jqxLoader”).jqxLoader({ width: 250, height: 150, autoOpen: true });
});

Are there any places i need to check?
The call to jqxLoader is called while showing a jqxWindow.

October 20, 2015 at 8:08 am jqxLoader and it is not appearing #77113

Peter Stoev
Keymaster

Hi jonno,

Check whether you use the current version of jQWidgets, because this widget is New. Then check the examples and Getting Started help topic about jqxLoader to learn how to use it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 19, 2016 at 10:34 am jqxLoader and it is not appearing #81595

shami
Participant

jqx loader isnt appearing actually i am generating grid but till data to be shown in grid i want to make the loader running . data is to fetched from a web service.

here i am sharing code .

<title>UCRM All Enquiries</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.glacier.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets/jquery-1.11.3.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script src=”func3.js” type=”text/javascript”></script>
<script src=”grid.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxloader.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.export.js”></script>
<style type=”text/css”>
.auto-style1 {
text-align: right;
font-family: Arial;
font-size: medium;
}
.colorField {
background-color:#eeeeee;
}
</style>

<link href=”ucrmStyle.css” rel=”stylesheet” />
</head>

<body style=”background-color:#EEEEEE”>
<div id=”jqxLoader”>
</div>
<div id=”content”>
<script type=”text/javascript”>

function creategrid(data1)
{

var data = new Array();
var size;
var jdata=JSON.parse(data1);
size= Object.keys(jdata).length;
console.log(size);
var caseid={};
var pax={};
var cname={};
var ptitle={};
var pcost={};
var camount={};
var i_taylor={};
var pcd={};
var principle={};
var ulocation={};
var agent={};

var i=0;
var sel=0
while (i<size)
{

console.log(parseJsonDate(jdata[i].Case_createddate));

if ($(“#r_type”).text()==”Custom”)
{
if(jdata[i].IS_taylor==1)
{
if ($(“#c_type”).text()==”Application”)
{
if(jdata[i].App_id==(“200″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;

}

}
else if ($(“#c_type”).text()==”Enquiry”)
{
if(jdata[i].App_id==(“100″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;

}

}

}

}
else if ($(“#r_type”).text()==”General”)
{
if(jdata[i].IS_taylor==0)
{
if ($(“#c_type”).text()==”Application”)
{
if(jdata[i].App_id==(“200″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;

}

}
else if ($(“#c_type”).text()==”Enquiry”)
{
if(jdata[i].App_id==(“100″+jdata[i].Cust_id))
{
caseid[sel]=jdata[i].Case_id;
pax[sel]=getApplicantvisaprice(jdata[i].Case_id);
cname[sel]=jdata[i].Cust_name;
ptitle[sel]=jdata[i].Pkg_title;
pcost[sel]=jdata[i].Pkg_price;
camount[sel]=jdata[i].Case_Amount;
i_taylor[sel]=jdata[i].IS_taylor;
pcd[sel]= $.jqx.dataFormat.formatdate(parseJsonDate(jdata[i].Case_createddate), ‘dd-MM-yyyy’);
principle[sel]=inputstatus(jdata[i].Prin_title);
ulocation[sel]=inputstatus(jdata[i].User_location);
agent[sel]=jdata[i].Case_createdby;
sel++;

}

}

}

}

i++;

}

var k = 0;
while (k<sel) {
var row = {};
row[“sr_no”] = k+1;
row[“case_id”] = caseid[k];
row[“Cust_name”] = cname[k];
row[“pax”] = pax[k];
row[“Pkg_title”] = ptitle[k];
row[“pkg_cost”] = pcost[k];
row[“camount”] = camount[k];
row[“IS_taylor”] = i_taylor[k];
row[“Case_createddate”]=pcd[k];
row[“principle”]=principle[k];
row[“ulocation”]=ulocation[k];
row[“agent”]=agent[k];

data[k] = row;
k++;
}

var source =
{
localData: data,
dataType: “array”
};

var dataAdapter = new $.jqx.dataAdapter(source,{
loadComplete: function () { $(‘#jqxLoader’).jqxLoader(‘close’); }

});

var cellsrenderer2 = function (row, column, value) {
return ‘<div style=”text-align: left;font-weight:bold;margin-top: 5px;margin-left: 8px;”>’ + value + ‘</div>’;
}
var cellsrenderer = function (row, column, value) {

return ‘<div style=”text-align: left;margin-top: 5px; margin-left: 8px;”>’ + value + ‘</div>’;

}

var columnsrenderer = function (value) {
return ‘<div style=”text-align: left;font-weight:bold; margin-top: 5px; margin-left: 8px;”>’ + value + ‘</div>’;
}
var bgr = function (row, column, value, data) {
if ((row%2)==1) {
return “colorField”;
}
}

$(“#dataTable”).jqxDataTable(
{
width: “99.90%”,
height: 700 ,
source: dataAdapter,
pageable: false,
// pageSize: 10,
rowDetails: false,
filterable: true,
filterMode: ‘advanced’,
aggregatesHeight: 25,
showAggregates: true,
sortable: false,
ready: function () {
// expand the first details.
$(“#dataTable”).jqxDataTable();
},

columns: [
{ text: ‘SR #’, datafield: ‘sr_no’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr,width:130, aggregates: [{
‘Total’:
function (aggregatedValue, currentValue, column, record) {

return currentValue;
}
}],
aggregatesRenderer: function (aggregates, column, element) {
var renderString = “<div style=’margin: 4px; text-align: center; height: 100%;’>”;
renderString += “RECORDS: “+ aggregates.Total + “</div>”;
return renderString;
}

},
{ text: ‘CASE ID’, datafield: ‘case_id’,renderer: columnsrenderer, cellsrenderer: cellsrenderer2,cellclassname: bgr },
{ text: ‘CUSTOMER NAME’, datafield: ‘Cust_name’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘PAX’, datafield: ‘pax’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘PACKAGE TITLE’, datafield: ‘Pkg_title’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
// { text: ‘PACKAGE COST’, datafield: ‘pkg_cost’,renderer: columnsrenderer, cellsrenderer: cellsrenderer ,cellclassname: bgr,cellsformat: ‘d’},
{ text: ‘CASE AMOUNT’, datafield: ‘camount’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr ,cellsformat: ‘d’, aggregates: [{
‘Total’:
function (aggregatedValue, currentValue, column, record) {
var total = currentValue;
return aggregatedValue + total;
}
}],

aggregatesRenderer: function (aggregates, column, element) {
var renderString = “<div style=’margin: 4px; text-align: center; height: 100%;’>”;
renderString += “TOTAL: “+ aggregates.Total + “</div>”;
return renderString;
}

},
{ text: ‘PRINCIPLE’, datafield: ‘principle’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘LOCATION’, datafield: ‘ulocation’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘AGENT’, datafield: ‘agent’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr},
{ text: ‘CREATE DATE’, datafield: ‘Case_createddate’,renderer: columnsrenderer, cellsrenderer: cellsrenderer,cellclassname: bgr}
]
});
$(‘#jqxLoader’).jqxLoader(‘close’);
$(“#grid”).show();
$(“#dataTable”).show();
}
$(document).ready(function () {

$(“#csvExport”).click(function () {
$(“#dataTable”).jqxDataTable(‘exportData’, ‘csv’);
});
$(“#dashboard”).on(‘click’, function () {

window.location=’http://221.120.222.66:8004/dashboard.html’;

});
$(“#screenLock”).hide();
// Create a jqxDateTimeInput
$(“#fromdate”).jqxDateTimeInput({ width: ‘130px’, height: ’25px’ });
$(“#todate”).jqxDateTimeInput({ width: ‘130px’, height: ’25px’ });

$(“#jqxLoader”).jqxLoader({ theme: ‘energyblue’,width: 100, height: 60, imagePosition: ‘top’});

$(“#csvExport”).jqxButton();

var source = [
“Custom”,
“General”
];
// Create a jqxDropDownList
$(“#r_type”).jqxDropDownList({ source: source, selectedIndex: 1, width: ‘130’, height: ’25’});

var source_case = [
“Application”,
“Enquiry” ];
// Create a jqxDropDownList
$(“#c_type”).jqxDropDownList({ source: source_case, selectedIndex: 1, width: ‘130’, height: ’25’});

$(“#search”).jqxButton();

$(“#search”).on(‘click’, function () {

$(‘#jqxLoader’).jqxLoader(‘open’);

var fdate = $(“#fromdate”).jqxDateTimeInput(‘getDate’);
var frm_date = $.jqx.dataFormat.formatdate(fdate, ‘yyyy-MM-dd’);

var tdate = $(“#todate”).jqxDateTimeInput(‘getDate’);
var to_date = $.jqx.dataFormat.formatdate(tdate, ‘yyyy-MM-dd’);

var data1=get_data(frm_date,to_date);
if(data1==false)
{
var url = “default.html”;
$(location).attr(‘href’,url);
}
else
{
creategrid(data1);
}

});

});

</script>
<div id=”digBox” class=”diagBox” ></div>
<div id=”screenLock” style=”width:100%; height:100%; top:0px; left:0px; position:absolute; background-color:black; opacity:0.4; z-index:9″></div>
<div id=”formHeader” class=”FormHeader”>
<span id=”infoLbl” class=”infoLables”> REPORTS</span>
<br/>
<input id=”dashboard” type=”button” class=”enqTabButton” value=”DASHBOARD” style=”left: 21px; top: 36px; position: absolute” />
</div>
<br/>
<br/>
<br/>
<br/>

<div id=”controls” style=”background-color:#D2D7D3″>

<div>
<table style=”width: 100%”>
<tr>
<td style=”width: 264px”></td>
<td style=”text-align:left;width: 98px;” class=”lables”>SELECT :</td>
<td style=”width: 255px;”>
<div id=’r_type’>
</div>
</td>
<td></td>
<td style=”width: 85px;” class=”lables”>FROM DATE :</td>
<td><div id=’fromdate’></div></td>
</tr>
<tr>
<td style=”width: 264px”></td>
<td style=”text-align:left” class=”lables”>SEARCH TYPE :</td>
<td>
<div id=’c_type’>
</div>

</td>
<td></td>
<td class=”lables”>TO DATE :</td>
<td><div id=’todate’></div></td>

</tr>
<tr>
<td style=”width: 264px”></td>
<td style=”float:right”>

</td>

<td>
<div id=”search” style=”width: 59px;”

>SEARCH</div>
</td>
</tr>
</table>
</div>

</div>

<div id=”result”>

<div id=”dataTable”></div>
<br/>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
</div>

</div>

</body>

</html>

February 19, 2016 at 12:45 pm jqxLoader and it is not appearing #81607

Peter Stoev
Keymaster

Hi shami,

The loader as used in your code will not appear. You load your data from array and what you actually do is to show and right after that to hide the loader. I would suggest you to take a look at the loader’s online demos in order to learn how to use this widget and keep in mind that loadComplete of the dataAdapter when you bind it to Local Array will be called right after your DataTable initialization i.e you would not see a Loader because you hide it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.