Here is the case.
I have a website built in asp.net mvc3 with custom CMS.
Is there any way by clicking a button from cms to reload the page of the website visitors?
For example, here in stackoverflow, if an admin from the backend pressed a button my page would reload automatically (or even a lightbox would appear, or redirect me to a different page).
Can we do that?
With HTML5 you can use web workers to do this for you: http://html5demos.com/worker
Without HTML5, you can set up some basic polling code in your javascript. It would call a method on the server that would tell it whether or not to reload. You can run this every 30 seconds let's say:
$(document).ready(function(){
var doRefresh = function(){
$.get('checkForRefresh', function (data) { ... handle response ... });
};
setInterval(doRefresh, 30000);
});
And then just have your checkForRefresh server side code read a value set by that CMS button.
Forcing a reload on a button click boils down to something like this (using jQuery and javascript):
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
The first answer on the following question shows two ways to refresh the page, one forcing a reload like above, and the second, much like #Milimetric describes in his answer:
Refresh (reload) a page once using jQuery?.
Related
I have a jquerymobile ajax based web app. not using ajax is no option.
On one page a new script is inserted by <script url="../script.js"></script>
Now i would like to load that script, after the page is loaded by ajax. Unfortunately it does not happen. I tried for example:
$(document).live( 'pageinit',function(event)
CODE HERE
{});
But it does not work. As well as
$(document).bind('pageinit', function()
Any ideas how i can manage to load the function after the page is loaded by ajax??
Found the solution with help of "OMAR". I put the function inside the page div. But the link is not working, so i put the code itself into the top of the div. now it is working. not the best solution, but it is working.
I have a jQuery Mobile 1.3.0 app that is making Ajax calls to dynamically load data. I have seen various options for doing this in previous versions of jQuery Mobile (see Show Page Loading Spinner on Ajax Call in jQuery Mobile), but have not found an answer for 1.3.
The Ajax calls are similar to:
$.getJSON(url, function(data) {
console.log(JSON.stringify(data));
$.each(data.cards, function(index, card) {
$('#card-name').text(card.title);
});
});
What is the best approach for displaying the loading spinner for each Ajax call?
After some research and trying several options, I found that this worked well for every Ajax call in the app. I added the following code toward the top of my JavaScript:
// Load the spinner if an ajaxStart occurs; stop when it is finished
$(document).on({
ajaxStart: function() {
$.mobile.loading('show');
},
ajaxStop: function() {
$.mobile.loading('hide');
}
});
In this way, no matter how many places I load data via Ajax, the jQuery Mobile loader (spinner) is displayed by adding this snippet of code one time.
If anyone knows of a better approach, please let me know.
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
I'm trying to load my next/previous posts links with ajax. I've written this piece of code, and it works well. However, when the user clicks the 'Back' button, the location in the address bar is not updated.
$(".next a").live("click", function(e){
e.preventDefault();
$("#portfolio_item").load(jQuery(this).attr("href") + " #portfolio_item");
$("#portfolio_item").animate({marginLeft:'98%'});
$("#portfolio_item").animate({marginLeft:'0px'});
$("#right_content, #gallery").fadeOut().delay(1000).fadeIn();
return false;
});
I've read about plugins like 'jquery address' and 'bbq', but how can I apply them to my code? Hoping for help!
I'm not sure if this is what you want but if you need some URL edit + history management (without loading a new page) you should checkout history.js. This is an awesome js library that allows you to rewrite your URL without reloading a page and storing your history in JavaScript variables.
In order to see how it works there is a downloadable demo and a tutorial on the first link I gave you.
Hope this helped.
I am struggling with a problem about automatic AJAX load of page. I have normal static page, where is a link. After click on this link I will call an AJAX request for loading a data.
This works me. I try now to add next functionality - I would like after load a normal static page to load that AJAX data automatically - is possible to do somehow?
I tried it to do whole afternoon, but I still don't know, how to do it...
So, I will very grateful for every hints, how to do it... Thank you so much.
Make your Ajax call in your jQuery ready function, e.g.:
<script>
$(function() {
$.ajax(...);
});
</script>