I want to apply a CSS class to a gridview. I tried to apply this style
reference link, so I try this
$(function () {
$('[ID*=search_data]').on('click', function () {
var fromdate = $('[ID*=fromdate]').val();
var todate = $('[ID*=todate]').val();
var regiondrop = $('[ID*=regiondrop] option:selected')[0].value;
var tabledata= $('[ID*=tabledata]');
var obj = {};
obj.fromdate = fromdate;
obj.todate = todate;
obj.regiondrop = regiondrop;
Getdataa(obj);
return false;
});
});
function Getdataa(obj) {
//alert('1');
$.ajax({
type: "POST",
url: "WebForm1.aspx/search_data",
data: "{'fromdate':'" + obj.fromdate + "','todate':'" + obj.todate + "','regiondrop':'" + obj.regiondrop + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
var final = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response)
$("#tabledata").empty();
if (final.length > 0) {
$("#tabledata").append(
"<tr ><th>ID</th><th>OwnerName</th></tr>");
for (var i = 0; i < final.length; i++) {
if (final[i] !== null) {
$("#tabledata").append("<tr><td>" +
final[i][0] + "</td> <td>" +
final[i][1] + "</td> <td>" +
}
}
}
else {
$("#tabledata").hide();
$("#Label4").text("No Data");
}
},
error: function (error) {
alert("error");
}
});
}
UPDATE
ok i update these lines in jquyer after $("#tabledata").empty();
$("th").addClass("GridviewScrollHeader");
$("td").addClass("GridviewScrollItem");
but when i build then there is no effect in grid view
And gridview in html
<table id="tabledata">
</table>
When i apply this then gridview is display with simple where as i want to apply this css in gridview when i apply this then gridview display without formatting..
what i try
what i want
So how i apply css ??
any solution?
ok i use this and this work for me
$("#tabledata tr:first").addClass('GridviewScrollHeader');
$("#tabledata tr").addClass('GridviewScrollItem');
Related
I have a project dropdown.A user can multiselect projects.
I want to pass the values selected from multiselection in dropdown as filter parameters in ajax url.
The code is as follows:
function CheckIfPresent(callback)
{
var proj = [];
var urlprograms;
if ($("#projNameDropdown :selected").text() != 'Select all projects') {
$('#projNameDropdown :selected').each(function (i, sel) {
proj[i++] = $(sel).val();
if (proj.length == 1)
urlprograms = "(Project_Name/Project_Name eq '" + proj[0] + "')";
});
if (proj.length > 1) {
for (i = 1; i < proj.length; i++) {
urlprograms += " or (Project_Name/Project_Name eq '" + proj[i] + "')";
}
}
}
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists('')/items?$select=*,Project_Name/Project_Name&$expand=Project_Name&$filter=" + urlprograms + "'",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function (dataActive) {
}
error: function (dataActive) {
console.log(dataActive);
}
});
}
I am not able to reach the success method and get error.What is that I am doing wrong?
this is my code to change the drop down list values when the checkbox is checked. I use asp.net mvc framework and java script to call the action. The list of the drop-down should show only the expired medicines when the checkbox is checked. But, it results in (Error: [object:object]). It didn't hit the controller action 'getmedicine'. Can anyone help me?
function GetMedicineList(_isExp) {
var url = "getmedicine";
$.ajax({
url: url,
data: { IsExp: _isExp },
cache: false,
type: "GET",
dataType: "json",
success: function (data) {
var markup = "<option value='0'>Please Select Expired Medicine</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$("#clientId").html(markup).show();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
and in the view,
#Html.CheckBoxFor(m => m.IsExp, new { Id = "isExp", #onchange = "GetMedicineList(this.value);" })
I solved the problem. One error is the action that I use to trigger is not an action result. It is a list. I changed it. I also I have did some changes in js. It works properly now.
var GetMedicine= function () {
var url = UrlMedicine.GetMedicineChecked;
var isExp = $('#isExp').val();
var url = url + '?isExp=' + isExp;
$.get(url, null, function (data) {
{
var markup = "<option value='0'>Please Select Expird medicine</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$("#medicineId").html(markup).show();
}
});
}
var GetMedicineList = function () {
if ($('#isExp').is(":checked")) {
userMedicineHistory.GetMedicine();
}
}
return {
GetMedicineList: GetMedicineList,
GetMedicine: GetMedicine
};
$(document).ready(function () {
$("#isExp").change(userMedicineHistory.GetMedicineList)
});
Probably a simple fix, The rest of the table is sorted excpet this part here
(right at the top)
The table will work now and again in the right order (data from source does not change) but is really dicey when it does or not
Ideas?
Sam
Heres the code
//first define a function
var sortTable = function() {
$("#tableid tbody tr").detach().sort(function(a, b) {
var dataA = $(a).find("td:eq(3)").text().trim();
var dataB = $(b).find("td:eq(3)").text().trim();
return parseFloat(dataA.substring(1)) - parseFloat(dataB.substring(
1));
}).appendTo('#tableid');
};
//include two files where rows are loaded
//1.js
$.ajax({
type: 'GET',
crossDomain: true,
dataType: 'json',
url: 'url1',
success: function(json) {
//var json = $.parseJSON(data);
for (var i = 0; i < json.results.length; i++) {
var section = json.results[i].section;
var no = json.results[i].avalible;
var price = json.results[i].price;
var button =
"<button class='redirect-button' data-url='LINK'>Compare</button>";
$("#tableid").append("<tr ><td>" + section +
"</td><td>" + no + "</td><td>" + price +
"</td><td>" + button + "</td></tr>");
$("#tableid").find(".redirect-button").click(function() {
location.href = $(this).attr("data-url");
});
}
sortTable();
},
error: function(error) {
console.log(error);
}
});
//and here is the 2nd js file
$.ajax({
type: 'GET',
crossDomain: true,
dataType: 'json',
url: 'url2',
success: function(json) {
//var json = $.parseJSON(data);
for (var i = 0; i < json.results.length; i++) {
var section = json.results[i].section;
var no = json.results[i].avalible;
var price = json.results[i].price;
var button =
"<button class='redirect-button' data-url='LINK'>Click Here</button>";
$("#tableid").append("<tr><td>" + section +
"</td><td>" + no + "</td><td>" + price +
"</td><td>" + button + "</td></tr>");
$("#tableid").find(".redirect-button").click(function() {
location.href = $(this).attr("data-url");
});
}
sortTable();
},
error: function(error) {
console.log(error);
}
});
The sorting as to do with spaces but is also linked to your jquery selector.
As often, array are 0 index based in Jquery, then if you want to sort on your price your 2nd column (0-index based) you need to do as below :
var sortTable = function() {
$("#tableid tbody tr").detach().sort(function(a, b) {
var dataA = $(a).find("td:eq(2)").text().replace(/\s/g, "");
var dataB = $(b).find("td:eq(2)").text().replace(/\s/g, "");
return parseFloat(dataA.substring(1)) - parseFloat(dataB.substring(
1));
}).appendTo('#tableid');
};
var json = {results:[{price:"$12 .45"}, {price:"$13 .45"}, {price:"$12 .05"}, ]}
for (var i = 0; i < json.results.length; i++) {
var section = json.results[i].section;
var no = json.results[i].avalible;
var price = json.results[i].price;
$("#tableid").append("<tr ><td>section</td><td>no</td><td>" + price);
}
sortTable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid"></table>
`
I am not very experienced with JavaScript. Please see the code below:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
function GetSQLTable() {
//alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
var res = str.split(",");
for (var i = 0; i < res.length; i++) {
$("#LoadingImage").show();
var div = document.createElement('div');
div.id = "div" + i
document.body.appendChild(div);
//alert(res[i]);
$.ajax({
type: "POST",
url: "Default3.aspx/GetSQLTable",
data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess(i,res.length),
failure: function (response) {
//alert(response.d);
alert('there was an error loading the webpage')
}
});
}
function OnSuccess(i,totalrows) {
return function (response) {
if (response.d != "") {
document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
}
}
}
}
window.onload = GetSQLTable
</script>
The code incrementally builds a webpage i.e. x number of HTML tables are obtained and displayed to the webpage as and when they become ready. This works.
The problem is I don't know how to remove the LoadingImage once the webpage is complete i.e. $("#LoadingImage").hide();. OnSuccess is called x number of times depending on how many tables are returned so I cannot put it in there.
One way would be to count the number of successful onSuccess() calls, and hide your loading image when they are all complete:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
function GetSQLTable() {
//alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
var res = str.split(",");
var numSucceeded = 0;
for (var i = 0; i < res.length; i++) {
$("#LoadingImage").show();
var div = document.createElement('div');
div.id = "div" + i
document.body.appendChild(div);
//alert(res[i]);
$.ajax({
type: "POST",
url: "Default3.aspx/GetSQLTable",
data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess(i,res.length),
failure: function (response) {
//alert(response.d);
alert('there was an error loading the webpage')
}
});
}
function OnSuccess(i,totalrows) {
return function (response) {
if (response.d != "") {
document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
numSucceeded++;
if (numSucceeded === totalrows) {
$("#LoadingImage").hide();
}
}
}
}
}
window.onload = GetSQLTable
</script>
Try using .when with an array of your ajax calls. Something like this (simplified to remove the irrelevant bits):
function GetSQLTable() {
//...
var calls = [];
for (var i = 0; i < res.length; i++) {
//..
calls.push($.ajax({
type: "POST",
//..
}));
}
$.when(calls).then(function(d) {
// all done!!!
});
I am using the following functions to populate the dropmenu menu, my problem is that my click event is not firing ,and i am not able to populate the dynamic dropdown menu.
This is my Jquery function
function testXmlMenu() {
getmenu(function (results) {
$("div[id ^= 'menuItemGroup']").slideUp(500);
$.ajax(
{
type: "POST",
url: "JsonWebService.asmx/GetMenuItems",
data: '{"menuId":"' + results.data.MenuId + '"}',
contentType: "application/json; charset=utf-8",
dataType: "xml",
success: function (items) {
$(event.target).children().remove();
var html = "<div id='menuItemGroup" + event.data.MenuId + "' style='display:none'>";
for (var j = 0; j < items.length; j++) {
html += "<div id='MenuItems'> <a href='" + items[j].NavigateUrl + "'>" +
items[j].Text + "</a></div>";
}
html += "</div>";
$(event.target).append(html);
$("#menuItemGroup" + event.data.MenuId).slideDown(500);
},
error: function (err) {
alert(err.status + " - " + err.statusText);
}
});
});
}
function getmenu(callback)
{
$.ajax({
type: "POST",
url: "JsonWebService.asmx/GetMenus",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "xml",
success:
function (results) {
$(results).find("Menu").each(function () {
var Text = $(this).find("Text").text();
var MenuId = $(this).find("MenuId").text();
alert(MenuId);
var dmenu = $("#Menudiv");
dmenu.append("<td><ul>"+Text+"</ul></td>");
$("dmenu.td").click(callback(results));
});
}
});
}
I think your jQuery selector is switched around for your click action.
It should be:
$("td.dmenu").click(callback(results));