I am working on a project in which the navigation does not really changes pages but gets data using services based on which navigation link I click and update data using jquery .html() method, I want to use a loader that shows up on clicking any link and hides the content, when ajax services is successfull i want to remove the loader and show back the content, but somehow the animations are overlapping causing animations to fail,
in example code here i am not using ajax to update my page but a simple button
and jquery to update the data
<body>
<div id="loader">
<img src="loader.gif" alt="">
</div>
<br>
<div id="content">
This is the content
</div>
<input type="button" id="update" value="Update Data">
</body>
<script>
function showContent(){
$('#loader').fadeOut(200).promise().done(function(){
$('#content').fadeIn(200).promise().done(function(){
});
});
}
function hideContent(){
$('#content').fadeOut(200).promise().done(function(){
$('#loader').fadeIn(200).promise().done(function(){
});
});
}
$("#update").click(function(){
hideContent();
$("#content").html("New Data");
setTimeout(showContent(), 10000);
});
</script>
on clicking update, this should happen
content should disappear,
loader should appear,
update content,
loader disappear,
content appear,
but i get both loader and content appeared in the end
I used setTimeout to give some delay but it doesnt works , i also used some flags earlier but that didnt work too .
JsFiddle : JsFiddleLink
Why use setTimeout()? You can return, chain the promise
function showContent(){
return $('#loader').fadeOut(200).promise().done(function(){
return $('#content').html(data).fadeIn(200).promise()
});
}
function hideContent(){
return $('#content').fadeOut(200)
.done(function() {
this.empty();
return $('#loader').fadeIn(200).promise()
});
}
$("#update").click(function() {
hideContent().then(showContent)
})
Related
This scripts pulls the content from an FAQ page and injects it into a modal.
The script works fine on everything, but the cart page, all of the console logs fire, my response returns successfully, but .html() doesn't add the response to the DOM.
<div id="SafetyPolicyModal" class="safety-policy-modal">
<div class="modal-content">
<div class="close-btn" safety-modal-close-btn>×</div>
<div class="content-render-section"></div>
</div>
</div>
<script>
$(document).ready(function(){
$('.container').on('click','[safety-policy-link]',function(e){
e.preventDefault();
console.log('1')
$("#SafetyPolicyModal").css("display", "block");
console.log('2')
});
$(document).on('click','[safety-modal-close-btn]',function(e){
e.preventDefault();
$("#SafetyPolicyModal").css("display", "none");
});
$.ajax("/pages/safety-liability?view=no-index").then(response => {
console.log("!!!!!!")
$(".content-render-section").html(response);
console.log(response)
console.log('done')
})
});
</script>
My guess is that this particular page has multiple elements with class content-render-section and the one you want to target is not the first.
Be specific with your selector to target the right one. FYI, you can use jQuery's .load() method to make the code simpler
// Target the content-render-section within your modal
$("#SafetyPolicyModal .content-render-section")
.load("/pages/safety-liability?view=no-index");
I'm trying to reproduce the loading effect we can see on the google material.io website : when selecting a menu item, the content and url change, but the sidebar doesn"t move, as if only the content was changing..
can someone can explain me how to do this ? is it like the tehcnique described on css ticks tutorial "dynamic page replacing content" or something more like ajax ?
I have this code in html :
<div id="containerWrapper">
<div class="flex-row">
<div id="menu" class="flex-col-xs-12 flex-col-md-2 generator_menu">
<nav role="navigation" id="navigation" aria-label="Menu principal">
MY MENU HERE
</nav>
</div>
<div id="contentWrapper" class="flex-col-md-10">
<div id="guts">
<div class="flex-col-xs-12 generator_main">
MY CONTENT HERE
</div>
<div class="flex-col-xs-2">A sidebar dynamic TOC</div>
</div>
</div>
</div>
</div>
<footer></footer>
And the Ajax Code:
$("#menuList a").on('click',function(e){
e.preventDefault();
pageurl = $(this).prop('href');
$.ajax({url:pageurl,success: function(data){
$('#contentWrapper').html($(data).find('#guts'));
// Rerun Prism syntax highlighting on the current page
Prism.highlightAll();
return false;
}});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
$(window).bind('popstate', function() {
$.ajax({url:location.pathname,success: function(data){
$('#guts').html(data);
}});
});
My problem:
-All my jquery events are in a dedicated file, wrapped in a jQuery(document).ready(function($) {}.
-If I put my ajax code like this, everything works except the ajax call..If I wrap my ajax code in a jQuery(document).ready(function($) {}., ajax works but all my other jquery events are broken when I click on any menu item and reload the page.
So is there a simple trick to make ajax works together with others jquery functions ?
Ok, finally I followed an answer given here..
In a js file, I wrapped my ajax call in a jQuery(document).ready(function(){}/
In a separate file, I wrapped all my jquery code in a function (scroll functions, clicks on menu function, filters, show/hide functions etc.):
function initialise(){}
Then in this same second file, at the end, I throw initialize function when document is ready, and when Ajax is complete :
$(document).ready(function(){
initialise();
});
$(document).ajaxComplete(function () {
initialise();
});
Now everything looks fine..
If there is a better way, I'll be glad to learn more on this..
I have two html pages in my web app, index.html and topics.html. i have a button in topics.html that when clicked, is supposed to make visible a hidden a Div in index.html so that when I navigate to index.html, the Div must be visible. I understand this can be achieved by local storage and windows.onload, how can I incorporate it to my code which looks like this
topics.html
<button id="show">Show</button>
and the JS
$(document).ready(function(){
$("#show").click(function(){
$(".me").show();
});
});
On clicking the #show button, I want the Div below which is currently hidden to become visible like this so that when i navigate to index.html, the div is visible, and when i click the #hide button, it should stay hiddedn even when page reloads
Index.html (edited)
<div id="rss-feeds" class="me"></div>
<button id="hide">hide</button>
js
$(document).ready(function(){
$("#hide").click(function(){
$(".me").hide();
});
});
How can i use local storage for this?
it's easy if you name your function:
$(document).ready(function(){
function showIt(){
localStorage.shown=1;
$(".me").show();
}
if(localStorage.shown==='1'){ showIt(); }
$("#show").click(showIt);
});
that way you can call the same routine from the click event and during bootup from localStorage.
I managed to do it this way using this wonderful example and it works beautifully for anyone who might be interested.
https://gist.github.com/jakebresnehan/1983968
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
<div id="sign-up-form">
<p>Sign up form</p>
</div>
$(document).ready(function($){
if (Modernizr.localstorage) {
$('#hide-button').click(function(e){
localStorage.setItem('subscribed',true);
$('#sign-up-form,#hide-button').hide();
$('#hide-button').hide();
$('#show-button').show();
});
$('#show-button').click(function(e){
localStorage.setItem('subscribed',true);
localStorage.clear();
$('#sign-up-form,#hide-button').show();
$('#show-button').hide();
});
var is_subscribed = localStorage.getItem('subscribed');
if(is_subscribed){
console.log('localStorage')
$('#sign-up-form,#hide-button').hide();
}
if(!is_subscribed){
console.log('no localStorage');
$('#sign-up-form').show();
$('#show-button').hide();
}
}
});
I have this code :
HTML
Show Agency
<div id="invisibleDiv">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
jQuery
$("#showDiv").click(function () {
$("#invisibleDiv").show();
});
CSS
#invisibleDiv
{
display:none;
}
When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.
Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.
How can I do it? I'll avoid AJAX.
UPDATED:
DEMO: http://jsfiddle.net/HqeD2/
Show Agency
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
$(function() {
$("#showDiv").click(function() {
$.getScript("http://platform.linkedin.com/in.js");
});
});
If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?
<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>
$("#showDiv").click(function(){
$("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});
Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.
EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...
$("#showDiv").click(function(){
$("#pleaseWaitDiv").show();
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
});
Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv
More edit:
New up a script node and append it.
var scriptNode = $("<script></script>")
.attr("type","IN/CompanyProfile")
.attr("data-id","1035")
.attr("data-format","inline")
.attr("data-related","false");
$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
You can bind it to your showDiv click function, inline scripts are processed right away...the only other thing I can think of is to have the script be loaded via ajax which you don't want.
Try this :
http://jsfiddle.net/sXJa6/6/
my site has 2 pages both have hyperlinks to each other but when user click on that hyperlink I just need a certain div of that page to be replaced by certain div on other page, please guide me how to program it.
structure
page1.html
<div id="no_replace">
page 2
<div id="replace">
//page one stuff
</div>
</div>
page2.html
<div id="no_replace">
page 1
<div id="replace">
//page two stuff
</div>
</div>
so on page one when usr clicks on link "page two" ... I want the 'replace' div of page one to be replaced by 'replace' div of page2.html and there should be fade in and fadeout
Use the load() method.
$('a').click(function(){
$('div').load($(this).attr('href'));
});
Try this in Page1.html
$(function(){
$("a").click(function(){
$.get({url:"page2.html",
success: function(data){
$("#replace").html($("#replace", $(data)).html());
}
});
});
});
first give your link an id or class. I'm going to call it .loadpage
$('a.loadpage').click(function(e){
e.preventDefault();
var div = $('#replace');
div.fadeOut(300).load($(this).attr('href'), function(){ div.fadeIn(300); });
});
First you need to stop the default behavior of the link by doing e.preventDefault(). Then you need to use the load() method to bring in the contents of the page you're trying to load.