On my blog theme I have a "SHOW MORE POST" button after the last post of the page.
When the user clicks the button, more posts are loaded without refreshing the page.
I am doing this using the "Ajax Load More" plugin from the Wordpress repository.
When there are no more post to load, I would like to hide this button.
When there are no more posts, the button becomes a class of ".done", added by ajax.
I have been trying to hide the button using jQuery like this:
jQuery(document).ready(function($) {
var morebutton = $("button#load-more");
if ( $(morebutton).hasClass("done") ) {
$(this).hide();
}
});
but I am having no result. I think i have the right selectors. I have tryed to hide it on a click and it works. I used this jquery:
jQuery(document).ready(function($) {
var morebutton = $("button#load-more");
$(morebutton).click(function(){
if ( $(this).hasClass("done") ) {
$(this).hide();
}
});
});
So, my question is how can I check if an element hasClass, if this class is dynamically added with AJAX?
When I use the document.ready function it will check my element only on document.ready. Is this correct?
So how could i check also after an ajax event?
Any other ways to hide the button after all posts are loaded?
Thank you!
morebutton is already a jquery object, so, you don't need to wrap again.
$(function() {
var morebutton = $("button#load-more");
morebutton.click(function(){
if ( $(this).hasClass("done") ) {
$(this).hide();
}
});
});
If I understand you right, you want to do this when ajax is done, so you should do this, in the ajax success or done:
$.ajax({
url: whatever
})
.done(function( data ) {
var morebutton = $("#load-more");
//if ( morebutton.hasClass("done") ) { it is done now, check for something else, or just hide
morebutton.hide();
//}
});
You could define a global success like this:
$(document).ajaxSuccess(function() {
var morebutton = $("#load-more");
if ( morebutton.hasClass("done") ) {
morebutton.hide();
}
});
see here for more information: https://api.jquery.com/ajaxSuccess/
Well, it turns out i was trying to make it much more complicated than it had to be.
Instead of using jQuery i just used CSS.
I added a rule like this:
#load-more.done {
display: none;
}
...and now it's working nicely!
Thanks for your help, though! =)
Related
Good day folks. I need to figure out how to perform an action using Ajax once I have linked to a specific section on a page. I already know how to get to the designated DOM element on the other page, but I would like to go further as to perform some action using ajax once it has taken the visitor to that point.
eg.
<nav>
<ul><li></li></ul>
</nav>
Will take me to this about.php page to the "team" div
<div>
<div><a name="team"></a></div>
</div>
But then I would like to run some Ajax automatically that would usually be executed when the user clicks on some object in the "team" div. So should the user get to this section by way of the link up above, it will take them straight to the content. Does that make sense?
I'm going to go out on a limb and assume you're using jQuery's animate() for the scrolling:
$('html, body').animate(
{ scrollTop: $("#something").offset().top },
1000,
function() {
someAjaxFunction();
}
);
var someAjaxFunction = function() {
$.ajax({
url: '/something/'
}).done(function(data) {
// Done!
});
};
We're using the callback function argument given to animate() to fire off our ajax request.
You can use jQuery's scrollTo() to scroll to the area on the page, then use the complete function to call you ajax after the scroll has finished.
Detailed Description here
$('body').scrollTo('#target', function()
{
// Do your AJAX Thaaang
});
This check can be run to determine if the user has navigated directly to the teamDiv. Running it on page load would allow you to catch it in the event that the user was deep linked to the teamDiv from another page:
if (/#team/.test(window.location.href)) { // perform Ajax query here... }
Note: In the example link, you use the id team whereas the div's ID attribute is set to teamDiv. They need to be the same for this to work.
So the code would run if the user clicks some object in the "team" div?
In that case, is this an option?
<div>
<div id="teamDiv"><a name="team"></a>some element</div>
</div>
<script type="text/javascript">
$(function() {
$("#teamDiv").click(function() {
//put what you want to happen when the user clicks something in
//teamDiv here
});
})
</script>
My suggestion would be to read the current loaded url:
$(document).ready(function () {
var location = window.location.href;
if(location.indexOf('#team' > -1) {
// do something
}
}
You can check location.hash (http://www.w3schools.com/jsref/prop_loc_hash.asp) to determine if hash existed.
If you want to do something in each variants of navigation to this div: click and scroll you can use something like this:
$(document).bind('scroll', function() {
if($(this).scrollTop() > $('.your-div').top()) {
alert('do something');
}
})
I have a few pages, like a1.html, a2.html, a3.html, a4.html, a5.html....
All pages HTML Markup looks like
<div class="wrap">
<header>Header 2</header>
<saection>Section 2</section>
<footer>
<div class="hover"></div>
</footer>
</div>
so when onhover a1.html .hover class, then page loads a2.html .wrap and appendTo a1.html's body, on the same page, now we have a2.html's contents. when on hover a2.html 's '.hover' (still on a1.html) then loads a3.html's contents and so forth
$('.hover').on('mouseover', function(){
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
});
My question is how to just load a2.html, a3.html or a4.html contents just once when onhover .hover class. How do I test if a2.html is already loaded then, do not load it again? Thanks
Try something like that.
$('.hover').on('mouseover', function(){
if (!$(this).data('active')) {
$(this).data('active', true);
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
}
});
Using the data-set to store a flag (active here), let you the possibility to remove it later and to process again the handler instructions.
If you really want to load it once (and never ever later), replace on by one in your code (as told by #SSS).
$('.hover').one('mouseover', function(){
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
});
Be careful : the way you are using on (or one) binds the mouseover event only on existing DOM elements.
If you want to affect all existing and future DOM elements. You got to use it this way :
$('body').on('mouseover', '.hover', function(){
/// your instructions
});
Hope that will help.
The simplest way is $(..).one(event, handler). But what if you really need to do something after loading once and only once in an a asynchronized and promised way?
I have implemented a cards ui application facing the same problem: card defined in another html file which must be loaded and only once before update/show its content. My resolution is based on jQuery Promises API and a simple cache. Wish helpful and here is part of my code (the real one is much more complicated):
function expect(proc) {
var cache = {};
return function(key) {
if (!cache[key]) {
cache[key] = $.Deferred(function(deferred) {proc(deferred, key); })
.promise();
}
return cache[key];
};
}
var cards = expect(function(deferred, url) {
var $loader = $('div');
function whenDone() {
deferred.resolve(loader.contents());
}
$loader.load(url).then(whenDone);
});
cards('MyCard.html').done(function(contents) {
// It is promised that MyCard is loaded, do what you want here
});
I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API
I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this
$(document).ready(function(){
$("#content").load($('.myajaxreq:first').attr('href'));
});
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#content').hide().load(myhref).fadeIn('slow');
return false;
});
All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.
I think I am missing some sort of
if(content document is ready)
then load in a fade in manner
and so on..
Please somebody help me out here !!
call fade in after success callback... try this
var jContent = $('#content').hide();
jContent.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
here the whole code (untested)
$(document).ready(function(){
var jContent = $("#content").load($('.myajaxreq:first').attr('href'));
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
jContent
.hide()
.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
return false;
});
});
I know there are tons of examples on how to show or hide a div based on click or hover or some kind of user event. I'm looking for a java script sample or jquery sample that shows or hides a div based on weather the div has value. In other words. I am displaying a list of concerts in your area. If there are no concerts in your area another div should be displayed instead saying "there are no concerts in your area".
This needs to happen on page load. Without any user involvement.
Anyone ever used something like tis or a=can point me to a link that shows how to do this?
Thanks
Oceantrain
$(function(){
var $div = $("#div1");
if(!$div.html().length)
$div.hide();
});
If you would like to use a class selector, you can use the following code:
$(function(){
var $div = $(".foo");
$.each($div, function(i,v){
var _$div = $(v);
if(!_$div.html().length)
_$div.hide();
});
});
working demo here:
http://jsfiddle.net/tugberk/mAaDY/
There are tons of example to do this
Generally people use this to check/condition on value.
if( $("this").val().length === 0 ) {
$("this").hide()
Secondly
if( !$("this").val() ) { $("this").hide() }
With you can use text() or html()...
Something likevar text = jQuery("div").text();
$(function () {
var $div = $("#div1");
if($.trim($div.html()).length == 0) {
$div.hide();
}
});
$(function(){
if($("#div1").is(":empty"))
$("#div1").css("display","none");
$("#div2").css("display","block");
});
That should be one way how to make it work. For sure you must put in some logic that decides what div will be displayed.