I get data with ajax, then i need to display it in my view and use isotope on DOM elements which i get with ng-repeat. So, i need to call $scope.$apply(); Then i get error: "digest already in progress".
I tried to use "safe-apply", but scope's phase is always digest, so apply do not fires. All i need is sort of callback of ng-repeat.
Now i have something like this:
$http({
method: 'GET',
url: '/web/main/json'
}).success(function (data, status, headers, config) {
$scope.cards = data.cards;
/* without this apply my DOM elements would be
invisible (if i use isotope on them)*/
$scope.$apply();
mainFunction(); // here i use isotope on my DOM elements
}).error(function (data, status, headers, config) {
alert("fail " + data);
});
I think you should change your approach. Read about directives and write directive apply-isotope that applies isotope to children of tag it is used in and then create something like:
<tag1 apply-isotope>
</tag2 ng-repeat="card in cards">
...
</tag2>
</tag1>
Try like this.
$http({method: 'GET',
url: '/web/main/json',
**headers: { "Content-Type": "application/json; charset=UTF-8"}**
}).success(){}).error(function () {});
Related
I'm trying to capture a list of filters in an ajax request, but although I can capture a single filter, when I try to capture a list, I just get an empty list for some reason.
Below is the relevant part of my view and the ajax (jQuery) function. When I try and send a single filter with $.ajax({ .... 'filters': fixed }) this works but fails with a list.
Update: trying data: {'filters': JSON.stringify([fixed])}, does pass the data through as a string to django '["fixed"]' (which I can handle if I don't use getlist but .get and then json.loads() but I think there must be a simpler method here.
def quotes_results_filter_view(request):
results_filters = request.GET.getlist('filters') or []
quotes_results = request.session['quotes_results']
for results_filter in results_filters:
.......
Ajax function:
$(document).ready(function () {
$('#id_filter').change(function (e) {
var fixed = $(this).val()
console.log(fixed)
$.ajax({
url: '/users/filters/',
data: {
'filters': [fixed]
},
dataType: 'json',
success: function (data) {
console.log(data)
}
})
When you send a list through jQuery it changes the keyword to
so in Django you probably have to get like this:
request.GET.getlist('filters[]')
I make an ajax call to a function which returns html.
$.ajax({
url: url,
type:'POST',
dataType: 'html',
success: function(output){
$("#prikaz_oglasov").html(output);
}
,error: function (xhr, status) {
alert('error: ' + status);
}
});
I insert the html in a div with a specific id. Now when a onclick event occurs I would like to receive two chunks of html code and insert it in two different divs. I could ofcourse do two ajax calls, but it doesnt seem very efficient. Is there any way to do this?
I think your options are to either make the server return a JSON response looking like
{
chunk1: 'some html',
chunk2: 'some html'
}
and then have something like
...
dataType: 'json',
success: function(output){
$("#prikaz_oglasov").html(output.chunk1);
$("#prikaz_oglasov2").html(output.chunk2);
}
...
or to try and split the incoming html into two chunks using a regular expression.
I'd rather send 2 separate requests, especially if this HTML is static. Cleaner code is better.
I want to extend the Ajax functionality of JQuery for having advanced options and features.
For example i could pass an argument named logElement and pass a selector to find the element to place log.
like
$.ajax({
type: "GET",
url: "ajax/get_countries.php",
dataType: 'json',
logElement:"#logDiv",
success: function(data){
//code
}
});
This should function like jquery's Ajax request and also print log information in the specified logElement on success and error
(function($) {
$.ajax2 = function(settings) {
// do what you want...
$.ajax(settings);
};
})(jQuery);
I am calling pages via AJAX in jQuery.
The content of these pages needs to be filtered so that i only grab a certain DIV class. In this instance 'Section1'.
This filtered data needs to replace the same data on the current page in the DIV of the same class.
I currently have this but it is not really working for me:
$("#dialog_select").live('change', function() {
//set the select value
var $optionVal = $(this).val();
//$(this).log($optionVal);
$.ajax({
type: "GET",
url: $optionVal,
dataType: "html",
cache: false,
success: function(data) {
var $filteredData = $(data).filter('.Section1');
$('.Section1').replaceWith($filteredData);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
I think your problem is likely here:
var $filteredData = $(data).find('.Section1');
$('.Section1').replaceWith($filteredData);
.filter() would only find top level elements in the response (if it's a page, that's <html>, and wouldn't have any results). .find() looks for decendant elements. Also keep in mind that if you have multiple .Section1 elements, this won't behave as expected and will have some duplication going on.
This is a tricky thing to do and I would recommend placing the data into something like a DOMParser or document.implementation.createDocument or MSXML.
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
else {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
is a basic code example. jQuery itself can filter on a selector with the load function. http://api.jquery.com/load/ This however has several limitations such as not being able to filter on html, head, or body tags. This is why the above method is safer.
can't seem to get the ajaxSend and Stop to work... These are global variables no? .. but I should be able to use like this... but I never get an alert??
I wanted to use these events to display an ajax animation.. although in my code I wish to position the ajax animation depending on what I am doing a what element it is.
$.ajax({
type: "POST",
url: "MyService.aspx/TestMe",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
ajaxSend: function (r, s) {
alert('i am starting');
}
,
ajaxStop: function (r, s) {
alert('i am stopping');
}
,
success: function (msg) {
}
});
Those are globals, and the way I typically see them assigned is:
$('element').ajaxStart(function() {
... do something ...
}
Assigning them to a specific ajax request, I'm not sure if that will do what you want it to do.
So you don't use this functionality properly. ajaxStop, ajaxComplete and etc. is not a parameters of $.ajax function. Let say you have an ajax icon which you want to remove on request completion.
$("#ajax_icon").ajaxStop(function(){
$(this).hide();
});
You have a good reference here
PS. With other function is the same.