Develop Reference

Results in words with space don't show in php gallery

I'm creating a gallery in php, where it has a filter divided into categories. But when a word has a space it doesn't show the associated images.
I'm working on two tables, one that creates the categories and the other that is from the gallery.
This is my code and the sql queries:
Querys:
$sql = "selec categoria AS categoria_formatted from cat_lar";
$galerialar = $connect->query($sql);
$sql = "select foto,categoria_lar from galeria_lar,cat_lar Where categoria_lar=categoria";
$galerialarconde = $connect->query($sql);
Code:
<div class="popular page_section">
<div class="container">
<div class="row">
<div align="center">
<button class="filter-button" data-filter="all">All</button>
<?php mysqli_data_seek($galerialar, 0);
while( $galerialarc = $galerialar -> fetch_assoc()){ ?>
<button class="filter-button" data-filter="<?php echo $galerialarc['categoria_formatted']?>"><?php echo $galerialarc['categoria_formatted']?></button>
<?php } ?>
</div>
<br/>
<?php
while( $galerialarc = $galerialarconde -> fetch_assoc()){ ?>
<div class="gallery_product col-sm-3 col-xs-6 filter <?php echo $galerialarc['categoria_lar']?>">
<a class="fancybox" rel="ligthbox" href="admin/galeria/uploads/<?php echo $galerialarc['foto']?>">
<img class="img-responsive" alt="" src="admin/galeria/uploads/<?php echo $galerialarc['foto']?>" width="150px" />
</a>
</div>
<?php }?>
</div>
</div>
</div>
SCRIPT:
<script>
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$('.filter').show('1000');
}
else
{
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
});
/* end gallery */
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
Can they help me? Because I've already tried to put the words with "_" and replace and it remained the same

As you suggest yourself, the image URLs can't contain whitespaces. If you already tried to replace whitespaces with underscores (_) , remember to upload the image files with that name and replace the foto url in the database with the new images.
If it doesn't work, try to investigate where exactly the problem occurs. Is the queries returning the right results (try to var_dump() the result and see if they are missing. If you think the problem happends in the HTML, try using your "inspect" feature in your browser and see if a source URL is provided for the image element and check if this URL really has an image.

Make Load more Button disappear after fetching all data

My code works fine, it displays more users when the load more button is clicked.
my constraint right now is how to remove the Load more button if there is no more value on the response.
This is how my model looks like
public function getFreeAds($page){
$offset = 10*$page;
$limit = 10;
$this->db->select('*');
$this->db->from('escort');
$this->db->where('status', 'Approved');
$this->db->limit($offset ,$limit);
$this->db->order_by("time_stamp, UPPER(time_stamp)", "DESC");
$query = $this->db->get();
return $query->result();
}
My Controller looks like this
public function getCountry(){
$page = $_GET['page'];
$countries = $this->Home_model->getCountry($page);
foreach($countries as $country){
echo
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.' Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<button type="button" class="btn-info">View More</button>
<button type="button" class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}
Here is my query code that displays the response.
$(document).ready(function(){
getcountry(0);
$("#load_more").click(function(e){
e.preventDefault();
var page = $(this).data('val');
getcountry(page);
});
});
var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
scroll();
});
};
var scroll = function(){
$('html, body').animate({
scrollTop: $('#load_more').offset().top
}, 1000);
};

What you can do is get the next values in the same function and if there are values available you can make an input field(hidden) and then show or hide the button according to its value.
I'm writing a possible solution for your case, comments are mentioned wherever necessary. Remember there are better ways of doing this like using count but this is according to your code. See if it helps you.
Controller
public function getCountry(){
$page = $_GET['page'];
$countries = $this->Home_model->getCountry($page);
$nextValue = $this->Home_model->getCountry($page+1); // get the values for the next page
$showButton = !empty($nextValue) ? 'yes' : 'no'; // show the button if next value exists
foreach($countries as $country){
echo
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.' Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<input type="hidden" class="showButton" value="'.$showButton.'" />
<!-- make a hidden input field and assign a value (yes/no) -->
<button type="button" class="btn-info">View More</button>
<button type="button" class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}
View
var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
// check the value of input field
if($('.showButton:last').val() == "no"){
$('#load_more').hide(); // hide the button
}
scroll();
});
};

Add to your response metadata with total pages count. During every request make count query to your DB with same clauses. In your JS code after every request compare current page with total pages from response and hide button if last page reached.

Ajax Tabs for Wordpress that loads and runs different shortcodes when user changes the tab

How does one execute a shortcode, which is placed in a tab, only when the user clicks on the Tab's Title. How do we do this for five tabs? MY objective is to reduce load time of me website. So, only that content which the user wants must load when he clicks on the tab.
I'm fairly certain the best way to do this is by utilizing Wordpress's admin-ajax.php. I've searched a great deal. And I've found most of the code (I think) to create the AJAX tabs. But, when I fire the code it doesn't show up. Rather the HTML shows us, the AJAX doesn't.
$(document).ready(function() {
$('.my_tabs a').click(function(e) {
e.preventDefault();
var tab_id = $('this').attr('id');
$.ajax({
type: "POST",
url: "wp-admin/admin-ajax.php",
dataType: 'html',
data: ({
action: 'my_tab_menu',
id: tab_id
}),
success: function(data) {
$('#my_tab' + tab_id).html(data);
},
error: function(data) {
alert("Error!");
return false;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_tabs">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
</div>
<div class="my_section" id="my_tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my_section" id="my_tab2">
<?php echo do_shortcode ('[shortcode-2]'); ?>
</div>
<div class="my_section" id="my_tab3">
<?php echo do_shortcode ('[shortcode-3]'); ?>
</div>
<div class="my_section" id="my_tab4">
<?php echo do_shortcode ('[shortcode-4]'); ?>
</div>
<div class="my_section" id="my_tab5">
<?php echo do_shortcode ('[shortcode-5]'); ?>
</div>
I add all the code directly into the page using a page-builder. So, I'm not using functions.php to add_action for this particular tab that I'm trying to implement.
I found all the code from a similar post on stackover:
Ajax tabs (wordpress)
They call template_parts into the tabs. Where as I want to execute a shortcode.
I'm what you'd call a coding bimbo. All help shall be much appreciated.
Thank you. And if you've managed to read till here, you deserve to have a pleasant day. :D

Okay, so you can't achieve it the way you have laid your template. As soon as you echo the shortcode and the browser renders the page, the shortcode contents must have printed. You need to create a custom-page-template.php, create a page and on that page you need to send the shortcode handler as soon as you click on the tab through GET or POST method using ajax.
In your Custom Template you receive the [shortcode-1]. An example code would be like you see below:
<?php
/*
Template Name: Shortcode Processor
*/
$current_shortcode = $_POST['shortcode_name'];
?>
<div id="shortcode-contents">
<?php echo do_shortcode($current_shortcode); ?>
</div>
Now you have the response in your Ajax Call. You can now inject the success html inside your desired tab.

Try
<button class="tabs" id="my-tabid1" data-target=".my-section1.box">Tab 1</button>
<button class="tabs" id="my-tabid2" data-target=".my-section2.box">Tab 2</button>
<button class="tabs" id="my-tabid3" data-target=".my-section3.box">Tab 3</button>
<div class="my_section1 box active" id="my-tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section2 box" id="my-tab2">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section3 box" id="my_tab3">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<style>
.box {
display: none;
}
.box.active {
display: block;
}
</style>
<script>
$('.tabs').on('click', function(){
var $target = $($(this).data('target'));
$target.siblings().removeClass('active');
$target.addClass('active');
});
</script>

how to redirect to other page and dynamically load content of corresponding id on click

i'm working on a project and i want to do following: on the home page i have divs which are dynamically loaded from database, now when i click on the div i want it to redirect to new page and then load corresponding content only, from database, just like a blog website, when you click on an article on homepage and it loads an article from database on the new page, i know it must be a simple process but i couldn't find how to write all that code, so can anyone help me with that?
thank you in advance
this is my home page:
<?php
require_once 'core/init.php';
include 'includes/head.php';
include 'includes/nav.php';
include 'includes/section1.php';
$sql = "SELECT * FROM topics WHERE featured = 1";
$featured = $db->query($sql);?>
<section class="s2">
<div class="grid_container">
<?php while($article = mysqli_fetch_assoc($featured)) : ?>
<div class="floating-box" onclick="loadart(<?= $article ['id']; ?>)">
<img src="<?= $article ['image']; ?>" class="img-responsive" alt="<?= $article ['title']; ?>">
<div class="grid_content_wrapper">
<br>
<p><?= $article ['subtitle']; ?></p>
<h3><?= $article ['title']; ?></h3>
<p><?= $article ['description']; ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
</section>
<section class="s3">
<button class="more_posts"><h3>MORE AMAZING THINGS</h3></button>
</section>
<?php
include 'includes/footer.php';?>
now when i click on the div floating box i want it to redirect to this page and load content from database depending on the div i clicked i used this script but it only redirects and loads all content from database but i want it to load based on id of the corresponding div:
function loadart(id) { var data = {"id" : id}; window.location.href = "single.php";}

So let's say you have <div class="clickDiv">www.somedomain.com</div>
You want to set up an event handler that will listen for it, find out what domain is in the div and then redirect the user to that URL.
'$(".clickDiv").mousedown(function(){
var url = $(this).text();
window.location.href = url;
});
So what has happened here is that if all of your divs have the class "ClickDiv", the event listener knows when it's been clicked on and then redirects to the URL in that div.

Bring a WordPress post dynamically

I've been trying to make this feature work for many days now and it's driving me nuts!
I have a single page theme in WP and in one of them there is a div on the left with a list of the posts in the site and on the right, a div that should display the content of the clicked post.
I found this question and followed up the linked tutorial and was partially successful.
I managed to bring the content dinamically, and all I want is being displayed but it seems the order of the tasks are wrong. Heres how it's acting:
I click on the link.
the current content goes away.
the loading span appears correctely.
the SAME content fades in.
after 1 second or so the current content is replaced with the new content and the address bar does not change at all.
Here's the code I have:
atracoes.js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.controle nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href)){
var aCarregar = hash+'.html #atr-conteudo';
$('#atr-conteudo').load(aCarregar)
}
});
$('.controle nav li a').click(function() {
var aCarregar = $(this).attr('href')+' #atr-conteudo';
$('#atr-conteudo').hide('fast',carregarConteudo);
$('#carregando').remove();
$('#atracoes').append('<span id="carregando">Carregando...</span>');
$('#carregando').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando());
}
function esconderCarregando () {
$('#carregando').fadeOut('normal');
}
return false;
});
});
index.php (the dynamic content part)
<div class="main" id="atracoes">
<div class="controle">
<nav>
<?php
$args = array( 'posts_per_page' => 20);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<?php the_title(); ?>
</li>
<?php endforeach;
wp_reset_postdata();?>
</nav>
</div>
<div id="atr-conteudo">
<?php the_post_thumbnail(); ?>
<div id="atr-texto">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
</div>
</div>
single.php (the part I'm plucking with ajax)
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div id="atr-texto">
<!-- post title -->
<h1>
<?php the_title(); ?>
</h1>
<!-- /post title -->
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</article>

You're calling the functions before you pass them to jQuery to execute, instead of allowing jQuery to execute them:
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando);
}
(Notice they no longer have () after the function names)