loaded the jqgrid columns in xml and it is loaded correctly. Issue is on click of button, i need to call ajax json call and add rows to grid

Question

loaded the jqgrid columns in xml and it is loaded correctly. Issue is on click of button, i need to call ajax json call and add rows to grid

Guhananth S 1

Hi
Pricing.js
$(function(){
$('#btnGo').button().click(function () {
$.ajax({type:"Post",
url:'/Pricing/Values',
data:'json',
success:function(result){
var mydata=[]
below data is json string to be formed from controller call
for(var j=0;j<=data.length;i++)\
{
mydata[i] ={};
for (var j=0 ; j<data[i].length : j++)
{
mydata[i][names[j]] = data[i][j];
}
}
//Add to grid here
for(var i= 0 ;i<=mydata.length; i++)
{
$fn.activeGrid().jqGrid('addRowdata',i + 1,mydata[i]);
}
});
this is working fine with static json data. issue is getting json from controller
}
}

Controller i have
public JsonResult GetValues(string sidx,sting sord,int page,int rows){
List<Dictionary<string,object> strResult = new Dictionary<string,object>();
Search sp = new Search();
strResult = _service.GetData(sp);
var values = JsonConvert.DeseriaizeObject<Dictionary<string,object>>( strResult.toString());

return Json(values,JsonRequestBehaviour.AllowGet):

}

AgaveJoe 30,126 Reputation points

2022-01-08T13:30:37.603+00:00
this is working fine with static json data. issue is getting json from controller

The controller, if it returns data at all, returns a JSON string converted to a JsonResult not JSON. The AJAX code needs to convert the JSON string back to an object.

var data = JSON.parse(response);

It is a lot easier to follow standards and return an object from the GetValues() action not a string. See any beginning level tutorial.

Now the bugs... The code you've shared is very sloppy. The AJAX function never calls GetValues(). The success handler never use the "result" object return from the action. From my perspective you did not try debugging the code because these are very visible bugs. Before moving forward, make an effort to clean up your code.

Also, it seems like you are not reading the jqGrid "load data" documentation because your code is not even close to the sample code in the jqGrid support docs.

http://trirand.com/blog/jqgrid/jqgrid.html
Guhananth S 1 Reputation point

2022-01-10T10:29:03.48+00:00

hi
With static json string , it works.When i get Jsonresult from controller the event is not firing ie JsonResult.

can u please correct my code in controller and js call.
Guhananth S 1 Reputation point

2022-01-10T10:30:14.647+00:00

This is not firing
$.ajax({type:"Post",
url:'/Pricing/Values',
data:'json',
success:function(result){
var mydata=[]
AgaveJoe 30,126 Reputation points

2022-01-10T21:45:16.703+00:00
You did not share the markup. It is impossible to figure out if the event is not firing because the jQuery selector is wrong or the js file is loaded before jQuery or the AJAX URL is wrong. The action you shared is named GetValues() while the AJAX URL is /Pricing/Values. The GetValues() action has parameters while the AJAX URL does not.

Then there's the other issues mentioned above where even if there is a valid response the response is ignored in the success handler.

Please clean up your code and post the latest version. Include all the relevant code so the community is not forced to guess. Also, learn how to use the browser's dev tools to debug your code. The dev tools console will show JavaScript errors.

The following snippet of code can help you test the click handler. Use the browser's dev tools to see the results written to the console log.

<div class="row"> <input id="btnGo" type="button" value="button" /> </div>

The script which is within a script tag at the bottom of the main view within the @section scripts
{ < script >

$('#btnGo').click(function () { console.log("I was clicked"); });

< /script >
}

2 answers

Your answer

AgaveJoe 30,126 Reputation points

2022-01-08T13:30:37.603+00:00

this is working fine with static json data. issue is getting json from controller

The controller, if it returns data at all, returns a JSON string converted to a JsonResult not JSON. The AJAX code needs to convert the JSON string back to an object.

var data = JSON.parse(response);

It is a lot easier to follow standards and return an object from the GetValues() action not a string. See any beginning level tutorial.

Now the bugs... The code you've shared is very sloppy. The AJAX function never calls GetValues(). The success handler never use the "result" object return from the action. From my perspective you did not try debugging the code because these are very visible bugs. Before moving forward, make an effort to clean up your code.

Also, it seems like you are not reading the jqGrid "load data" documentation because your code is not even close to the sample code in the jqGrid support docs.

http://trirand.com/blog/jqgrid/jqgrid.html
Guhananth S 1 Reputation point

2022-01-10T10:29:03.48+00:00

hi
With static json string , it works.When i get Jsonresult from controller the event is not firing ie JsonResult.

can u please correct my code in controller and js call.
Guhananth S 1 Reputation point

2022-01-10T10:30:14.647+00:00

This is not firing
$.ajax({type:"Post",
url:'/Pricing/Values',
data:'json',
success:function(result){
var mydata=[]
AgaveJoe 30,126 Reputation points

2022-01-10T21:45:16.703+00:00

You did not share the markup. It is impossible to figure out if the event is not firing because the jQuery selector is wrong or the js file is loaded before jQuery or the AJAX URL is wrong. The action you shared is named GetValues() while the AJAX URL is /Pricing/Values. The GetValues() action has parameters while the AJAX URL does not.

Then there's the other issues mentioned above where even if there is a valid response the response is ignored in the success handler.

Please clean up your code and post the latest version. Include all the relevant code so the community is not forced to guess. Also, learn how to use the browser's dev tools to debug your code. The dev tools console will show JavaScript errors.

The following snippet of code can help you test the click handler. Use the browser's dev tools to see the results written to the console log.

<div class="row"> <input id="btnGo" type="button" value="button" /> </div>

The script which is within a script tag at the bottom of the main view within the @section scripts
{ < script >

$('#btnGo').click(function () { console.log("I was clicked"); });

< /script >
}

Answer 1

Hi @Guhananth S ,

loaded the jqgrid columns in xml and it is loaded correctly

You said it loaded correctly, what's the effect now?
Add row to grid, do you want to add new data via button?
If you want to get json from controller, you can refer to my post to reply you this Jq grid on button click,
If you want to create new data you can use $("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Guhananth S 1

on click of button , i want to add jsonresult to be added to grid.

Share via

loaded the jqgrid columns in xml and it is loaded correctly. Issue is on click of button, i need to call ajax json call and add rows to grid

2 answers

Your answer