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();
Related
I'm using the Twitter Bootstrap modal as a login window, and would like it remains open if user put wrong login info. My Page refreshed after submitting the form.Is there a way after refresh page modal open again and I an show the message there that Login Failed:Please try again.
You will have to trigger the modal when there is an error after a post back.
You could have the server print out some javascript to trigger the modal after a post back ONLY on an error condition. You didn't mention what server side technology you are using, so here is some psuedo server side code:
if (hasAuthenticationErrors)
<script type="text/javascript">
$('#myModal').modal('show');
</script>
end if
That bit of javascript would have to be rendered AFTER the modal is initialized with a show:false option
$('#myModal').modal({ show: false})
see: How can I trigger a Bootstrap modal programmatically?
The scenario is certainly possible, but not even necessary. You should use the preventDefault in order to withhold the form from submitting the page. That is, if you use AJAX, which looks to be the perfect place for it.
An example would be
$(function () {
var frm = $('#form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
});
I am trying to dynamically retrieve the url after clicking on an item in a list.
The objective is to open the html page corresponding to clicked element.
Here is the code used:
Ext.define('FirstApp.view.Details',{
extend:'Ext.Panel',
xtype:'details',
requires: ['Ext.Ajax'],
config: {
listeners: {
activate: 'onActivate'
},
url: 'MyHtml.html' // Work fine if statically
url: '{link}', // But this doesn't work dynamically
tpl:'<h1>{link}</h1>' // However the desired data is displayed right here
},
onActivate: function(me, container) {
Ext.Ajax.request({
url: this.getUrl(),
method: "GET",
success: function(response, request) {
me.setHtml(response.responseText);
},
failure: function(response, request) {
me.setHtml("failed -- response: " + response.responseText);
}
});
}
Do you have an idea?
Thanks in advance for your help.
{link} works in tpl because the tpl property handles the string like an XTemplate. Your (custom) url property is just handled like a string.
Where exactly is {link} coming from? Since you are using a standard panel, I can only assume you are setting the data property on the panel with this link value. If so, just set the url at the same time via setUrl. Otherwise add a listener on updatedata, so that whenever your template data changes the listener is called and you can update the url.
I'm having a bunch of problems getting jQuery's .on to work with my Rails ajax link.
Specifically, I've got this link:
<div id="item_7_tools" class="item_tools">
<a rel="nofollow" id="book_item_7" data-remote="true" data-method="post" class="book_link" href="bookings">Book this item</a>
</div>
I've trimmed some of the text in the HTML, but suffice to say that that, and my controller response work.
I click "Book this item", it goes off to the controller, the controller does its magic, and sends back my partial that replaces the contents of that div.
So I'm now trying to replace the contents with an ajax spinner while the loading is working, and that's where its going pear-shape.
I'm trying this initial bunch of jQuery code just to make sure I've got my javascript working:
$('div.item_tools')
.on('click', 'a', function() {
console.log("clicky click")
})
.on('ajax:beforeSend', "a", function() {
console.log('the a in div.item_tools is sending its ajax command');
})
.on('ajax:complete', "a", function() {
console.log('ajax request completed');
})
My understanding of that, is that when I then click any link (a) that lives within an element with the item_tools class, it will bubble up to this function, and then log the message into the console. Similarly, a link that has triggered an ajax request will get the same treatment...
(And assuming I can get that to work, then I'll go to work doing the ajax loader spinner).
The behaviour I'm seeing instead, is that when I click the link, there are no messages appearing in my console (trying this on both firefox and chrome), and my ajax link goes off and does its stuff correctly. Just completely ignoring the javascript...
Is this because my clicking the ajax link somehow has blocked the click event from bubbling up? I know that there's a way to do that, but I don't think I've done it anywhere knowingly. Unless OOTB rails/ujs does that?
So my questions:
Is there a way to tell what has had a binding attached to it?
What am I doing wrong with my javascript?
Thanks!
I use this all the time... and it seems to work fine.
Have you tried adding one that's .on('ajax:success')?
Besides that try putting the . for each line on the previous line...? It's possible that it gets to $('div.item_tools') and then auto-inserts a semi-colon as per javascript's standard... Although if that were the case I'd expect it to give you a JS error about the . on the next line. In any case try changing it to:
$('div.item_tools').
on('click', 'a', function() {
console.log("clicky click")
}).
on('ajax:beforeSend', "a", function() {
console.log('the a in div.item_tools is sending its ajax command');
}).
on('ajax:complete', "a", function() {
console.log('ajax request completed');
})
If worse comes to worse try just doing:
$("a").on("ajax:success", function(){
console.log('ajax:success done');
})
And see if it works without the event delegation...
Then change it to this:
$(document).on("ajax:success", "a", function(){
console.log("ajax:success with delegation to document");
})
And see if delegation works all the way up to document instead of just your item_tools
Are you sure that you've named everything right? it's div.item_tools a in your markup?
Turns out that the javascript was being triggered before the DOM had loaded, which meant that stuff weren't being bound...
$(function () {
$('div.item_tools')
.on('click', 'a', function itemToolsAjaxy() {
console.log("clicky click");
})
.on('ajax:beforeSend', "a", function() {
console.log('the a in div.item_tools is sending its ajax command');
$(this).closest('div').html('<img src=/assets/ajax-loader.gif>');
})
});
Added the $(function()) right at the beginning and it delayed the binding until after the DOM had loaded, and then it started working.
Figured this out by using the Chrome developer tools to stick a break on the div.item_tools selector and watched as the browser hit that even before the DOM had been loaded. /facepalm
(I removed the .on('ajax:complete') callback, because it turns out that there's a known limitation where the original trigger element no longer exists because it had been replaced, so there's nothing to perform the callback on. Not relevant to my original problem, but I thought I'd mention it.)
As far as i'm aware, you can either do ajax stuff 2 ways:
By using :remote => true
By using jQuery's $.ajax (or $.post).
With number 2, make sure to change your href='#'
My suggeston is to remove the :remote => true and manually make a jQuery ajax call. That way you can use beforeSend, complete, etc.
If i'm way off track here, someone please help clarify things for me as well.
I am making a web application using dojo toolkit and heres my code
dojo.ready(
function(){
dojo.declare("Main",null,{
_dialog:null,
constructor: function()
{
dojo.require("dijit.Dialog");
},
make_dialog: function(url)
{
_dialog= new dijit.Dialog({
href:url,
});
_dialog.show();
}
}); // class ends
temp=new Main();
});// dojo.ready ends
My problem is that when I load dijit.Dialog it is loading various js files( 20 plus) like
tooltip.js,backgroundIframe.js taking about 60kb alone. I want to ask is it dojo normal behaviour or I am doing
And my main problem Is that it making 55 different request. Please help me.
A custom build will package everything up into a fewer files.
http://dojotoolkit.org/reference-guide/quickstart/custom-builds.html
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