I am using pjax and masonry in my tumblr theme. I just figured out how to get masonry to work after clicking a pjax'd link, but now the problem is that the like button is not working anymore. Here is my code so far:
html:
<article class="entry" id="{PostID}">
</article>
jquery:
$(document).ajaxComplete(function(){
$('#content').imagesLoaded(function(){
$('#content').masonry('reloadItems').masonry();
});
var $newPosts = $(data).find('.entry');
var $newPostIDs = $newPosts.map(function () {
return this.id;
}).get();
Tumblr.LikeButton.get_status_by_post_ids($newPostIDs);
});
I believe you need to use pjax:success. This should give you the data object.
$(document).on('pjax:success', function( event, data, status, xhr, options ) {
$('#content').imagesLoaded(function(){
$('#content').masonry('reloadItems').masonry();
});
var $newPosts = $(data).find('.entry');
var $newPostIDs = $newPosts.map(function () {
return this.id;
}).get();
Tumblr.LikeButton.get_status_by_post_ids($newPostIDs);
});
Source: https://github.com/defunkt/jquery-pjax#events
Related
I am new to html and java script. I try to create a button and get the JSON back from a URL and add the result to a drop down list. After the Nodejs server is up and running, if you enter http://localhost:8080/restapi/test/projects, it will return {example} as the result.
So there are couple questions here:
1) for some reason, the button click is not working inside jquery
2) $.getJSON can only used inside jquery, is there any other way to obtain JSON from a URL respond?
$(document).ready(function () {
$(document).on('click', '#button1', function() {
var selector = document.getElementById('selector');
var api = 'http://localhost:8080/restapi/test/projects';
$.getJSON(api, function (data) {
$.each(data, function (index, d) {
var option = document.createElement('option');
option = d;
selector.add(option);
});
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='first'>
<h1>project options</h1>
<button id='button1'>Get Projects</button>
</div>
<div id='second'>
<h2>all projects</h2>
Projects: <select id='selector'></select>
</div>
Thanks for any tips.
{example} is not valid JSON. Try {"1":"example"}
Also, option = d; will overwrite your option. Try option.value = d;
Here is a cleaned up version for you :
$(document).ready(function () {
$('#button1').click(function() {
var selector = document.getElementById('selector');
var api = 'http://localhost:8080/restapi/test/projects';
$.getJSON(api, {"1":"example","2":"other example"},function (data) {
$.each(data, function (index, d) {
selector.options[selector.options.length] = new Option(d,d);
});
});
});
});
Fiddle: https://jsfiddle.net/trex005/65hc1srh/
Try the following:
$(document).ready(function () {
$('body').on('click', '#button1', function() {//this sintax is used most for dynamically added elements
var selector = $('#selector');
var api = 'http://localhost:8080/restapi/test/projects';
$.getJSON(api, function (data) {
$.each(data, function (index, d) {
var option ='<option>'+d+'</option>';
selector.append(option);
});
})
})
})
the click button is actually working... maybe there's a problem with the response.
you can check the network log by opening the inspector.
to open the inspector on chrome use right click and then 'inspect' or 'inspect element'.
this is what happened when i click the button.
for the second question you can make an AJAX request using the XMLHttpRequest object.
It will not worked because you did not do the exact thing clicked.All you have done is that $(document).click() which don't know what elements or document to click.
You should have used
$('#button1').on('click',function() {
});
for button click which tells that it will response only when the button is clicked.For your better understanding I am giving the code snippet
$(document).ready(function () {
$('#button1').on('click',function() {
var selector = document.getElementById('selector');
var api = 'http://localhost:8080/restapi/test/projects';
$.getJSON(api, function (data) {
$.each(data, function (index, d) {
var option = document.createElement('option');
option = d;
selector.add(option);
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='first'>
<h1>project options</h1>
<button id='button1'>Get Projects</button>
</div>
<div id='second'>
<h2>all projects</h2>
Projects: <select id='selector'></select>
</div>
It will work.If not then please check your api url.
I have div element as
<div class="preview-image hide"><img src="{{STATIC_URL}}ui-anim_basic_16x16.gif"></div>
The hide class belongs to Twitter Bootstrap 2.3.2, the preview-image basically adds some styling to the element and used as handle for JavaScript.
I have jQuery code as below where
$loading.show() and $loading.hide() are not working.
The surprising this is when I run $preview.parent().find('.preview-image').show() from console, its working!!
(function($) {
$(document).ready(function() {
var SET_TIME = 6000;
$('[data-preview]').click(function() {
var $this = $(this);
var $preview = $('#' + $this.data('presponse'));
var $loading = $preview.parent().find('.preview-image');
$loading.show();
$.ajax({
});
$loading.hide();
});
});
})(window.jQuery);
Because $.ajax() is an asynchronous call, the $loading.hide() is being called (as it appears to the user) immediately after the $loading.show(). In order to circumvent this, you should make the $loading.hide() call after your AJAX call is complete. One way to do this is:
var $loading = $preview.parent().find('.preview-image');
$loading.show();
$.ajax({
}).always(function() {
$loading.hide();
});
Is the issue that it's hiding straight away? I think the hide needs to be within a success function of the AJAX call rather than being after it.
Eg.
$.ajax({
success: function() {
$loading.hide();
}
});
function getData(url) {
$.getJSON(url, function(result) {
$('#formNav ul').append('<ul/>')
$.each(result, function() {
var list = $('#formNav li'),
listItem = $('<li/>'),
html = listItem.append($('<h5/>').text(this.name));
$.each(this.items, function() {
listItem.append($('<a />').attr('href', this.id).text(this.name))
});
list.append(html)
});
});
};
$(function(){
var Menu = {
$menu: $('.config-nav #formNav'),
$trades : $(".config-nav select#tradesmanList"),
$skills : $(".config-nav select#jobList"),
init: function(){
var $menu = Menu.$menu;
// Set menu up
$menu.children("li").addClass('closed');
$menu.find(".js-reveal").hide();
Menu.$skills.attr("disabled", "disabled");
Menu.$trades.on("change", function($skills){
Menu.$skills.removeAttr("disabled");
});
// bind to click on the item...
$menu.on("click", "h4", this.toggle);
},
toggle: function() {
// Toggle the hide show of the drill down menu
var $this = $(this),
$category = $this.parent();
console.log($this.parent().index());
var data = getData("test.json");
$category.addClass("loading").toggleClass("open");
$this.next(".reveal").delay(100).toggle(0, function(){
$category.Data;
$category.removeClass("loading");
});
}
};
Menu.init();
});
I have a function that returns json data , i then call this function in the Menu function to display the data however every time i click the button the data just keeps being generated instead i want it to display the data and then once it is clicked again hide the data? if anyone has any advice that would be great.
Thanks.
When ever you call the toggle function You seem to get the data using
var data = getData("test.json"); and then use it to populate the list..
Why don't you move the getData method to outside the toggle function and instead move it to to init function .. Look's like it should be fine then..
I'm searching how to combining galleriffic and lightbox jquery plugin until I found GallerifficPlus (I have downloaded it here).
Is it possible (once deleted the slideshows) to call the lightbox by clicking on the thumbs? I want the lightbox function work after clicking the thumbnail..
Here's the code for the thumbnail part
buildDataFromThumbs: function() {
this.data = [];
var gallery = this;
this.$thumbsContainer.find('li').each(function(i) {
var $a = $(this).find('a');
var $img = $a.find('img:first');
gallery.data.push({slide:$a.attr('href'),thumb:$img.attr('src'),original:$a.attr('original'),title:$a.attr('title'),description:$a.attr('description'),hash:gallery.offset+i});
});
return this;
},
for the original display message
buildImage: function(image) {
if (this.$imageContainer) {
this.$imageContainer.empty();
var gallery = this;
var thisImageIndex = this.currentIndex;
// Setup image
this.$imageContainer
//.append('<span class="image-wrapper"><a class="advance-link" rel="history" href="#'+this.data[this.getNextIndex(this.currentIndex)].hash+'" title="'+image.alt+'"></a></span>')
.append('<span class="image-wrapper"><a class="advance-link" rel="history" title="'+image.alt+'"></a></span>')
.find('a')
.append(image)
//.click(function() { clickHandler(gallery); })
.click(function() { buildLightBox(image,gallery,thisImageIndex); })
.end()
.fadeIn('fast');
if (this.onFadeIn) this.onFadeIn();
}
Also, are there any other jquery plugin you can suggest that has similar function?
not sure if this could help but did you try prettyPhoto plugin. i think it works the way you want.
Goal:
Disable links before ajax:success is received. (then i'll tell my app server thing to enable the links. I'm writing a simple board game, and don't want to be recieving multiple ajax requests before the first one is responded to, because it messes with the game logic.
<script type="text/javascript">
var disableLinks = false;
$("a").click(function(e){
if (disableLinks){
e.preventDefault();
}
});
$("a").ajaxStart(function(){
disableLinks = true;
});
$("a").ajaxStop(function(){
disableLinks = false;
});
</script>
And here are what the links look like:
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true">
<div class="ttt_square">
</div>
</a>
This is because your AJAX start and finish events never fire. Why? Because simply clicking a link isn't an AJAX request, and doesn't trigger the global AJAX events. To use the global AJAX events, you need to use an AJAX function such as .get( ), .load( ), or $.ajax( )
The code below, is mostly yours... I've just added 2 lines (which could even be reduced to 1, but I think it looks better this way)
var disableLinks = true;
$('a').click( function( e )
{
if( disableLinks )
{
e.preventDefault( );
}
var self = $(this);
$.ajax( { "url": self.attr( 'href' ) } );
} );
$('a').ajaxStart( function( )
{
disableLinks = true;
} );
$('a').ajaxStop( function( )
{
disableLinks = false;
} );
You've got a typo. e.prevenDefault(); should be e.preventDefault();
And this should be enough for disabling the default action. So you can rid of your onclick.
$("a").click(function(e){
e.preventDefault();
});
Edit:
Maybe this: jQuery - How can I temporarily disable the onclick event listener after the event has been fired?
or this: jQuery - How can I temporarily disable the onclick event listener after the event has been fired?
should solve your problem (if understand you correctly)
try this:
$('a').click(function(){
if (!this.hasClass('disabled')) {
this.addClass('disabled');
var self = this;
$.ajax({url: this.attr('href'),
complete: function(jqXHR, textStatus)
self.removeClass('disabled');
}
});
}
return false;
});