I'm using the technique found here: How to load Wordpress Post with Ajax onclick to load Ajax content into my wordpress div on this page: http://dev.riverroadcoffees.com/shop-online/
The code is:
jQuery.noConflict();
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$("a.ajax").click(function(){
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$("#shop").html('<div class="loading"><img src="http://dev.riverroadcoffees.com/blog/wp-content/uploads/2013/12/ajax-loader.gif" /> <span>Loading...</span></div>');
$("#shop").load(post_url);
return false;});
});
CODE IN TEMPLATE:
<article>
<?php the_post_thumbnail('bag', array('class' => 'alignleft')); ?>
<h4><?php the_title(); ?></h4>
<?php the_field('strength'); ?>
</article>
Everything works as expected...but I don't have a way for a user to bookmark a URL or reference a URL for a certain product. I'm hoping it's something simple. But I could be wrong.
Related
How do I get the post id which is passed in permalink. In wordpress, I have seen this:
href="<?php echo get_permalink($post->ID); ?>"
Using JQuery get method I am able to pass href attribute to process in php. The code is:
<script type="text/javascript">
$(document).ready(function(e) {
$('Selector').on('click', function(){
var href = $(this).attr('href');
$.get('url',
{
'post_id' : href
},
function(data){
alert(data);
});
return false;
});
});
</script>
It gives me post permalink as desired, but How do I get $post->ID instead. I have used url_to_postid method after getting the permalink but that's not working, so I want to get $post->ID if that's possible. Thank you for your help
Attach post ID to the link in data attribute:
<a href="<?php echo get_permalink($post->ID); ?>"
data-id="<?php echo htmlspecialchars($post->ID); ?>"
>...</a>
And then retrieve it in jQuery:
var postID = $(this).data('id');
Hi I need to create a simple popup function for wordpress site.
I got loop that is running and showing posts properly. Post when clicked should appear in popup. What I;ve got so far. Apart from adding fancybox to do it's job.
<a class="modalbox" rel="<?php echo $post->ID; ?>" href=" http://localhost/makijaz/?page_id=12">
<article> ...Wordpress post </article>
I got the one beneath from other thread, but it's not working.
$(".modalbox").on("click", function() {
var postId = $(this).prop("rel");
$(this).fancybox();
});
href in is directing to page with template with other loop. Need to Simply gram PostID (it's in rel of an ) and put it into other loop for showing in popup.
<?php
/*
Template Name: Ajax Post Handler
*/
?>
<?php
$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="whatever">
<h2 class="entry-title"><?php the_title() ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
Hopefully, I've made myself clear.
I'm guessing your page template doesn't have a get_header and get_footer so in your example scripts won't load.
<?php
/*
Template Name: Your Temp Name
*/
get_header(); ?>
If you want to pass the post id so $post = get_post($_GET['id']); can fetch it, you could try
jQuery(document).ready(function ($) {
$(".modalbox").on("click", function (e) {
e.preventDefault();
var postId = $(this).prop("rel");
$.fancybox.open({
href: this.href + "&id=" + postId,
type: "ajax"
});
});
});
See JSFIDDLE
I have a function in jquery which displays images on link click and also has to hide the image when the link is clicked again.
This is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.links').click( function(){
var linkclicked = this.id;
var url = $j(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$j('#image-holder'+linkclicked).empty().append(image);
/* The above line shows the image on first click.
Adding slideToggle hides the image again */
};
image.onerror = function () {
$j('#image-holder'+linkclicked).empty()
.html('That image is not available.');
}
$j('#image-holder'+linkclicked).empty().html('Loading...');
return false;
});
});
function loadnow() {
}
</script>
</head>
<body>
<?php $topicid=1; ?>
<a href="myimages/red-brick-wall-texture.jpg" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
<?php $topicid=2; ?>
<br><a href="/myimages/gymicon.JPG" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
</body>
</html>
Please let me know where to write slideToggle as to enable show/hide function properly. There are two links here which show separate images. They are shown when clicked but the problem is to hide them on next click and make them
visible when clicked again and so on.
The way you have your code here is not really quite right for .slideToggle. You should not put the URL for the image in the href attribute of an <a> element because the link will try to go there on click.
The way .slideToggle works is well documented on the docs page. All you have to do is use the HTML <img> tag, which is made to hold images. Then you $().hide(); them when the page loads so they aren't shown. All you have to do them is call the .slideToggle() function on the link click event.
See the working example with some misc pictures in this fiddle: http://jsfiddle.net/8xcZT/5/.
Or here is a working version of your code: http://jsfiddle.net/JMXba/9/. I can see this may be desirable to wait for the click to load the image.
Good Luck!
I am trying to make a div where I include PHP web pages into it, however when I click any link inside the div, it loads in new window.
Does anyone know how to solve this problem?
I also tried using an iframe instead of a div but it caused other problems.
HTML code:
<div id="cover5">
<div id="warning">
<?php include 'SignIn.php'; ?>
<p align="center">
Home
</p>
</div>
</div>
JS code:
function cover5() {
var cover = document.getElementById('cover5');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
You have to make a distinction bitween the client-side and the server-side of a Web application.
<?php include 'SignIn.php'; ?> is a server-side command, because of the <?php ?>, which means that the user will never see that line exactly.
If your SignIn.php file contains for example my link, the user will only get the ouput of that inclusion, i.e.
<div id="warning">
<a href="go-there.php">my link</a
</div>
When the user clicks on the link, his browser will load it as if this <a /> would have been hard written within your HTML code directly, and then open it in a new window.
I don't no how to do it using native JS, but with jQuery, you can try something like this:
$(function() {
$("#warning a").each(function() {
$("#warning").load($(this).attr("href"));
});
});
To render html from a specific link within an element on the page you need to run an ajax GET call, and load the html. Then insert the response in your div.
using jQuery:
$("a").click(function(){ //calls function when anchor is clicked
var link = $(this).prop("src"); //finds the link from the anchor
$.get(link,function(data, status, xhr){ //makes an ajax call to the page
$("#myDiv").html(data); //replaces the html of #myDiv with the returned page
});
});
Hope that helps
HTML CODE :
<div id="cover5">
<div id="links">
<p align="center">
Home
</p>
</div>
<div id="warning">
<?php include 'SignIn.php'; ?>
</div>
</div>
and JS code:
function cover5() {
var cover = document.getElementById('warning');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
Whenever an user click on the link in "links" div it will call JS function "cover5()"
You can use jQuery or ajax to pop-up "warning" div
In your code you added the links to the worning div so as when in second time ti will hide all the links form there.
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here