I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.
Related
I'm trying to get the field data from form textarea so i can store it when a user filling the textarea if he reload page or open an other page in same tab and come back to write data his previous work will be there
My code is
session_start();
$_SESSION['textarea-133'] = $_POST["textarea-133"];
?>
<script>
var a="<php echo $_SESSION['textarea-133']";
document.getElementById("business_a6").value =a ;
</script>
You could use window.sessionStorage to save a variable and check if it's there each time the page is loaded.
window.onload = function(){
var userText = sessionStorage.getItem('the_user_text');
if( userText ){
document.getElementById('the-text-area').innerHTML = userText;
}
};
It's up to you if you want to re-save the variable with each keypress or maybe after a setInterval
document.addEventListener('keypress', (event) => {
var newText = document.getElementById('the-text-area');
sessionStorage.setItem('the_user_text', newText);
});
I'm making a holiday blessing generator for client.
The final output goes to a div with an id="BRHBresults".
From that div I'm making a canvas and converting it to image,
I've managed to make the onclick function to download the image(just to make sure the result was correct), however what I need the onclick to do is,
upload the image to wordpress library and make a new post with this image as post_thumbnail.
I get an error:
"414 (Request-URI Too Large)"
So far I have come up with this:
Link to the page: [http://www.benedict.co.il/%D7%9E%D7%97%D7%95%D7%9C%D7%9C-%D7%91%D7%A8%D7%9B%D7%95%D7%AA/
]
Javascript/JQuery
$(".BRHshareToFB1").click(function(){
html2canvas([document.getElementById('BRHBresults')], {
onrendered: function (canvas) {
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
var alink = data ;
//$('.BRHshareToFB2').attr('href', alink);
//$('.BRHshareToFB2').attr('download', 'filename.jpg');
//dataUrl = canvas.toDataURL("image/png");
alink = data.replace(/^data:image\/(png|jpg);base64,/, "");
$.post("/send.php?data="+alink);
}
});
});
PHP from send.php file
<?php
$dir = getcwd();
$now = date("U");
$imgstring = $_POST['data'];
$imgstring = base64_decode($imgstring);
file_put_contents("$dir/wp-content/uploads/blessing-$now.png", $imgstring);
?>
What am I missing? Please help! :)
This is my code so far, It downloads a small 240px image. Can I get the full sized pic to create a lightbox?
<script>
jQuery(function(){
var apikey = 'xxxxx';
var userid = 'xxxx';
jQuery.getJSON('https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key='+apikey+'&user_id='+userid+'&format=json&jsoncallback=?',
function(data){
jQuery.each(data.photos.photo, function(i,item){
var purl = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
var pid = item.id;
var container = '<img src='+ purl+' />';
console.log(container);
jQuery(container).appendTo('#images');
});
});
});
</script>
Sure thing! You can use the API flickr.photos.getSizes to get a list of all the sizes available. Make one Ajax call to flickr.photos.getSizes, pick the largest one from that list, and then make your Ajax call for its URL (you won't have to stitch the URL together as you do in your original code).
i am using WordPress post to build post.is there any plugin or some function that warn be when i don't select a category for the post.its a headache ever time i post a category i miss some time as there is a lot of post to be made in the category after some time see those post in uncategory its a great headache.
add_theme_support('menus');
**
**> the above code is nothing because stack over flow doesn't allow me to
post my question as it say standard low.**
**
thanks in advance.
hope i could find one suitable answer
hah.. its so funny but you can try as below in your functions.php file
function force_post_categ_init()
{
wp_enqueue_script('jquery');
}
function force_post_categ()
{
echo "<script type='text/javascript'>\n";
echo "
jQuery('#publish').click(function()
{
var cats = jQuery('[id^=\"taxonomy\"]')
.find('.selectit')
.find('input');
category_selected=false;
for (counter=0; counter<cats.length; counter++)
{
if (cats.get(counter).checked==true)
{
category_selected=true;
break;
}
}
if(category_selected==false)
{
alert('You have not selected any category for the post. Please select post category.');
setTimeout(\"jQuery('#ajax-loading').css('visibility', 'hidden');\", 100);
jQuery('[id^=\"taxonomy\"]').find('.tabs-panel').css('background', '#F96');
setTimeout(\"jQuery('#publish').removeClass('button-primary-disabled');\", 100);
return false;
}
});
";
echo "</script>\n";
}
add_action('admin_init', 'force_post_categ_init');
add_action('edit_form_advanced', 'force_post_categ');
NOte:- javascript must be enable to run this
I would suggest using a jQuery object to read the real value of the input since the page can be loaded with a checked value and then an input can be un-checked and saved. This uses the jQuery object .is('checked') method:
function force_post_categ()
{
$custom_js = <<<CUSTOM_JS
<script type='text/javascript'>
jQuery('#publish').click(function()
{
var cats = jQuery('[id^="taxonomy"]').find('.selectit').find('input');
category_selected = false;
$.each(cats, function(key,value){
if ( $(this).is(':checked') == true ) {
category_selected = true;
return false;
}
});
if (category_selected == false)
{
alert('You have not selected any metro or country for the post. Please select a metro.');
setTimeout("jQuery('#ajax-loading').css('visibility', 'hidden');", 100);
jQuery('[id^="taxonomy"]').find('.tabs-panel').css('background', '#F96');
setTimeout("jQuery('#publish').removeClass('button-primary-disabled');", 100);
return false;
}
});
</script>
CUSTOM_JS;
echo $custom_js;
}
I'm trying to add attachments to a custom post type that hasn't editor support (only excerpt).
I've managed to show the Media Manager dialog box, but I can only see the "Insert into post" button (that does nothing anyway) and when uploading images, they don't get attached to the post.
To implement what I did so far, I've added a very simple meta box to the post type:
function add_gallery_post_media_meta_box()
{
add_meta_box(
'gallery_post_media',
'Gallery Media',
'gallery_post_media',
'gallery',
'side',
'high'
);
} // add_file_meta_box
add_action('add_meta_boxes', 'add_gallery_post_media_meta_box');
function gallery_post_media()
{
echo '' . __('Add media') .'';
} // end post_media
function register_admin_scripts() {
wp_enqueue_media();
wp_register_script( 'gallery_post_media_admin_script', get_template_directory_uri() . '/library/cpt/gallery.js' );
wp_enqueue_script( 'gallery_post_media_admin_script' );
} // end register_scripts
add_action( 'admin_enqueue_scripts', 'register_admin_scripts' );
And the script:
jQuery(document).ready(function ($) {
$('#gallery-add-media').click(function (e) {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
var id = button.attr('id').replace('_button', '');
wp.media.editor.send.attachment = function (props, attachment) {
$("#" + id).val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
event.preventDefault();
return false;
});
});
If I would able to find some documentation about wp.media.editor.send.attachment, I'd probably manage to get what I want, but I can't find anything useful.
The only solutions I've found all relies on custom fields, instead I want to simply attach these images to the post, without inserting them in the post content, as I would do with normal posts.
As a side question: is it possible to tell the Media Manager to only accept images?
This is the JavaScript I use for media fields. Once you hit insert you can do whatever you want with the data from the image's selected
jQuery(document).ready(function() {
//uploading files variable
var custom_file_frame;
jQuery(document).on('click', '.meida-manager', function(event) {
event.preventDefault();
$this = jQuery(this);
//If the frame already exists, reopen it
if (typeof(custom_file_frame)!=="undefined") {
custom_file_frame.close();
}
//Create WP media frame.
custom_file_frame = wp.media.frames.customHeader = wp.media({
//Title of media manager frame
title: "Sample title of WP Media Uploader Frame",
library: {
type: 'image'
},
button: {
//Button text
text: "insert text"
},
//Do not allow multiple files, if you want multiple, set true
multiple: false
});
//callback for selected image
custom_file_frame.on('select', function() {
var attachment = custom_file_frame.state().get('selection').first().toJSON();
//do something with attachment variable, for example attachment.filename
//Object:
//attachment.alt - image alt
//attachment.author - author id
//attachment.caption
//attachment.dateFormatted - date of image uploaded
//attachment.description
//attachment.editLink - edit link of media
//attachment.filename
//attachment.height
//attachment.icon - don't know WTF?))
//attachment.id - id of attachment
//attachment.link - public link of attachment, for example ""http://site.com/?attachment_id=115""
//attachment.menuOrder
//attachment.mime - mime type, for example image/jpeg"
//attachment.name - name of attachment file, for example "my-image"
//attachment.status - usual is "inherit"
//attachment.subtype - "jpeg" if is "jpg"
//attachment.title
//attachment.type - "image"
//attachment.uploadedTo
//attachment.url - http url of image, for example "http://site.com/wp-content/uploads/2012/12/my-image.jpg"
//attachment.width
$this.val(attachment.url);
$this.siblings('img').attr('src',attachment.url);
});
//Open modal
custom_file_frame.open();
});
});