last day (14 days later) » 

4:01 AM
0
Q: AJAX- getting a specific array value in post

DivergentIm making a like system and am encorporating ajax to make it smooth. Everything works okay except it always defaults to the last post in for loop. My thinking is there is no way for the javascript to know which element of id "like" to post to. main.js: $(".like>a").click(function() { $...

 
what is the post in the click handler... you need to share more context to that
 
the variable that im specifiying in the view
 
whether $(".like>a").click(function() { is done in a loop?
 
Im not too sure
 
where is the .like > a element gets created.... the problem is you are creating a global variable post in a loop.. so its value is getting overriden every time.. thus it will have only the last value
 
4:01 AM
Ive came to that conclusion, I just dont know how to fix it
 
show the code where you are creating the .like a elements... the fix has to start from there
there again you have a for loop which iterates over the posts isn't it
there we can use an data-* attribute to pass the id
then use the id from the data-* in the click handler
 
jQuery(function($){

$(".like>a").click(function() {

$.post(base_url + "index.php/userprofile/like_post/", { post : post }, function(data) {

alert('liked');

}, "json");

return false;

});

});
 
not the click handler
where you create the anchor element
that code
 
<?php foreach ($posts as $post)
{ ?>
<?php $postID = $this->model_posts->getPostData('id', $post->post); ?>
<script type="text/javascript">
var post = "<?php echo $postID; ?>";
var base_url = "<?php echo base_url(); ?>";
</script>

<div class='posts'>

<div class='posts_img'>
<img src="<?php echo base_url() . 'img/profilepictures/thumbs/' . $profilepicture?>">
</div>

<div class='posts_user'>
<strong><?php echo $prefname; ?></strong>
</div>

<div class='posts_date'>
<?php echo $this->model_posts->getPostTime($post->post); ?>
div class like is the specific one
 
so
<script type="text/javascript">
var base_url = "<?php echo base_url(); ?>";
</script>

<?php foreach ($posts as $post)
{ ?>
<?php $postID = $this->model_posts->getPostData('id', $post->post); ?>

<div class='posts'>

<div class='posts_img'>
<img src="<?php echo base_url() . 'img/profilepictures/thumbs/' . $profilepicture?>">
</div>

<div class='posts_user'>
<strong><?php echo $prefname; ?></strong>
</div>

<div class='posts_date'>
<?php echo $this->model_posts->getPostTime($post->post); ?>
</div>
 
4:08 AM
here we are using a data-* attribute to store the post id instead of using a global variable
then
$(".like>a").click(function () {

var post = $(this).closest('.like').data('post')
$.post(base_url + "index.php/userprofile/like_post/", {
post: post
}, function (data) {

alert('liked');

}, "json");

return false;

});
 
Not a PHP guy so not sure abt the php syntax....
 
Hmm
Doesnt seem to be working
 
any error?
 
No it just takes me to the link
 
can you inspect the html to see whether the data-post attribute value is set
 
4:21 AM
Not getting to the post function
 
inspect the like button using browser developer tools
 
data-post is set
 
what is the value assigned to it... can you share a sample html of the like element
 
<div class="like" data-post="6">
<a href="http://localhost/musiclear/index.php/#" id="like">like</a>
</div>
 
ok.. that looks good
$(".like>a").click(function () {
var post = $(this).closest('.like').data('post');
alert(post)

$.post(base_url + "index.php/userprofile/like_post/", {
post: post
}, function (data) {

alert('liked');

}, "json");

return false;
});
 
4:29 AM
null
 
instead of $(this).closest('.like').data('post'); try $(this).parent().data('post');
 
hmm still returning null
 
can you add
console.log(this);
console.log($(this).parent().get(0))
and see what is getting lagged in the browser console
add it before the alert statement
also see whether there are any error in your console
 
I didnt see anything in the console
 
is the alert coming
it should be like
$(".like>a").click(function () {
var post = $(this).closest('.like').data('post');
console.log(this);
console.log($(this).parent().get(0))
alert(post)

$.post(base_url + "index.php/userprofile/like_post/", {
post: post
}, function (data) {
alert('liked');
}, "json");
return false;
});
 
4:40 AM
Thats what I have
 
whether the alert is working?
 
Yup, the alert returns null
 
then change the alert to alert(this.tagName + ':' + this.parentNode.tagName + ':' + this.parentNode.dataset)
 
A:DIV: [object DOM stringMap]
 
try alert(this.tagName + ':' + this.parentNode.tagName + ':' + this.parentNode.dataset.post)
 
4:48 AM
A:DIV:1
 
alert(this.tagName + ':' + this.parentNode.tagName + ':' + this.parentNode.dataset.post, $(this.parentNode).attr('data-post'))
also
alert(this.tagName + ':' + this.parentNode.tagName + ':' + this.parentNode.dataset.post, $(this).parent().attr('data-post'))
if they are giving the post value at the end of the alert
var base_url = '';
$(".like>a").click(function () {
var post = $(this).parent().attr('data-post');

$.post(base_url + "index.php/userprofile/like_post/", {
post: post
}, function (data) {
alert('liked');
}, "json");
return false;
});
 
A:DIV:1
 
second one?
don't copy var base_url = '';
 
Thanks that worked!
Post an answer and il vote it up
 
done
 

last day (14 days later) »