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');
Related
controller: Welcome.php
public function tutorial_overview()
{
$link = $_GET['link'];
echo $link;
}
view: index.php
<?php
foreach($heading as $sub)
{
echo "<li>
<a href='javascript:void(0)' class='links' id='".str_replace(" ",'-',$sub)."'>
<i class='fa fa-angle-double-right'></i> ".$sub."
</a>
</li>";
}
?>
<script>
$(document).ready(function(){
$(".links").click(function(){
link = this.id;
history.pushState(null, null, '<?php echo base_url(); ?>'+link);
$.ajax({
type:"GET",
url:"<?php echo base_url(); ?>tutorial_overview/"+link,
success:function(data){
alert(data);
}
});
});
});
</script>
In this code I have create a view file inside it I have define
<a href='javascript:void(0)' class='links' id='".str_replace(" ",'-',$sub)."'>
<i class='fa fa-angle-double-right'></i> ".$sub."
</a>
which is dynamic. Now I want to change the url link as well as change the content that means when I click on link url will change and content will also change without refreshing page. So, How can I do this ?Please help me.
Thank You
I think your jQuery code has the problem -
link = this.id;
Try to apply code below -
$(".links").click(function(){
var link = $(this).attr('id');
var newUrl = '<?php echo base_url(); ?>' + link;
history.pushState({}, null, newUrl);
$.ajax({
type:"GET",
url:"<?php echo base_url(); ?>tutorial_overview/"+link,
data: { link: link },
success:function(data){
alert(data);
}
});
});
What you need to do is - Call ajax, get data and then do other stuff. You may change URL via history pushState when need. Be aware that older browser isn't compatible.
When I click on the post it opens a random post instead of the post I clicked.
The $postid = get_the_ID(); is in the beginning of my code.
Here's the function i use inside the onlick='' that is inside the <a> tag which is around the post image
<script type="text/javascript">
function wholeAd(){
var permalink = '<?php echo get_permalink($postid); ?>';
window.open(permalink, 'newwindow', 'width=900, height=650');
return false;
}
</script>
<div class="ad-box span3">
<a class="ad-image" onclick='wholeAd()'>
For Popup you can use something like this
"<a href='javascript:OpenPopUpPageWithTitle('"+oListItem.get_item('Url').get_url()+"', 'NotificationCallback', "+oListItem.get_item('Width')+", "+oListItem.get_item('Height')+",'" + oListItem.get_item('Title') + "');'> " + oListItem.get_item('Title') + "</a>"
for New Window you can use something like this
<a target='_blank' href='url' style='styles'>Title</a>
Hope this helps, Mark it as answer if it solves your query
Here is the solution:
You don't have to make a function
<a href="<?php the_permalink(); ?>" onclick="window.open(this.href,'newwindow', 'width=900, height=650');return false;">
So, for a post loop, $post->ID is used to get the post id's.
Is there a way to "change" it to a custom "id"?
Here is what I mean by it:
So, I have a page that is passed onto a template via ajax as following:
There is a first php template called "first.php".
In this file, I have a post loop which contains a button:
$id = get_the_ID();
<?php echo '<button type="button" class="rh_show_image" data-post_id="' .$id. '">' ;?>
<?php echo get_post_meta($post->ID, 'rh_image', true); ?>
<?php echo '</button>';?>
This button has data-post_id which contains the post id. When it is clicked, then a second.php is loaded via ajax:
<script>
jQuery(document).ready(function() {
jQuery('.rh_show_image').click(function(e) {
e.preventDefault();
var rh_contact_form_id = jQuery(this).data("post_id");
jQuery.ajax({
type: "GET",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
dataType: 'html',
data: ({ action: 'rh_second_php', rhc_post_id: rh_contact_form_id}),
success: function(data){
jQuery('#rh_iamge_' + rh_contact_form_id).html(data);
},
error: function(data)
{
alert("Error!");
return false;
}
});
});
});
</script>
When the second.php is called, as you can see from the script above, the post_id of the post is saved and parsed onto the template (data: ({ action: 'rh_second_php', rhc_post_id: rh_contact_form_id}),)
Then in the second.php, I have the following:
<!--Show title-->
<?php echo get_the_title($_REQUEST['rhc_post_id']); ?>
<!--Show image-->
<div class="images">
<?php
$I_will_call_you = callme_image();
foreach ($I_will_call_you as $slideshowimage)
{
echo "<img src='{$slideshowimage}' />";
}
?>
</div>
So, essentially, I am using $_REQUEST['rhc_post_id'] instead of $post->ID
Here is the problem
In the image div from the second.php, it does not show any images because it does not recognized the post id from $_REQUEST['rhc_post_id'].
So, is there a way to make it equal between $post->ID and $_REQUEST['rhc_post_id']?
Something like this: $_REQUEST['rhc_post_id'] = $post->ID
Thanks guys!
EDIT: The image div works fine when it is placed with a post loop, instead via ajax. So, the code itself works fine.
Edit 2: Syntax in the second.php is fixed now
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.
Here I have an .ajax function within a PHP function, like this:
function phpFunction($ID) {
print "<script>
$('.uparrow').click(function(){
request = $.ajax({
etc... the rest isn't important.
Anyway, the class .uparrow is an html element that runs this .ajax function when clicked. The other thing you should know is that this function: phpFunction() is called a few times in the document, like this:
phpFunction(1)
phpFunction(2)
phpFunction(3)
However, the problem is that when I load phpFunction(), and I click on the .uparrow element, the .ajax call is made on behalf of each instance of phpFunction() that follows the one whose element I clicked on.
So if I clicked on the .uparrow of phpFunction(1), I would also be virtually clicking on the .uparrows of phpFunction(2) and phpFunction(3). Essentially, I need .uparrow to just be a local class that only applies to the instance of phpFunction() that is currently being called.
The only solution I could think of is to replace .uparrow's class name with something unique to each call of this function. The only difference between each instance of phpFunction() is their input $ID and I was thinking I could redefine .uparrow as:
class = '$ID.uparrow'
or
class = $ID + 'uparrow'
But that doesn't work. So how do I make sure that when I click on .uparrow within phpFunction(1), that the .ajax function only gets called that one time?
This is pretty confusing to explain and probably to understand, so please tell me if there's something that needs elaboration.
Let's say you have a list of elements, and when you click one of them, you want to do an ajax call.
click me
click me
<script>
$(function(){ //on DOM ready
$('.uparrow').on('click', function(){
//do ajax call
$.ajax({
url: 'url here'
type: 'post|get'
data: $(this).attr('data-id'), // you only send the ID of the clicked element
... callbacks, etc
})
});
})
</script>
Now you only have a function that makes an ajax call and takes the parameter to send from the element you clicked.
I hope this is what you wanted to achieve
Try something like this
$('[class="uparrow"]').click( function () {
var request = $.ajax({
// Your ajax call
});
});
this will execute ajax on the clicked element with .uparrow class
HTML
<a class="uparrow" href="#" data-ajax="I'm the first element">Click Me</a>
<a class="uparrow" href="#" data-ajax="I'm the second element">Click Me</a>
<a class="uparrow" href="#" data-ajax="I'm the third element">Click Me</a>
JS:
$('[class="uparrow"]').click(function () {
var currentAjax = $(this).data('ajax')
console.log(currentAjax);
});
And the DEMO
Do not call your php function multiple times. Just one time is sufficient.
Modify the markup of your .uparrow element to include the id like so:
<a class="uparrow" data-id="<?php echo $id; ?>" href="#">TextM/a>
Then re-write your php function like so:
function phpFunction() { /* no need to pass the ID */ ?>
<script>
$(function(){
$(document).on('click', '.uparrow', function(){
$.ajax({
url: 'URL',
type: 'POST'.
data: $(this).attr('data-id')
})
});
})
</script>
<?php } ?>
Call your phpFunction like so:
phpFunction();
UPDATE
<!doctype html>
<html>
<head>
<title>trop</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='css/postStyle.css' />
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,300,200|Homenaje&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Music-Note-icon.png'>
<script src='../jquery.js'></script>
<script type='text/javascript' src='../script.js'></script>
</head>
<body>
<?php
$ids = array(1,2,3); // IDs of the posts you want
$result = mysql_query("SELECT * FROM all_posts WHERE ID IN($ids)");
while ($data = mysql_fetch_array($result)){
?>
<div class='post' style='width:470px'>
<h3><?php echo $data['Title']; ?></h3>
<div class='date'><?php echo $data['DateTime']; ?></div>
<iframe width='470' height='300' src='http://www.youtube.com/embed/WF34N4gJAKE' frameborder='0' allowfullscreen></iframe>
<p><?php echo $data['Body']; ?></p>
<div class='postmeta1'>
<p><a href='<?php echo $data['DownloadLink']; ?>' target='_blank'>DOWNLOAD</a></p>
</div>
<div class='verticalLine' style='height:39px'></div>
<div class='postmeta2'>
<p class='uparrow' data-id="<?php echo $data['id']; ?>">▲</p>
<div class='votes'>3</div>
<p class='downarrow'>▼</p>
</div>
<div class='verticalLine' style='height:39px'></div>
<div class='postmeta3'>
<div class='tags'>
<p><?php echo $data['Tags']; ?></p>
</div>
</div>
</div>
<?php } ?>
<script>
var request;
$('.uparrow').click(function(){
request = $.ajax({
url: 'votesHandler.php',
type: 'post',
data: { add : '1', ID : $(this).attr('data-id') }
});
request.done(function (response, textStatus, jqXHR){
alert('Voted!');
});
request.fail(function (jqXHR, textStatus, errorThrown){
alert(
'Oops, something went wrong'
);
});
request.always(function () {
alert('Done.');
});
});
</script>
</body>
</html>