Pass a unique reference of a clicked element via AJAX - php

The title is somewhat confusing, I'm not sure how to word it right as a title.
I'll try to explain better:
I have a forum page, of course as in every other forum elsewhere you can comment on posts. Being able to delete what you wrote is something I should include.
To do this I was planning on setting up a separate page that deletes the comment and using AJAX to do it seamlessly. However, I would need the specific reply ID to delete the one the user is intending to delete.
Below is a link to a picture. The picture demonstrates several comments being posted, obviously they all have separate id's in the database, I'm just not sure how to get the proper one.
So by only a click I need to retrieve the reply ID, any help is appreciated.

you can add data-id="XXX" to element. and access through the class
$('.yourClass').click(function(event) {
var id = $(this).attr('data-id');
console.log(id);
});
Check in your browser console you got the ID

Based on what you just explained, you can attach an attribute to your comment while adding it in the first place like
<div class="single-comment">
<a data-reply-id='23'>Click me, I am a comment!</a>
</div>
This will allow you to reference the data-id using ajax to get back its value and then POST it.
Does that make sense a bit?
I do think Martin Kuchyňár is saying the same.

Related

Refresh div with table dynamically without jQuery or other frameworks

Long story short I am using javascript and php to add / remove questions to a database (think notecards to study with). It all works except I can't get the table on my page to refresh whenever I hit the add question button which uses a XHR to add the data. I can refresh the page manually and see the updated table with my information, but want to use ajax to refresh the table on-screen right after I submit the new question (or delete it) seamlessly. I would rather not have to redraw the entire page, just the table and the info. I understand how to use the XHR and refresh the mysql...but how can I tell the browser to reload a table in a specific div on the page - and only that specific table - with the additional or removed info?
I can NOT use Jquery or other frameworks, just plain old JS, PHP, and html.
I have been searching, and just can't get that "ah-ha" moment yet, can't anybody help me out and push me in the right direction? Generalities, Dom commands to look up or research would be a great help, I don't need character by character coding done by the collective.
thank you, :-)
All you need to do is get it with a method such as document.getElementById or document.querySelector. Then you could change the element however you would need to.
var element = document.querySelector('#elToChange');
element.innerHTML = //something from the server
element.remove(); //for deleting
//If you delete remember to do the following so that you don't have a memory leak.
delete element;
I'd look at innerHTML you can place your table inside a div or whatever, and use innerHTML to regenerate the contents of that div.

<?php bp_activity_id() ?> in buddypress, anyone up to scratch?

I have been trying to sort this problem out for the last few days, here is an overview of my problem relating to
<?php bp_activity_id() ?>
I have 2 comment forms for a gallery plugin in buddy press, the first appears if there are no comments, and it 'creates' a activity it, the 2nd form appears if a comment has ever been made to and has the <?php bp_activity_id() ?> attached it it.
I would like to know how to automatically create a activity item as the first form cannot use features such as favorite or like as there is no id to associate with. I would like the 2nd form to be filled with an id, or in worst case scenario is it possible for some jquery/javascript to automatically add a comment and remove it ONCE (one time only) so that there is an ID? I can find more info if required, any really appreciate any help given!
$newActivity = bp_activity_add($args); // you dont NEED args, but you can pass them.
// $newActivity = the new activity's ID.
Source: http://www.buddydex.info/buddypress/bp-activity/bp_activity_add/

Ajax in ajax-changed DIV content

I'm using form for searching in db. The searching is going as the user is typing and you can see the results in a DIV (Formatted in a table).
The DIV content is changing as the user is typing (I use AJAX to change the content). When the user finds something he likes in the table, he's able to give it a "Thumb up". But, even i have this in my included .js:
$(".PlusAddImgs").click(function(){
alert(' ');
});
And the PlusAddImgs is also class of IMG's, user can click on, it's not working.
I tried to make another image with same class in the DIV, and it work's until i start typing/searching/changing content.
So I thought maybe I need to include needed .js files also in the .php page I'm using to show me the tables, the one, witch ajax is workin with, why searching and geting data from the db.
Tried that, not working..
Can you please help me to ahieve my goal? I just need to use ajax in a changing content DIV
You should use .live handler:
$(".PlusAddImgs").live("click", function(){ alert("Hi!"); });

What technology use to make a webpage to update in real time?

I want to make a webpage where an user can add the title from a book he has read. These changes are reflected in real time on a list that contains all books he has introduced on the database, without the need to press any "reload" button. By example: there is no need to refresh (F5) the page to see the last book added.
I don't know if I can do this in PHP or in any other language, so I would like to know which is the best suited for something like this.
Thank you.
I think you are looking for Ajax. Would be able to asynchronously update the section of the page (the post in this case) without the need for page refresh.
You will want to do this with javascript, using the onchange event, and for a discussion on this you can look at: Call Javascript onchange event by programatically changing textbox value.
Basically, you react to the data being changed, then just send it immediately over using ajax to the server, but, you need to be aware of two things.
First, how will you handle errors, such as there is no book with that title, or the length is too long. I tend to put the error message in or by the place where they had the bad data.
The other is that you need to pass back the id when the data was inserted, so that when they change it again you can just do an update, so you will need to store that. I tend to put the database id I need in the element id, but you can keep it in an array in javascript, since it will maintain state for you.

jquery dynamic pagination for comments

I would like to create a pagination system for comments in my website.So far, I have been able to create pagination using php/mysql and html but the page has to refresh every time we click on the next button(for the next set of comments) or previous or a particular page....
As far as my knowledge of jquery is concerned I am thinking that, when the user clicks on the next button we post data for the page number to comments.php then echo all the comments in comments.php, then the jquery data variable recieves all the data echo'd in the file and appends it to the #comments box...
Is my solution a valid one??? or anyone has a better solution.....thanks
Your question doesn't make much sense and is very jumbled.
You can either load the entire list when the page first loads, and use jquery to paginate it by hiding the extra entries, which will work fine for lists with a few pages worth of content.
The other option is to use AJAX to fetch the next or previous page when the appropriate link is clicked.
There are plenty of pagination add ons for jquery. Maybe check them out.
Don't use a POST request to get the next page as it looks like you might be, unless you are just using the wrong terminology.
Yes, when you click 'next', you send ajax request to comments.php and replace current comments with new ones.
You can do it with a get()/getJSON() call in jQuery.
Something like
$('#next').click(function(){
$.getJSON('url?withnextpage=number',
function(data){
//update variables or the DOM
});
});
Returning it in JSON may be quicker. I hope that helps

Categories