I am using JQuery BlockUI plugin for my project. Here is the link of this tool:
http://malsup.com/jquery/block/
I am hoping to call it manually before heavy (non-Ajax) computation and end it after it. I tried many times, but not able to get it work. I tested the following:
$.blockUI({ overlayCSS: { backgroundColor: '#00f' } });
before doing the heavy computation. But no blocking.
Update 1
I already have
$(document).ajaxStart($.blockUI(bui)).ajaxStop($.unblockUI);
in my program and it is work perfectly.
Now I want to use $.blockUI for non-ajax call only in this place, but it is not working.
Update 2
Here is code structure. I tested BlockUI in two places separately, but not working.
$.blockUI(); //place 1
$.ajax({
url: '/js/a_big_map_file.js',
dataType: "script",
async: false,
success: function(mapjs) {
$.blockUI(); //place 2
...
//heavy computation is here
...
});
Related
I'm using new Redactor 2.2. I wanted to use this Redactor after ajax call. Similar to https://imperavi.com/redactor/examples/ajax/
I can initiate the redactor and it showing but I could not add plugins to this. Even their plugin ( source code, font alignment, font size, font color etc ) are not showing ( But other buttons which are not plugin are showing as in the above URL )
$.ajax({
type: "POST", url: "myurl", data: "", dataType: "json",
success: function (data) {
$('#divReplacer').html(data['content']);
$("#divReplacer .htmlEditor").redactor({
plugins: ['source', 'fontcolor', 'fontfamily', 'fontsize']
});
}
});
Old Redactor worked fine with the above ajax call.
These plugins are showing perfectly if we load the redactor without ajax call.
Anyone face this issue ?
I did the following modification to all plugin JS file and now it is working :)
$.Redactor.prototype.fontsize = function()
change to
RedactorPlugins.fontsize = function()
The Discover Meteor book shows how to use the sasha:spin package to show a loading spinner template (<template name="loading">) while IronRouter waits for data.
How do I use this same loading template while I'm waiting for a regular jQuery ajax call to finish?
var locationInfoByZipcode = function(zipcode, callback){
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// Render the loading template. I tried Blaze.render("loading") but I'm not using it right
}.
success: function(response){
// Stop the loading template.
},
error: function(){
callback("error");
}
});
};
Blaze.render takes a template and a parent, not a string, so it'd be Template.loading and then the parent template you want to render into. You'd probably want to destroy it in the success callback.
What might be a little bit cleaner is putting the HTTP req inside a method along with a reactive variable & calling that method on click. Then, you can keep the loading template inside an #if reactiveVarIsTrue type thing in spacebars. Just a personal preference to not use jquery ajax calls if I can help it because they're not very expressive.
I got it.
var locationInfoByZipcode = function(zipcode, callback){
var renderedView = {};
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// $('body')[0] is the DOM node object that .render() needs
renderedView = Blaze.render( Template.loading, $('body')[0] );
},
success: function(response){
// to remove the template you need to pass Blaze.remove() the returned value from the initial Blaze.render() call
Blaze.remove(renderedView);
callback(response);
},
error: function(){
callback("error");
}
});
};
i wanna have a Faceook-Feature in my website: Everytime a user gets a Private Message, the title should be change in something like "[1 PM] TITLE",
How to do that?
I know its easy to change the page-title, the question is how to run a database query every 10 seconds (or is that to often?) and change the title - Without an user interaction (ajax?)
You can use jquery setInterval to make a AJAX request after a certain interval to get data from the db.
$(function(){
setInterval(function() {
$.ajax({
url: "page.html",
success: {
document.title ='new title';
},
error: function(){
//error occurred
}
});
}, 2000);
});
And on AJAX success you can change the page title.
I have an asp mvc 3 application, and there is a view that makes an ajax call, when I run it in visualstudio it workes but when i run it in IIS 7 it is not sending it to the server! I searched for a solution and it said that the urls had to be modified, so i changed it like this using url action but it still doesn't do anything, does anybody know why this might be?
In the webpage I don't see anymessage it simply doesn't do anything.
The ajax funciton is inside the code of the view, it is embedded there, it looks like:
<script type="text/javascript">
function display(Txt) {
$.ajax({
type: "POST",
//url: "/Controller/Action",
url: '#Url.Action("Controller", "Action")',
data: "Id=" + Txt,
success: function (result) {
if (result.Info != undefined) {
//do something
}
else if (result.Info == undefined) {
//do something
}
}
});
}
</script>
The problem was that Url.Action was the other way around:
before:
url: '#Url.Action("Controller", "Action")',
after:
url: '#Url.Action("Action", "Controller")',
This is strange because I checked a blog from microsoft and they had it in the first order =S
First try getting to the Ajax uri in your browser.
If you cannot you may just have set the app up in a different folder structure.
If your controller method has an Ajax attribute remove it for this test.
The answer may be apparent after trying the url (uri)
I am having no luck in getting a jqueryui dialog to ajax load a form, which inturn submits via ajax.
Everything works upto the point of catching the form that is being submited and instead sending it through an ajax call. Thus the form action is triggered and the browser redirected. The ajax call is never made.
My code is as follows
$(document).ready(function() {
$('.viewOrder').click(function() {
$('#displayOrder').load(this.href, [], function() {
console.log("landed here");
$('#blah').click(function() {
console.log("submiting the form via ajax");
$.ajax({
url: "/ajax/orderupdate",
type: "GET",
data: data,
cache: false,
//success
success: function (data) {
console.log("worked:");
}
});
return false;
});
});
return false;
});
});
.viewOrder is the a href that is ajax loaded. This works fine.
I have read many similar questions on here and it seems load() does not execute scripts that are embeded in the return html, but my return code is pure html no scripts. Any ideas?
IMHO you should try and capture the submit instead of the click, that way you prevent submits done by keyboard aswell, and it might even fix your problem.
The events are bound on page load. At page load the form you are binding the click event does not exist. I use the livequery plugin but they added Live to jquery 4 which you can also use(i had some issues with IE so i went back to livequery)
So load livequery with your scripts http://docs.jquery.com/Plugins/livequery
and change
$('#orderUpdate').submit(function() {
to
$("#orderUpdate").livequery("submit", function() {