I initialize a grid inside the controller
$scope.gridOptions = {
enableFiltering: true,
enableColumnMenus: false,
enableGridMenu: true,
enableSelectAll: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
};
Then assign data to it via:
$scope.Data = bids.bids;
$scope.gridOptions.data = 'Data';
This works. However, I have a get request inside another function in my controller. On the success of this get request, I want to refresh the ui-grid data. I am trying:
var SendFilterData = function() {
$http({method: 'GET', url: urlString, params: dataToSend})
.then(function successCallback(response) {
$scope.Data = response.data
});
};
The SendFilterData() gets fired from the view on a button click. I've tried $scope.gridOptions.data = response.data as well.
The weird thing is, when the controller is loaded as the user enters, it looks like this SendFilterData is initialized, and the $scope.Data = response.data actually works as it's supposed to. But, then it never works on a button click.(I've checked that the function itself does actually fire on button click)
How do I refresh the data in the grid, when this function is called?
Try this: In OnRegisterApi() method, add this line as well, (You have to add dependency uiGridConstants)
gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
And assign data directly to gridOptions.data in SendFilterData() method
$scope.gridOptions.data = response.data
Related
I have an MVC PagedList which works just fine. I am filtering that list and the filter predicate is sent to the client during roundtrips. I use unobtusive ajax replacing. My pager code looks as:
#Html.PagedListPager((IPagedList)Model.Items,
page => Url.Action("Filter",
new ClientSearch
{
Page = page,
PageSize = Model.PageSize,
Predicate = Model.Predicate
}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "clients-list",
}))
The problem is, that the Predicate parameter is too long. And it should be. I get the following exception:
"The request filtering module is configured to deny a request where the query string is too long."
I do not want to alter the web.config in order to allow long parameters. I would like to pass the model in a POST header instead of query string parameter. Is it possible with PagedList?
Thanks in advance.
I still couldn't figure out whether PagedList supported posting large data, however I ended up with the following workaround.
I have a post method which posts the model to the controller function and replaces the partial view content with the results.
function postToPage(url, size, predicate, replace) {
var data = {
size: size,
predicate: predicate
};
$.ajax({
url: url,
data: data,
type: 'POST',
success: function (result) {
$('#' + replace).html(result);
}
});
}
I also have another function to replace the URLs in the pagination-container div and wire up the click event to call the post method. The click event stops event propagation, so the URL in the href attribute won't be used.
function replaceHrefs() {
$('div[class = pagination-container').find('a').each(function (index, value) {
var url = value.href.toString();
value.addEventListener('click', function (event) {
event.stopPropagation();
post(url);
});
value.href = '#';
});
I created a custom version of post method in order to generate the pagesize and predicate from the model.
function post(url) {
postToPage(url, #Model.PageSize, '#Model.Predicate', 'clients-list');
}
I had to wire up the URL replacing procedure to two places: when the document becomes ready and when the ajax call completes. These covered all the cases I needed.
$( document ).ajaxComplete(function() {
replaceHrefs();
});
$( document ).ready(function() {
replaceHrefs();
});
I hope it helps someone.
I'm trying to use the jquery ui spinner on forms dynamically inserted through ajax calls.
To handle ajax calls I'm relying on ajaxy.
On success I call this function like so:
response: function(){
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
var State = this.State;
var Action = this;
Action.documentReady($content);
updater(); // THE FUNCTION TO BIND NEW ELEMENTS
return true;
},
Here's the function
function updater(){
$('.spin').spinner();
}
And this works without any problem. But then When I call that same function on "normal" jquery requests (not ajaxy ones), it doesn't work anymore:
$.ajax({
type: "GET",
url: url,
cache: false,
dataType:"json",
success: function(res) {
updateTarget(res,target,animation);
updater();
}
}
});
I really don't see why in one case it is working, while in the other it isn't...
I've figured it out... My error was that I was running updater() after updateTarget(res,target,animation);, which is the function that analyses the json response and attach html elements to the page, while I must run updater() inside updateTarget(res,target,animation); right after the attachment to the page through .html().
var display_message="";
$('input:checked').each(function(index) {
var profile_id=$(this).val();
$.ajax({
type: 'post',
url: 'myUrl',
data: data,
success: function(data) {
if(data=="ok")
display_message = display_message + data +", ";
}
});
});
alert(display_message);
alert(display_message);
if($.trim(display_message)!=""){
jAlert("Your birthdate already exits in "+display_message.substring(0, display_message.length - 2)+".", "Bdate");
return false;
}
in this code, i use two alert-box for display display_message variable value.
when i run successfully this code, in 1st alert-box i get blank value and second alert-box i get value which i needed, then it will go in if condition.
if i doesn't use alert box then it will always take null value in display_message variable and never enters into the if condition. so what i need to change to run this code without alert box?
You are making an asynchronous call via AJAX, but your code is executing synchronously. So it is returning before the AJAX call completes. The first alert box just gives the function time to catch up. You need to handle all this code in your success callback.
var display_message="";
$('input:checked').each(function(index) {
var profile_id=$(this).val();
$.ajax({
type: 'post',
url: 'myUrl',
data: data,
success: function(data) {
if(data=="ok")
display_message = display_message + data +", ";
if($.trim(display_message)!=""){
jAlert("Your birthdate already exits in "+display_message.substring(0, display_message.length - 2)+".", "Bdate");
return false;
}
});
});
You want all your ajax queries to finish and return results, right?
Then this is a synchronization problem.
I would suggest this approach (code is simplified for clarity).
var inputs_processed = -1;
var inputs_to_process = -1;
function queryData() {
inputs_to_process = $('input:checked').length;
$('input:checked').each(function() {
$.ajax({success: function(data) {
inputs_processed += 1;
// build up that message
}});
});
}
function displayResult() {
if (inputs_processed == inputs_to_process) {
// display result
} else {
// not all queries finished yet. Wait.
setTimeout(displayResult, 500);
}
}
queryData();
displayResult();
Basically, you know how many requests should be made and you don't display result until that number of requests returns.
Why your data is "data"? I cant see any variable called data is declared here. You should pass in the value you want to use as the parameter into the data options.
Edit: This is why u getting the null value. data is not initialize into anything. Only after the success function, your "data" will have the value since you declare the return value with the same name
I have problem with autocomplete. The code below is returnig me
["foo#foo.com","bar#bar.com"]
$('.autocomplete').keyup(function() {
tid = $(this).attr('id')
$(this).autocomplete({
source: function (req, resp){
$.ajax(
{
url: "autocompl.asp",
data:$("#msgForm").serialize() + "&field="+tid ,
success : function( resp ) {
return resp
}
})
}
});
});
But the suggestions don't appear. It worked for me when I have called autocomplete without any extra parameters.
Any clue?
Thanks in advance
Magda
Note that one of your parameters for the source function is resp, and you're using another resp afterwards. I think you need to use the first resp to send the response object back.
I'm using this as well and this works for me (Instead of sending an array of values, I'm sending an array of objects with two attributes, but I don't think it's mandatory).
id
label
so the code inside the ajax success should look something like this (my data variable is your second resp variable, a different name to avoid mixup):
success: function(data) {
for (i in data) {
a = {}
a.id = data[i]
a.label = data[i]
options.push(a)
}
resp(options)
}
I got a little problem here guys. I'm trying to implement the following scenario:
A user opens the home page and sees a list of other users and clicks
to add one to his friend list.
I issue an Ajax request to a server resource to validate if the user
is logged in, if so, I issue another ajax request to another server
resource to actually add it to the user's friend list.
Sounds simple? Here's what I've done: I created a function isLoggedIn that will issue the first request to the server in order to determine if the user is logged in. I issue this request using jQuery.ajax method. Here's my function looks like:
function isLoggedIn() {
$.ajax({
async: "false",
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "/isloggedin",
success: function(jsonData) {
alert("jsonData =" + jsonData.LoggedIn);
return jsonData.LoggedIn;
}
});
}
The returned JSON is very simple, it looks like the following:
{ LoggedIn: true } or { LoggedIn : false }
Now this method, actually works and displays the alert correctly: JsonData = true if logged in, and JsonData = false if not logged in.
Up to this point there's no problem, the problem occurs when I try to call this method: I call it like so:
$(".friend_set .img").click(function() {
debugger;
if (isLoggedIn()) {
alert("alredy logged in");
trackAsync();
popupNum = 6;
}
else {
alert("not logged in"); //always displays this message.
popupNum = 1;
}
//centering with css
centerPopup(popupNum);
//load popup
loadPopup(popupNum);
return false;
});
Calling isLoggedIn always returns false, and it returns false before the ajax request finishes (because the messagejsonData = trueis displayed after the message "not logged in". I made sure that the request is **NOT** Asynchronous by statingasync: false`!
Apparently it's still working asynchronously, though. What am I missing here guys?
You need async:false, not async:"false". (i.e. pass boolean false, not string "false").
Edit:
also with async requests you need to return a value after the call to ajax, not inside your success handler:
function isLoggedIn() {
var isLoggedIn;
$.ajax({
async: false,
// ...
success: function(jsonData) {
isLoggedIn = jsonData.LoggedIn
}
});
return isLoggedIn
}