We Keep Coding

How to send additional parameters to success function in jquery ajax

I have the following Jquery code, I'm trying to display information in $('.cbs-List').HTML(divHTML); based on the region value. But in the success function, I can't read the value for the region, it states that
'data is undefined'
What is the correct form of passing parameters or values to the success function in this case?
$(document).ready(function() {
getSearchResultsREST('LA');
});
function getSearchResultsREST(region) {
var querySA = 'ClientSiteType:ClientPortal* contentclass:STS_Site Region=LA';
var queryDR = 'ClientSiteType:ClientPortal* contentclass:STS_Site Region=EM';
if(region == 'LA') {
var searchURL = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?queryText='" + querySA + "'";
} else {
var searchURL = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?queryText='" + queryDR + "'";
}
$.ajax({
url: searchURL,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
contentType: "application/json; odata=verbose",
success: SearchResultsOnSuccess(data, region),
error: function(error) {
$('#related-content-results').html(JSON.stringify(error));
}
});
}
function SearchResultsOnSuccess(data, region) {
var results;
var divHTML = '';
if (data.d) {
results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
if(results.length == 0) {
$('#related-content-results').html('There is No data for the requested query on ' + _spPageContextInfo.webAbsoluteUrl);
} else {
for (i=0; i<results.length; i++) {
var item = results[i];
var itemCell = item.Cells;
var itemResults = itemCell.results;
// Get values for item result
var _title = getValueByKey("Title", itemResults);
var _path = getValueByKey("Path", itemResults);
divHTML += '<li><a href=' + _path + '>' + _title + '</li>';
}
// Display information based on region.
$('.cbs-List').html(divHTML);
}
}
}

You have 2 problems, and they're both easy to fix.
There's no need to pass region into SearchResultsOnSuccess at all. you can already use it in there because it's defined at a higher scope.
In the object you're passing to $.ajax, you're not setting SearchResultsOnSuccess as a callback, you're calling it.
Change the lines:
success: SearchResultsOnSuccess(data, region) => success: SearchResultsOnSuccess
function SearchResultsOnSuccess(data, region) { => function SearchResultsOnSuccess(data) {
and it should work fine.
Edit:
Here's a basic example of how you need to set this up
function search(region) {
$.ajax({
url: 'example.com',
method: 'GET',
success: successCallback,
});
function successCallback(data) {
console.log(data, region);
}
}
search('LA');

You have to urlencode the value if it contains = or & or whitespace, or non-ASCII characters.
var querySA = encodeURIComponent('ClientSiteType:ClientPortal* contentclass:STS_Site Region=LA');
var queryDR = encodeURIComponent('ClientSiteType:ClientPortal* contentclass:STS_Site Region=EM');
if(region == 'LA') {
var searchURL = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?queryText=" + querySA;
} else {
var searchURL = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?queryText=" + queryDR;
}
And normally you don't have to put your values between apostrophes.
I updated the answer, I hope you will understand me better.
Your problem is NOT the parameter passing IMHO but your server response.
You should either:
turn on the developer tools and check the XHR requests on the network tab, look for the /_api/search/query... requests and examine the response
double check the server side logs/study your search service API documentation how to assemble a proper call
use your favourite REST client and play around your service: send there queries and check the responses and check that it matches with your expectation
last but not least, you can replace your ajax caller with this quick-and-great one:
$.ajax({
url: searchURL,
success: function (response) {
$('#post').html(response.responseText);
},
error: function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
$('#post').html(msg);
},
});
(of course you should have a <div id="post"><div> somewhere in your page)
Your success function IMHO would get your region if gets called, but it does not, and I hope using one or more of these techniques will help you to see clear.
If you are really sure that you get what you want, you can go furher with passing your second argument, as described here

Ajax request inside loop, page reload after completion

I m using Jquery ajax request inside loop, all goes well till the last request. but after last request, page automatically reloads.I m not being able to understand what is happening there.
Plz review and help.
I m using asp.net web form and web services for handling ajax request.
Jquery Code:
var mainData = GetFromExcel();
function StartSaving()
{
for (i = 0; i < totalCount; i++)
{
DoPost(i);
}
}
function DoPost(i)
{
var mainCode = MainData[i].MainCode;
var noOfAllot = MainData[i].NoOfAllotment;
var CompanyCode = MainData[i].CompanyCode;
console.log(mainCode +' Company Code:'+ CompanyCode+':' + noOfAllot);
$.ajax({
url: "Allotment.asmx/DoAllotment",
data: "{MainCode:'" + mainCode + "', sNoOfAllotment:'" + noOfAllot + "',CompanyCode:'" + CompanyCode + "'}", // the data in JSON format. Note it is *not* a JSON object, is is a literal string in JSON format
dataType: 'text',
contentType: "application/json; charset=utf-8",
type: "Post",
async: false ,
success: function (res) {
console.log(res);
},
error: function (res) {
}
});
}
GetFromExcel is function that takes excelsheet and convert into json array. for that i have used xlsx.js
WebServices Code:
[WebMethod]
public String DoAllotment(string MainCode, string sNoOfAllotment, string CompanyCode)
{
JavaScriptSerializer js = new JavaScriptSerializer();
if(checkData())
return "Error";
else
return "Success";
}

this is a common pitfall.
Modify your javascript method to return false, see below:
function StartSaving() {
for (i = 0; i < totalCount; i++) {
DoPost(i);
}
return false; //This is important for not allowing button click post back
}
In The asp.Net button add OnclientClick as shown below:
<asp:button ..... OnClientClick="return StartSaving();"></asp:button>
***Everything else is perfect in your code!!!!

Why my WebMethod always returns JSON?

First my apologies if this is a noob question, it's not my area.
I have a WebMethod, which return String (string table=""). But the Ajax return function
always see that as an JSON Object looks like {"d":{...}}. My Question is WHY
I get a JSON back, even though my Ajax is expecting "text" ?
WebMethod:
[WebMethod()]
public static string TestAjax(string val)
{
string sSql = ConfigurationManager.AppSettings["GetMiToSend"];
sSql = sSql.Replace("$Company$", val);
string table = "";
try
{
DbCommand command = m_connection.CreateCommand();
command.CommandText = sSql;
command.CommandType = CommandType.Text;
DbDataReader oDataReader = command.ExecuteReader();
int count = 0;
if (oDataReader != null)
{
count = oDataReader.FieldCount;
}
table = "<table>";
while (oDataReader.Read())
{
table += "<tr>";
for (int i = 0; i < count; i++)
{
table += "<td>" + oDataReader.GetValue(i) + "</td>";
}
table += "</tr>";
}
table += "</table>";
}
catch (Exception ex)
{
Console.Out.WriteLine(ex.Message);
}
return table;
}
My Ajax function:
$.ajax({
type: "POST",
url: '<%= ResolveUrl("~/Default.aspx/TestAjax") %>',
data: JSON.stringify(toSend),
contentType: "application/json; charset=utf-8",
dataType: "text",
success: function (data) {
alert(data);
$('div#container div#content').html(data.d).show(1000);
$('div#container div#showContent').hide();
$('div#container div#content').addClass('rwd-table');
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});

I'm pretty sure you can't return a string from a WebMethod. I tried without success to confirm my assertion. So change your code to return a json instead of a string.
MS Developer Network: How to: Use the WebMethod Attribute:
Attaching the WebMethod attribute to a Public method indicates that you want the method exposed as part of the XML Web service.
Return a json in your WebMehod:
List<object> jsonObject = new List<object>();
jsonObject.Add(new
{
htmlTable = table
});
return (new JavaScriptSerializer()).Serialize(jsonObject);
Change your ajax to return a json:
dataType: "json"
Then access your json object and your html table:
var dataParsed = $.parseJSON(data.d);
var htmlTable = dataParsed[0].htmlTable;
// Do your actions with your htmlTable. Append to an element or other action.

Typescript Collections not initialized

Background:
I have a jquery click function which should delete a picture from a model. For that I am sending an ajax request to my controller. To get the URL of this action I wrote an ActionResolver which works similar to the HTML helper of MVC. As you see in the code I used typescript and typescript collections.
My problem now is that as soon as the browser reaches "var routeValues = new collections. Dictionary();" it errors with "Uncaught ReferenceError: collections is not defined". I wrote at the top of the ts file "/// < reference path="typings/collections/collections.ts" />" so I can't figure out why it's not defined.
If anyone has a hint I would really appreciate it as I am just getting started with jscript and typedscript. :)
$(function () {
$(".jsPictureDelete").click(function () {
var controller = $("#Controller").attr('value');
var id = $("#Id").attr('value');
var propertyName = this.id.replace("pictureDeleteBtn", "");
var routeValues = new collections.Dictionary<string, string>();
routeValues.setValue("id", id);
routeValues.setValue("propertyName", propertyName);
var action : Action = new Action("DeletePicture", controller, routeValues);
//var url = '/' + controller + '/DeletePicture/' + id + '?propertyName=' + propertyName;
var url = action.ResolveAction();
$.ajax({
type: "GET",
url: url,
contentType: 'application/json; charset=utf-8',
success: function (returndata : any) {
alert("worked");
}
});
});
});
class Action {
private _controller: string;
private _action: string;
private _routevalues = new collections.Dictionary<string, string>();
constructor(action: string, controller: string, routevalues = new collections.Dictionary<string, string>()) {
this._controller = controller;
this._action = action;
this._routevalues = routevalues;
}
public ResolveAction() : string {
var result: string = "/" + this._controller + "/" + this._action;
var attrib: boolean = false;
if (this._routevalues.containsKey("id")) {
result += "/" + this._routevalues.getValue("id") + "?";
}
Object.keys(this._routevalues).forEach(function (key) {
if (key !== "id") {
result += key + "=" + this._routevalues[key] + "&";
attrib = true;
}
});
if (attrib) {
result = result.substring(0, result.length - 1);
}
return result;
}
}

referencing the collections.ts file only provides intellisense support in the editor.
you have to include that file (js equivalent?) in your webpage too.

You need to compile it with the --out flag.
Reference: https://youtube.com/watch?hd=1&v=KDrWLMUY0R0

ajax is returning id in wrong format

I have a problem where I am getting an id from a selected checkbox, then it sends it to a delete method and it then passes the id to a stored procedure. The problem I am having though is it is returning my id in a wrong format ("232,4323") instead of ("232","4323") so when it comes to passing in values to the stored procedure, it craps out because of the string format.
Here is my code in the aspx.
function doTheDelete(doIDeleteTimeTracker) {
var selectedTimeTrackerList = getSelectedTimeTrackerIDs();
if (selectedTimeTrackerList.length > 0) {
$.ajax({
type: "POST",
//url: "/Tasks/ViewTasks.aspx/deleteTasksAndLinkedItems",
url: '<%=ResolveUrl("~/TimeTrackers/ViewTimeTrackers.aspx/deleteSelectedTimeTracker")%>',
data: "{'DeleteTimeTracker' : '" + doIDeleteTimeTracker + "'," + "'TimeBill': ['" + selectedTimeTrackerList.join(',') + "']}",
//dataaaaaa
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var ss = data.d;
if (ss.length > 0) {
for (var i = 0; i < ss.length; ++i) {
$.noty.consumeAlert({ layout: 'center', type: 'error', dismissQueue: true });
alert(ss[i]);
}
}
$("#viewTimeTrackersGrid").flexReload();
showMessage('Successfully Removed Time Tracker');
},
error: function (data) {
$.noty.consumeAlert({ layout: 'center', type: 'error', dismissQueue: true, modal: true });
alert('Error Deleting Time Tracker');
if (window.console) {
console.log(data);
}
}
});
} else {
showMessage('No time tracker(s) are selected.');
}
}
and here is my delete method in the code behind.
public static string[] deleteSelectedExpense(bool DeleteExpenses, String[] ExpId)
{
var rList = new List<string>();
//var canDeleteTasks = false;
//var canDeleteTrackers = false;
var canDeleteExpenses = false;
var investigatorID = (int)HttpContext.Current.Session["InvestigatorID"];
var conn = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ToString());
var cmd = new SqlCommand("p_Admin_Permissions_CanDeleteExpenses", conn);
cmd.Parameters.Add(new SqlParameter("#InvestigatorID", SqlDbType.Int));
cmd.Parameters["#InvestigatorID"].Value = investigatorID;
cmd.CommandType = CommandType.StoredProcedure;
try
{
conn.Open();
canDeleteExpenses = (bool)cmd.ExecuteScalar();
}
catch (SqlException sql)
{
if (!rList.Contains("Can not connect to the database. Please try again."))
rList.Add("Can not connect to the database. Please try again.");
}
catch (Exception ex)
{
if (!rList.Contains("An Error Occured"))
rList.Add("An Error Occured");
}
finally
{
if (conn.State == ConnectionState.Open)
conn.Close();
}
if (canDeleteExpenses)
{
foreach (var expense in ExpId)// expense ends up beng ("232,423") instead of just taking 1 string at a time ("232").....("423")...
{
if (canDeleteExpenses)
{
conn = new SqlConnection(ConfigurationManager.ConnectionStrings["OSCIDConnectionString"].ToString());
cmd = new SqlCommand("p_CaseFiles_Expenses_DeleteExpenses", conn);
cmd.Parameters.Add(new SqlParameter("#ExpID", SqlDbType.Int));
cmd.Parameters["#ExpID"].Value = int.Parse(expense);
cmd.Parameters.Add("#Message", SqlDbType.NVarChar, 50);
cmd.Parameters["#Message"].Direction = ParameterDirection.Output;
cmd.CommandType = CommandType.StoredProcedure;
try
{
conn.Open();
cmd.ExecuteNonQuery();
}
catch (SqlException sql)
{
if (!rList.Contains("Error Connecting to the Database. Unable To Delete Expense(s)."))
rList.Add("Error Connecting to the Database. Unable To Delete Expense(s).");
}
catch (Exception ex)
{
if (!rList.Contains("An Error Occured"))
rList.Add("An Error Occured");
}
finally
{
if (conn.State == ConnectionState.Open)
conn.Close();
}
}
else if (!canDeleteExpenses)
{
rList.Add("You do not have permission to delete Expenses");
}
else
{
if (!rList.Contains("You do not have permission to delete the Expense(s)."))
rList.Add("You do not have permission to delete the Expense(s).");
}
}
}
return rList.ToArray();
}
I am guessing it could be in the "Data :" in the ajax call formatting for the array(I've tried a few things)

Try:
... 'TimeBill': ['" + selectedTimeTrackerList.join('","') + "']}" ...
Although a better solution would be to create a full javascript object with the required properties and apss it as an argument. BTW you may want to consider using something like PageMethods instead of jQuery if you are calling this method only on this page.

There is no reason to create a string to send as Data, you can send a json object instead.
Data: {
DeleteTimeTracker: doIDeleteTimeTracker,
TimeBill: selectedTimeTrackerList
}, ...

thanks for the help gents. I managed to fix it. Solution was to do this:
"'ExpId': ['" + selectedExpensesList.join('\',\'') + "']}",
instead of :
"'ExpId': ['" + selectedExpensesList.join(',') + "']}",
adding the extra ' seemed to work. It then manages to take each id seperately instead of taking the entire array and pooping on me