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.
Related
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 () {});
I use this code to store and retrieve ajax data via http://openkeyval.org/
$.ajax({ /* send data */
url: "http://api.openkeyval.org/store/",
data: "test-key-data=" + JSON.stringify([123,456]),
dataType: "jsonp",
success: function(data){
console.log(data);
}
});
$.ajax({ /* retrieve data */
url: "http://api.openkeyval.org/test-key-data",
dataType: "jsonp",
success: function(data){
console.log(data);
}
});
everything work fine in Chrome javascript console but in userscript I get error like this
Uncaught ReferenceError: jQuery110208458673823624849_1375932537303 is
not defined
I try to use GM_xmlhttpRequest to retrieve data like this
GM_xmlhttpRequest({
method: "GET",
url: "http://api.openkeyval.org/test-key-data",
onload: function(response) {
console.log(response.responseText);
}
});
but it seem like openkeyval doesn't accept data via POST/GET method and log result was like when you access it directly from url of browser like this
{"error":"not_found","documentation_url":"http://openkeyval.org/"}
I include jQuery and it work fine with this code
// #require http://code.jquery.com/jquery-latest.min.js
I try to use Greasemonkey/jQuery XHR bridge with out change other code by like this
// #require http://courses.ischool.berkeley.edu/i290-4/f09/resources/gm_jq_xhr.js
and try use openkeyval official javascript library with code like this
// #require http://cdn.openkeyval.org/statics/openkeyval.packed.js
and retrieve data with code like this
var ourCallback = function(value, key) {
console('The value of ' + key ' + is ' + value);
};
window.remoteStorage.getItem('test-key-data', ourCallback);
still got error ERROR: Unexpected string
Please help, I mess with it more than 10 hours. Thank you so much.
It look like $.ajax always trigger error event function
but GM_xmlhttpRequest can retrieve mistype data, so I try looking for dataType: "jsonp" in GM_xmlhttpRequest and I got that jsonp header content-type is "application/javascript" OR "application/json" and the first one work well.
my new code for retrieve data look like this
GM_xmlhttpRequest({
method: "GET",
url: "http://api.openkeyval.org/test-key-data?nocache=" + new Date(),
headers: {
"Content-Type": "application/javascript"
},
onload: function(response) {
console.log(response.responseText);
}
});
and retrieve data using $.ajax even it always trigger error event function but it still send data.
I try both content-type on GM_xmlhttpRequest and still not work.
my code to store data look like this
$.ajax({ /* send data */
url: "http://api.openkeyval.org/store/",
data: "test-key-data=" + JSON.stringify(myVarObject),
dataType: "jsonp"
});
Add this into $.ajax({...})
crossDomain: true;
It is because by default cross domain ability is disabled. See http://api.jquery.com/jQuery.ajax/
EDIT:
Sometimes there will be a issue with different charset between local script and remote script. Try using:
scriptCharset: "utf-8";
Also look at JQuery AJAX is not sending UTF-8 to my server, only in IE
Elaborating my comment
The reference is to the callback function generated by jquery.
It Sounds to me the way you invoke your userscript unloads the jquery functions before the callback is executed.
Perhaps you use a link and forgot the preventDefault?
If you ajax and have
$("#linkid").on("click"
or
$("#formid").on("submit"
it is MANDATORY to continue like this:
,function(e) {
e.preventDefault();
Otherwise the link is followed or the form is submitted which may not have any visible effect, but the asynchronous scripts have been (partially) unloaded unless the form and link has a target other than the current window
I am new to ajax so maybe this is obvious. I've tried many different not-working approaches. I have javascript that when you click on a button:
an ajax call that grabs some data from a controller - returns an object
display that data in a template that I will show on the page
Here is the javascript/ajax:
<script type="text/javascript">
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Here is the key line in grails view template:
<g:each in="${allResults}" status="i" var="result">
How do I get the data from the javascript to the gsp code (ie allResults)?
Do I have to "refresh" this template to display new data?
thanks.
You just can't make your javascript/jquery code populate things in the gsp, since the gsp is processed server-side and javascript is processed client-side, after the gsp rendered all html documents and populated them with your model. You need to be aware that your page was already processed, so things like ${variables} won't be reloaded anymore. So when you do this:
$(".resulttable").show();
It's not gonna show the result you're waiting for. You have to use javascript code to reload your result table.
So if you're using ajax here, you should use the function success to alter your html table via javascript/jquery since you already have the response you wanted. Maybe this read can help you. Oh, and I think it would be better if in your ajax call, you would define a dataType (json works great in your case), like this:
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
dataType: 'json',
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Just to make clear what kind of response you're getting from the controller.
You do not need to write your ajax calls the hard way. There are some Grails intern tags you can use inside your html:
http://grails.org/doc/latest/ref/Tags/remoteFunction.html
http://grails.org/doc/latest/ref/Tags/submitToRemote.html
http://grails.org/doc/latest/ref/Tags/remoteLink.html
Following the links you will find some nice examples...
function bindALLFunctions() {
..all triggers functions related go here
};
$.ajax({
type: 'POST',
url: myURL,
data: { thisParamIdNo: thisIdNo },
success: function(data){
$(".incContainer").html(data);
bindALLFunctions();
},
dataType: 'html'
});
I am new to ajax and JQuery.
I have the above ajax call in my js-jquery code. bindALLFunctions(); is used to re-call all the triggers and functions after the ajax call. It works all fine and good as expected. However, I have read somewhere that is better to load something after the initial action is finished, so I have tried to add/edit the following two without any success.
Any ideas?
1) -> $(".incContainer").html(data, function(){
bindALLFunctions();
});
2) -> $(".incContainer").html(data).bindALLFunctions();
Perhaps you should have a look to the live and delegate functions. You can set a unique event handler at the beggining of your app and all your loaded ajax code will be automatically binded:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
But if you prefer to use Jquery.ajax call you have to do something like this:
$.ajax({
type: 'POST',
url: myURL,
data: { thisParamIdNo: thisIdNo },
success: function(data){
$(".incContainer").html(data);
bindALLFunctions(".incContainer");
},
dataType: 'html'
});
and transform bindALLFunctions as:
function bindALLFunctions(selector) {
..all triggers functions related go here. Example:
$('#foo', selector).bind('click', function() {
alert('User clicked on "foo."');
});
};
that will only bind events "under" the given selector.
Your initial code was fine. The new version does not work because html() function does not have a callback function.
It's hard to tell from your question just what you intend to ask, but my guess is that you want to know about the ready function. It would let you call your bindALLFunctions after the document was available; just do $(document).ready(bindALLFunctions) or $(document).ready(function() { bindALLFunctions(); }).
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.