i have already read this topix : "http://stackoverflow.com/questions/4820637/how-do-i-perform-an-ajax-request-to-the-create-action-on-loading-a-page-in-rails" but it doesn't respond to the question..
I want to make a loading animation into my rails 3 app cause the server takes time to send email and do some other calculation so the user experience is not so good...
I have read this tutorial : http://www.marketingformavens.com/blog/create-a-page-loading-animation-with-ruby-on-rails-and-ajax but it's for rails2 (remote_function doesn't exist anymore in rails 3).
I wonder if someone can tell the way i should do so :
-> having a nice animation loaded onto the screen when the user click on an action (like create, or update)
Thank's a lot.
Hope to find a answer...
If I understand you want to load an animation while your action is done in ajax. Just use the jQuery API to call your controller actions in Ajax and use callbacks to stop your animations :
$("#myaction").click(function(){
//write your animation code here
$.ajax({
url: "http://localhost:3000/yourcontrolleraction",
dataType: "json",
type: "POST",
processData: false,
contentType: "application/json",
data: yourdata
success: function(){
//stop your animation here
}
})
});
For more on using jQuery Ajax with Rails I suggest your read this excellent post : http://blog.project-sierra.de/archives/1788
Related
I have developed an app using Apache Cordova Windows Phone 8 framework.I am working on emulator.
My first page makes an ajax call to a WCF service to show list of employees depending upon user input.I have shown data returned by Ajax call on my page.Everything works fine till this.
The problem starts when I click on Back button of the emulator. Back button takes me to start of the emulator where we can see all the app icons.
When I click on my app icon it opens index.html which is my main page.When I enter my search criteria and press search button, ajax call returns request status 0.
I am not able to figure out why this is happening and not finding anything useful in internet search. My ajax call is this
// Require cross-site scripting so enable it here (calling different website)
$.support.cors = true;
var jsonData = { 'searchCriteria': 'Raj'};
$.ajax({
type: "POST",
url: "http://hqit116/EmployeeWCFService/EmployeeWCFServices.svc/GetEmployeeData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(jsonData),
processData: true,
success: onSuccess,
error: OnFailure
});
Can someone please help me with this. This is really stopping me progress with my next bit of work.
Whats the smartest way to add a ajax loader gif image in the center of screen every time my Sencha 2 app does a ajax request? Should be some kind of code snippet which should check if a internal Javascript counter which keeps track of all open Ajax requests is > than 0 and thereby show the loader gif
Normally I just put the code below before a ajax request.
Ext.Viewport.add({
masked: {
xtype: 'loadmask',
message: 'A message..',
indicator: false
}
});
You might want to extend the ajax class and add it there to get this to work for every ajax request.
I'm building a sort-of clone of CoverItLive in Rails 3.1 and want to have the stream of comments automatically update. I'm using a partial in the view to display comments. There's a lot of info out there on doing UJS and AJAX wit forms or buttons or links in Rails, but I can't find any specific examples for what I need to do.
I'm assuming that .ajax() is the best approach, but I've never used it before and not sure if I need to provide .js.erb files when using this particular function? Could I just have the controller send JSON back to the client and go from there, or is there a better approach in rails?
This is what I'm thinking so far, based on what I read at another question:
setInterval(function() {
$.ajax({
type: 'GET',
url: ''<%= comments_path(:json) %>'',
data: {
data: "comments_data"
},
cache: false,
success: function(result) {
if (result == "true"){
alert("true");
}else{
alert("false");
}
}
});
}, 3000);
As an alternative you should look into Private Pub, a gem that Ryan Bates has put togeather. See a screencast about it on railscasts.
The trouble with your solution is now often you server will be hit unnecessarily, i guess it depends on the number of concurrent users you thing will be viewing this page.
if you do go down your route the .js.erb could just have a somthing like this in it:
$('#id_of_area_to_replace').html("<%= escape_javascript(render"comments/index") %>")
This would replace the whole area else you could just append new comments to the bottom of the area
I'm creating a mobile app using sencha touch & facing a problem in asynchronous call of the JSONP I use, and I think I can solve it using synchronous call just like Ajax in Extjs 4.x :
Ajax synchronous in Extjs 4.x
Is it possible to set synchronous calls in JSONP?
or is there an override to achieve that?
Thanks in Advance :)
I looked into this quite extensively a while back, and found that it is not possible. This is because of the script tag hack used in JsonP. The only reason to use JsonP is to get around the cross-domain issues. To get around this using regular Json and set this header on your website specifying the sites that are allowed to make calls to this site.
Access-Control-Allow-Origin: http://foo.example
categories = new Ext.data.Store({
model: 'categories',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://localhost/php/server.php?action=catall',
reader: {
type: 'json'
}
}
});
its the json data
[{"catname":"HEALTH","id":"1"},{"catname":"IMAGINE","id":"2"},{"catname":"ENTERTAINMENT ","id":"3"},{"catname":"KIDS","id":"4"},{"catname":"LOCAL","id":"5"},{"catname":"TRAVELLER ","id":"6"},{"catname":"INTERNET ","id":"7"}]
I only recently started using dojo and I am doing numerous ajax calls using dojo xhrGet, xhrPost,..etc. Now I have an animated gif image which i want to use to indicate "loading" to the user. I am not too sure how this can be done. Can someone please advise me on this? here is my code,
dojo.xhrGet({
url: registcarturl,
handleAs: "json",
preventCache: true,
load: function(data, ioArgs) {
//DO STUFF WITH data HERE
},
error: function(error) {
alert("sorry ! an error occurred while adding to the cart with ajax");
}
});
How do i get my loading gif file into the interaction? Thank you.
Have a look at dojox.widget.Standby: http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html
To give you an example, define the widget.Standby
<div jsId="basicStandby1" dojoType="dojox.widget.Standby" target="yourDomTarget">
After calling dojo.xhrGet, show it:
basicStandby1.show();
And when you receive your answer, hide it:
basicStandby1.hide();