I have a busy icon on my page which has a class of "hidden". When the user clicks a button to start processing input data, I want to show the busy icon. I am doing this with
$("#busy").removeClass("hidden");
Immediately after removing the hidden class, I use AJAX to get some data from the server, display it on the page and add the hidden class back to the busy image.
My problem is that the busy icon is never displayed. I'm not a javascript/jQuery expert but I think this is because the page isn't redrawn until after the script has finished executing?
How can I get the busy icon to display while the AJAX processing is in progress?
Try this
First u link ur image on a div
Then
Try this, it will work fine
$.ajax({
url : "URL",
data: { data },
beforeSend: function(){
$("#loading").show();
},
complete: function(){
$("#loading").hide();
},
success: function (response) {
});
});
Related
I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}
I am working on building a website that will not reload to a new page every time a link is pressed. I want to make something kind of like all enterprise/popular websites. (When looking in the network dev tab: notice that youtube page doesn't completely reload when you click on a link, same with google, same with Facebook for the most part. They all usually just reload the page content and nothing else.)
I would like only the HTML between the body tags to be changed (nothing else: no js,css, no head tags, etc).
It would seem like it is pretty easy. Currently, I am just using ajax to go out and fetch the html of the page, and load that into the body. Done! Not so fast... Three things (my code is at the bottom)
The js includes are located at the bottom of the page, right before the closing body and html tags. When looking in the network tab, it shows that the same js is always gotten again and parsed again. How do I prevent that?
Some pages will not load styles that are set. (note that all css, js, etc. scripts are the same for every page)
I want to make sure that the page is completely reloaded if the user leaves the website.
I am not sure if I am looking for a fix to the way I am doing it, but probably just a completely better different way to do it.
Here is my code:
$('a').on('click', function () { //on click of any <a> tag
var where = $(this).attr('href'); //gets url of the <a> attribute
$.ajax({
type: "GET",
url: where, //where is the variable defined above
success: function(a) {
// load next page
history.pushState({urlPath: where},"",where); //changes the link of the webpage
$('body').html(a); //changes the body of the webpage
document.title = $('#title').text(); //changes the title using some weird irrelevant method
}
});
return false;
});
$(window).on('popstate', function() {//on click of the back or forward button
$.ajax({
type: "GET",
url: window.location.href, //the url is the url that the back or forward button is set to
success: function(data) {
//console.log();
$('body').html(data);//replaces data
document.title = $('#title').text();//changes title using weird irrelevant method
}
});
});
I have an AJAX function which triggers my function before the redirection at a URL. So, I need to trigger it later.
Here is the code, I will explain it below.
$('#backToLogin').click(function(e){
$.ajax({
url: "/login/",
success: function(result){
$('#member-space').show();
$("#form-container").html(result);
console.log('success');
},
complete: function(complete){
},
error: function(er) { alert(er); },
});
});
backToLogin is the button on the first page which make the redirection.
member-space is the DIV on the second page that I want to show but it's hidden. I have a button to show it but I want that DIV appear without any click event.
PROBLEM : The DIV member-space appears before the redirection.
Any idea?
When I click at a target div I want a popover to be displayed (I may show a loading label as the content) and at the same time an ajax get request is sent to server to fetch the data. Once the data is back, I want to update this already open popover.
Here is my code:
$(document).on('click', '.row-client', function (e) {
var id = $(this).attr('id');
var str = id.split('-');
var component = str[0];
var clientId= str[1];
$.ajax({
url: '../Clients/Index',
type: 'GET',
data: { clientId: clientId },
dataType: 'html',
success: function (data) {
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: data
});
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
Problems I encounter with is:
Popover is not displayed automatically at first the click or when the data is loaded. I need to keep clicking. Once the data is back and loaded, the popover is displayed at the 'next' click. Why is this so?
Is there any way I can keep the popover open and update the content automatically after I got the data?
Upon the next click to raise the popover, I want the content to be blank (it is not now). What's preventing it?
The call to $().popover does not make the popover appear. It only adds popover behavior to the DOM element. What makes it appear later is the click, depending on the "trigger" you configure for the popover.
Try invoking $('.popper').popover() as soon as the document is ready.
And to change the contents of the popover, while it is shown, try the following:
$('.popper').attr("data-content","new content");
$('.popper').data('bs.popover').show();
I have three pages on my site.
Page 1: A simple page where the user enters the database search criteria
Page 2: An HTML5 Adobe Edge animated page
Page 3: The search results page
Page 1 loads very fast. Pages 2 and 3 load slowly (about 3 seconds each).
I want to load page 2 while the user is entering their search criteria into Page 1. Once the user presses enter on page 1, I want page 2 to display immediately. While page 2 is displaying (animating), I want to load page 3. After page 3 loads BUT not before 5 seconds I want page 3 to load.
Excellent answers from everyone: OK. Here's what might work best: Comments welcome!!!!
<script>
$(document).on('pageinit', '#first', function(){
$('#search').click(function(){ // When user submits form
$.ajax({ // Call HTML for page 2 (adobe edge animation)
url: "mypage2.html",
success: function(html){ //When receiving data :
$('#second').html(html); //puts data into second div
$('#first').hide(); //hides the first one
$('#second').show(); //shows the second one
setTimeout(showThird,5000); //pretending there's a loading, only for demo purposes
}
})
});
$.ajax({ // Call HTML for page 3 (adobe edge animation)
url: "mypage3.html",
success: function(html){ //When receiving data :
$('#third').html(html); //puts data into third div
$('#third').hide(); //hides the third one
}
})
function showThird(){ // hides second div, show third div.
$('#second').hide();
$('#third').show();
}
});
</script>
</head>
<body>
<div id="first">
<input type="button" id="search">
</div>
<div id="second">
</div>
<div id="third">
</div>
</body>
</html>
I could really use some help figuring out the best way to do this. I'm already using jQuery and jQuery Mobile.
HTML and the browsers that render it do not inherently behave like this. You cannot queue pages into a loading buffer as you suggest. HTML executes commands in a synchronous fashion, ie: when a page is called, the old page is discarded and the new one begins to load. There is no way to change this fact...there are, however, some tricks to get the illusion of the effect you are looking for.
As mentioned in another answer, AJAX (Asynchronous Javascript & XML) is a technique utilized by almost every site/application today which allows you to pull content into a pre-existing page with an asynchronous call. jQuery makes AJAX calls rather simple so I'll let you look up the code necessary.
You may want to consider loading the animated page (I am assuming it is a loading animation) when the form page is loaded. Rather than making an additional call to pull the animation page, you can simply hide the animation initially...and show it when the form is submitted...then hide it again when the new information is pulled onto the page!
You should load your pages using ajax.
For example, you would have one div containing page 1. When page 1 loads, page 2 is also loaded asynchronously and its content is loaded into another div, hidden.
When the user submits his search, div 1 is hidden, and div 2 is shown.
At the same time, page 3 is called asynchronously via ajax, loaded in a hidden div 3.
When loaded, div 2 is hidden, and div 3 is shown.
This is the ajax part :
$.ajax({
url: "page2.html",
success: function(html){ //When receiving data :
$('#second').html(html); //puts data into second div
$('#first').hide(); //hides the first one
$('#second').show(); //shows the second one
}
});
Working demo JSFiddle : http://jsfiddle.net/38DPJ/
I guess you can use an AJAX call. Try something like this:
$.ajax({
url: "page2.html",
cache: true,
success: function(html){
}
})
And for page3 you can try
$.ajax({
url: "page3.html",
cache: true,
success: function(html){
setTimeout(function(){window.location.href = "page3.html";},5000);
}
})