Unable to display loading GIF image when content changes without refresh - javascript

I am working on a project wherein I am loading database data in a section. I have used an indicator which is basically an GIF image which gets displayed when I click on the URL which opens the page where data gets loaded. The indicator is hidden when data loads completely. This seems to be working well in this scenario but it does not work when I click on the other URL which loads the section without refreshing the page.
Code which handles on link click:
$(".link1").click(function(event){
alert("hi")
//$('#overlay').fadeIn();
$("#overlay").css("display", "block");
event.preventDefault();
var url = $(this).attr("href");
$('#MainContent').load(url);
var res = url.split("/");
res = res[2].replace(/([A-Z]+)/g, " $1");
document.getElementById("pageName").innerHTML = res;
});
Code which hides the GIF once the data loading is complete:
jQuery(window).load(function(){
$("#overlay").css("display", "none");
});

To hide the image when the load() completes you should provide a callback function, like this:
$("#overlay").show();
// ...
$('#MainContent').load(url, function() {
$("#overlay").hide();
});
Also note the preferred use of show() and hide() over css().

Related

jQuery show loader while page get reloading

I have created functionality using jQuery, so when user click on button it will make clear filter on that page and reload page.
While clearing filter loader is showing on page, but when reload page line come then that loader is getting hide and page is reloading.
What I want is loader must displayed when page getting reload.
Below is some code.
var finalURLStrings = urlFinal.replace("isInboxstring=True", "isInboxstring=False");
var finalURLString = finalURLStrings.replace("isInbox=True", "isInbox=False");
$("#loading").show();
window.location.href = finalURLString; // while executing this line I still want to show loader which get hide here.
The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page and New page always reload and loading any spinner not show in new page.
so use this code below code:
$("#loading").show();
$(document).ready(function () {
$("#loading").hide();
});

Apply Jquery After Page Loads

I have following HTML code to add new div:
<a class="add-link" id="buttonAdd" href="#Url.Action("Foo", "Foo1", new {actiontype = "Add" })">Add New Openings</a>
When i click on Add , new div is added. I want to show that div in editable mode by default, but as there is link in html for <a> I am not able to accomplish it. I want to show first div that is added as editable .
$(document).ready(function () {
$('.container').on('click', '.add-link', function () {
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Can someone guide me please.
You need to prevent the default click behaviour:
$(document).ready(function () {
$('.container').on('click', '.add-link', function (e) {
e.preventDefault();
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Apparently this is only the first issue. They also want the code to run after the link page has been loaded!!! :)
How web pages work.
Because the web was designed to be stateless, to a web browser, each page load is separate to the last. Even if they are the same URL. The practical upshot of this is that your code gets reloaded and restarted on each page.
Based on your comments you want to add a div then apply jQuery to the accordion. You have two options.
a)
Detect the change of divs on page load and apply the change then.
b)
Run the link via an Ajax call and update just the required part of the page using informtion in the new page returned from the server.
Of these two options only the Ajax solution will allow you to retain code-control on the originating page. I would suggest the URL be changed to a method which returns a PartialPage containing just the new DIV.
In order to answer this definitively, we need more information about how you prefer to solve the problem.
If you go Ajax:
If you go with an Ajax update, I suggest you change the link to an action that just returns the new DIV in a PartialView. Then you can do something like this:
$('.container').on('click', '.add-link', function (e) {
// Stop default processing of the link
e.preventDefault();
// Load the new page (specified by the clicked link's href)
var $link = $(this);
var url = $link.attr('href');
alert(url); // for testing - remove this
// Execute a HTML GET command on the URL
$.get(url, function (html) {
// Add the new DIV "somewhere" to be determined
$('.container').append(html);
// Then do your other processing
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
});

Loading and Saving state before going to next page using History.js

How does twitter implement this kind of functionality? let's say I am at this part of the web page.
Then let's say I click another page (let's say Dev Ops Borat)
After clicking that. I click the back button then I noticed that the I was back at the previous page
and take note that the location of my scrollbar is still the same where it was before. So it was definitely saving the previous state of my browser before I go to the next page.
So my question. How do I implement this using History.js? I have come up is something like this.
History.Adapter.bind(window, 'statechange', function(e) { // Note: We are using statechange instead of popstate
var State = History.getState();
$("body").css("cursor", "default");
$.get(State.url, function(data) {
//Get The title of the page
var newTitle = $(data).filter('title').text();
//replace the page with the new requested page
//$('#main-content').html($(data).find('#main-content').html());
$('#main-content').children().remove();
$('#main-content').html($(data).find('#main-content').html());
//Change the title of the page to requested page title
document.title = newTitle;
},"html");
});
This seems to be working fine, however when i click back button the previous state of the previous web page is not the same as I left it.(like in the example above)
Not sure if I completely understood what you'r asking for, but how about storing the content of each page through the History.pushState - and then retrieving it from State.data.content instead of doing a new AJAX request each time?
So replace your AJAX ($.get) with something like this:
var $main_content = $('#main_content');
History.Adapter.bind(window, 'statechange', function(e) {
var State = History.getState();
$("body").css("cursor", "default");
$main_content.html(State.data.content);
});
And then add the content you are loading with AJAX into State.data.content
$.ajax({
url: url
}.done(function(data) {
History.pushState({content: data}, null, '/replace/with/dynamic/urlpath');
$main_content.html(data);
});
If you have javascript functions that alters the DOM ie: show() hide(), you could just update the State.data.content with a global function that you run each time you do changes in the DOM.

.ajaxStart() and .ajaxStop() not firing after first time

here's what I have:
$(document).ready(function(){
//stuff
}).ajaxSend(function() {
$('.overlay').show();
}).ajaxStop(function() {
$('.overlay').fadeOut();
});
The problem I am having is that the first time I trigger an ajax action it works perfectly, but not any time after that. I have to reload the page for the ajaxSend/Stop to work again. So say I load a page, click 'load more' to ajax load content, the overlay shows up no problem. but then I click it a second time, everything works fine except the modal doesn't show up this time or any time after.
any ideas?
$(document).ready will only be called once - when the DOM is loaded. This won't work when loading data via ajax.
Two options:
First, if you can identify the div using its id that you are loading as part of your ajax page load, then you can do (edited):
$('.overlay').ajaxSend(function() {
$(this).show(); });
$('.overlay').ajaxStop(function() {
$(this).fadeOut(); });
Alternatively, you could forego ajaxStart and ajaxStop altogether, and trigger them as you click the "Load More" link e.g. something like:
$("a").click(function(){
var url = $(this).attr('href');
$(".overlay").show("fast", function(){
$("#targetdiv").load(url + " #div_id", {}, function(){
$(".overlay").fadeOut();
})
})
return false;
});

jQuery images with fadeIn() don't load when page is cached or accessed via back button

At the beginning of my script, I have:
jQuery(function() {
jQuery('img.thumbnail').hide().load( function() {
jQuery('img.thumbnail').fadeIn();
});
});
Which nicely fades in all the thumbnails on the page as they are loaded. However, when I access the page for a second time (when it is cached), or when I press the back button in the browser, the images stay hidden and never appear. I have to manually refresh the page.
What am I doing wrong?
Try this, since .load() may not fire on all browsers when fetching from cache:
jQuery(function() {
jQuery('img.thumbnail').hide().each(function() {
if (this.complete)
$(this).fadeIn();
else
$(this).load( function() { $(this).fadeIn(); });
});
});
Have you tried adding it to a $(document).ready() statement? Then it should run whenever the page is done loading.

Categories