I'm trying to handle callback of jsonp request, but callback function is not run.
$(document).ready(function() {
$.ajax({
url: 'https://storage-testnet.shiftproject.com/peers?callback=?',
type: "GET",
dataType: 'jsonp',
jsonpCallback: 'peersData',
complete: peersData
});
var peersData = function (data) {
if(!data){
console.log("Error, can't retrieve data");
} else {
console.log(data)
}
}
}
Is there some mistake?
Your data is not wrapped in a pad eg. the following
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
//credit https://www.sitepoint.com/jsonp-examples/
function jsonCallback(json) {
console.log(json);
}
$.ajax({
url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
dataType: "jsonp"
});
</script>
https://jsfiddle.net/kblau237/pmw0yah9/5/
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tut156</title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#theButton").click(function () {
//moved your stuff inside a button click
$.ajax({
//question mark for callback will cause jquery to generate a random callback
//I am taking out the callback
url: 'https://storage-testnet.shiftproject.com/peers',
type: "GET",
dataType: 'json',
success: function (data) {
alert(JSON.stringify(data));
}
});
})
})
</script>
</head>
<body>
<div>
<input type="button" id="theButton" value="Go" />
</div>
</body>
</html>
I am using bootstrap treeview plugin (https://github.com/jonmiles/bootstrap-treeview). I am not sure if this is an issue with treeview plugin or the way i am implementing the code.I am trying to load the treeview using data from ajax call back. Here is the code sample that i am using:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Required Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="~/Content/BootStrap/bootstrap-treeview.js"></script>
</head>
<body>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-sm-2"><div id="lstCollections">This will display my list of all collections</div></div>
</div>
</body>
</html>
<script type="text/javascript">
function getTree(handleData) {
$.ajax({
type: "GET",
url: '#Url.Action("Get","DatabaseSchema")',
dataType: 'json',
success: function (response) {
handleData(response);
}
});
}
$(document).ready(function () {
getTree(function (output) {
var collectionTree = [];
output.forEach(function (a) {
collectionTree.push({ text: a });
});
//var tree2 = [{ text: "Buyer" }, {text: "text1" }, { text: "text2" }, { text: "text3" }];
$('#lstCollections').treeview({ data: collectionTree });
});
})
</script>
When I run the code, I don't see any data in my treeview. In my developer tool(for chrome browser), in console I see "Uncaught TypeError: $(...).treeview is not a function(…)" error on line " $('#lstCollections').treeview({ data: collectionTree });"
If i replace $('#lstCollections').treeview({ data: collectionTree });with $('#lstCollections').treeview({ data: tree2}); (where tree2 is a variable that i have declared inside document.ready function, I still get the same error.
Interestingly, If i populate the treeview using following call outside of ajax call back function :
function nonAjax() {
var tree = [{ text: "Buyer" }, { text: "text1" }, { text: "text2" }, { text: "text3" }];
return tree;
}
$('#lstCollections').treeview({` data: nonAjax() });
Everything works!!
I am not sure why I am gettig treeview is not function() when the call is inside ajax callback function.
The right format that should pass to the treeview isn't what you get back from the Ajax call you should parse the json object like the following example:
let invalid = '{ "bank": "CityBank", "sum": "500" }, { "bank": "WPBank", "sum": "700" }';
let valid = JSON.parse("[" + invalid + "]");
Now you can pass the valid variable to the treeView without any problems.
It all about adding square brackets notation to the JSON object!
I'm trying to edit a record in jqgrid ( trying to make a call to the server) using the navigator . However, when I click on the submit I'm getting error Status: 'Not Found'. Error code: 404
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:url value="/main/csList" var="csListUrl"/>
<c:url value="/main/editVevaIndividual" var="editUrl"/>
<c:url value="/main/hostListByApp" var="hostListUrl"/>
<c:url value="/users/create" var="addUrl"/>
<c:url value="/users/update" var="editUrl"/>
<c:url value="/users/delete" var="deleteUrl"/>
<html>
<head>
<title>Individual Records </title>
<!--
<script src="/sam/resources/jqueryMenu/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/sam/resources/jqueryMenu/createMenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="/sam/resources/jqueryMenu/menu.css"/>
-->
<script type='text/javascript' src='<c:url value="/resources/jqueryMenu/jquery-1.3.2.min.js"/>'></script>
<script src= '<c:url value="/resources/jqueryMenu/createMenu.js"/>'></script>
<link rel="stylesheet" href= '<c:url value="/resources/jqueryMenu/menu.css"/>'/>
<script>
$(document).ready(function(){
createMenu($("#content"));
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href='<c:url value="/resources/ui.jqgrid.css"/>' />
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src= '<c:url value="/resources/grid.locale-en.js"/>'></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src='<c:url value="/resources/jquery.jqGrid.src.js"/>'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var mydata = [
],
grid = $("#list");
grid.jqGrid({
url:'${csListUrl}',
datatype: 'json',
ignoreCase: true,
mtype: 'GET',
colNames:['INDIVIDUAL ID','LAST NAME','FIRST NAME','VENDOR ID','INACTIVE REASON CODE','INACTIVE DATE'],
colModel:[
{name:'individualId',index:'individualId', width:50 },
{name:'lastName',index:'lastName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'firstName',index:'firstName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'vendorID',index:'vendorID', width:30,} ,
{name:'inactiveReasonCode',index:'inactiveReasonCode', width:30} ,
{name:'inactiveDate',index:'inactiveDate', width:30}
],
postData: {},
rowNum:10,
rowList:[10,20,40,60],
height: 'auto',
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'individualId',
viewrecords: true,
sortorder: "asc",
editurl:'${editUrl}',
caption:" individual Records",
emptyrecords: "Empty records",
loadonce: true,
loadComplete: function() {},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "individualId"
}
});
$("#search").click(function() {
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
f.rules.push({field:"lastName",op:"cn",data:searchFiler});
f.rules.push({field:"firstName",op:"cn",data:searchFiler});
grid[0].p.search = true;
$.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{page:1,current:true}]);
});
grid.jqGrid('navGrid','#pager',
{edit:true, add:false, del:false,refresh:true,view:true},
{}, {}, {},
{ // search
sopt:['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
},
{ // vew options
beforeShowForm: function(form) {
$("tr#trv_id",form[0]).show();
},
afterclickPgButtons: function(whichbutton, form, rowid) {
$("tr#trv_id",form[0]).show();
}
});
});
//]]>
</script>
</head>
<body>
<div style="position:relative; z-index:3;" id="content"></div>
<br></br>
<fieldset >
<input type="text" id="filter"/>
<button type="button" id="search">Search</button>
</fieldset>
<div style="position:relative; z-index:1;">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
</body>
</html>
the purpose is that after editing the text area in a line, and clicking on another row, the first one should get saved and the row should be restored. The code works till saving the record, but not restoring the edited row after saving.. Please help me to rectify the issue.
<?
if(isset($_GET)){
$startDate = $_GET['start_date'];
$endDate = $_GET['end_date'];
$type = $_GET['type'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="../js/powertip/jquery.powertip.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/powertip/jquery.powertip-1.1.0.min.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
.ratingDetails{
font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;
}
</style>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'driver_name',
viewrecords: true,
sortorder: "asc",
subGrid : true,
subGridUrl: 'feedbacks_bookings_rated_pagination.php?booking=424519',
subGridModel: [{
name:['Booked on','Trip Type/ Amount','Driver Details','Local Office Phone','Essential Feedbacks','Other Feedbacks'],
width: [90,90,130,100,160,200]}
],
onSelectRow:
function(id){
//alert(lastSel+"-hi-"+id);
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel);
jQuery("#rowed2").jqGrid('restoreRow',lastSel);
//jQuery("#rowed2").trigger("reloadGrid");
}
lastSel = id;
}
jQuery(this).jqGrid('resetSelection');
jQuery(this).editRow(id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: true,save: true, del: false, reload: true});
jQuery.fn.editRow = function(param) {
var rowid = param;
var booking_id = jQuery("#rowed2").jqGrid ('getCell', param, 'booking_id');
jQuery("#rowed2").jqGrid('editRow',rowid, {
keys : true,
oneditfunc: function() {
}
});
};
jQuery.fn.saveRow = function(param) {
var rowid = param;
jQuery("#rowed2").jqGrid('saveRow',rowid, {
successfunc: function(response) {
//obj = eval('(' + response.responseText + ')');
//$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
},
url : "feedbacks_bookings_rated_pagination.php",
mtype : "POST",
});
};
jQuery.fn.restoreRow = function(param) {
var rowid = param;
alert("rstore-"+rowid);
jQuery("#rowed2").jqGrid('restoreRow',rowid, {
afterrestorefunc : function( response ) {
alert("aaaa");
obj = eval('(' + response.responseText + ')');
$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
}
});
};
})
function closeAction(bkId){
if(confirm("Are you sure to close the action?")){
//Ok button pressed...
$.post('feedbacks_bookings_rated_pagination.php?action=close',{booking_id: bkId},
function(response){
alert(response.responseText);
$("#rowed2").trigger("reloadGrid");
return true;
},
"json"
);
}
}
// Function to display rating crieteria values as a tooltip on mouseover of Rating caption
function showRatingDetailsToolTip(id) {
$('#rating'+id).data('powertiptarget', 'tooltip'+id);
$('#rating'+id).powerTip({placement: 'e',smartPlacement: true,mouseOnToPopup: true});
}
</script>
</body>
</html>
Again.. given below a rectified code.. here also, the previous row not getting back from edit mode on clicking next row. Can you tell me the problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true,editable:true,edittype:'text'},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'booking_id',
viewrecords: true,
sortorder: "asc",
onSelectRow:
function(id){
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel,{url : "feedbacks_bookings_rated_pagination.php",mtype : "POST"});
jQuery(this).jqGrid('editRow',lastSel, false);
}
lastSel = id;
}
jQuery(this).jqGrid('editRow',id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: false,save: false, del: false, reload: true});
})
</script>
</body>
</html>
=====================
At last I could find the real problem.
It is not with the content of 'action_taken' field, but with the just previous field. In that I put a table inside a hidden DIV under the actual content, used for a tooltip content.
What happens is that after editing the action_taken field in next column and the server response is received, the edited content of 'action_taken' field was set to the content and title of the first TD of this table in previous column. Also, the edited column does not return from edit mode. If I remove the table from previous column, everything works ok. I tried with different id/style class for the table, but no change. What could be the problem? The table structure in previous column causing the issue is given below.
<table id='ratingdata32380' width='189' border='0' cellpadding='0' cellspacing='0' bordercolor='#000000' bgcolor='#4f9de2'>
<tr><td align='left' valign='middle' class='ratingDetails'>Was On Time?</td><td align='center' valign='middle' class='ratingDetails'>aaaa</td></tr>
</table>
The class 'ratingDetails' is nothing but just the font definition.
.ratingDetails{font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;}
Any idea ?
You should decide which behavior should have your grid. You you want save the data from the previously editing row then you should call saveRow. If you want to discard the current changes and to restore the previous one you should call restoreRow. Calling of restoreRow after saveRow like you do currently inside of onSelectRow callback has no sense.
So if I understand correctly what you want to implement you should remove the line with saveRow which is before calling of restoreRow.
I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:
The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)
You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JQGRID Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function() {
createGrid();
});
function createGrid() {
$("#jqgrid-table").jqGrid({
colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'],
colModel:[
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'age', index:'age', width:50},
{name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}},
{name:'type', index:'type', width: 56}
],
width: 800,
datatype:'local',
pager: '#pager2',
viewrecords: true,
caption:"JSON Example"
});
var searchOptions = {
caption: 'Filter...',
multipleSearch:true,
closeAfterSearch:true,
closeAfterReset:true,
Find: 'Filter'
};
jQuery("#jqgrid-table").jqGrid('navGrid',
'#pager2',
{search:true, edit:false, add:false, del:false, refresh:false},
null, null, null, searchOptions
);
var data = getData();
for(var i =0; i < data.length; i++) {
var r = data[i];
jQuery("#jqgrid-table").addRowData(r.id, r);
}
}
function getData() {
return [
{id:1, firstName: 'John', lastName: 'XXX', age:'30', iq:'200', type: 'Nice'},
{id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'},
{id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'}
];
}
</script>
</head>
<body>
<div id='jqgrid-div'>
<table id='jqgrid-table'></table>
<div id="pager2"></div>
</div>
</body>
</html>
I suggest to overwrite the internal reDraw method used by filtering (see my another answer for more description). To do this you should include in the searchOptions which you use the beforeShowSearch event handler with the following implementation:
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function() {
$('input.delete-rule:first',searchDialog).unbind('click');
// set fucus in the last input field
setTimeout(function() {
// set fucus in the last input field
$('input[type="text"]:last',searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function() {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
You can see the corresponding demo here.