简体   繁体   中英

each time button clicked print string html/python django

I would like to to print a string each time somebody clicks the like button. the string would get a new line each time.

so it would look like tis for example:

like

like

like

like

like

like --> adding one row with the string every time i click the button

It is already possible to like/dislike and the number of each is saved within the post. Here is the views.py

def like_post(request):
    post_id = request.GET.get('post_id')
    post = Post.objects.get(id=post_id)
    new_like = LikePost.objects.create(post_id=post_id)
    new_like.save()
    post.number_of_likes = post.number_of_likes+1
    post.save()
    return redirect('/')


def upload(request):
    if request.method == 'POST':
        image = request.FILES.get('image_upload')
        caption = request.POST['caption']
        num_post = Post.objects.count()+1
        new_post = Post.objects.create(image=image, caption=caption, num_post=num_post)
        new_post.save()
        return redirect('/'), folder_path

    else:
        return redirect('/')

models.py: I would love to put have the line to create the string in here, so that I can just transfer that to the html form, just as i put in all the other values of the post.

class Post(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4)
    num_post = models.IntegerField(default=0)
    image = models.ImageField(upload_to=post_images)
    caption = models.TextField(max_length=300)
    created_at = models.DateTimeField(auto_now_add=True)
    number_of_likes = models.IntegerField(default=0)
    number_of_dislikes = models.IntegerField(default=0)
    interaction_count = models.IntegerField(default=0)

    def __str__(self):
        return self.caption

class LikePost(models.Model):
    post_id = models.CharField(max_length=500)

    def __str__(self):
        return self.post_id

this is the html part of the dislike button sonar(it is the same as like):

<a href="/dislike-post?post_id={{ post.id }}" class="flex items-center space-x-2">
                                        <div class="p-2 rounded-full text-black">

                                            <div class="uk-width-auto"> <button type="submit" class="button soft-warning -ml-2">
                                                dislike </button> </div>
                                            {% if post.number_of_dislikes == 0 %}
                                            <p>no dislikes</p>
                                            {% elif post.number_of_dislikes == 1 %}
                                            <p> {{ post.number_of_dislikes }} user dislikes this</p>
                                            {% else%}
                                            <p> {{ post.number_of_dislikes }} user dislike this</p>
                                            {% endif %}
                                        </div>
                                    </a>

urls.py

urlpatterns = [
    path('', views.index, name='index'),
    path('signup', views.signup, name='signup'),
    path('signupupload', views.signupupload, name='signupupload'),
    path('upload', views.upload, name='upload'),
    path('like-post', views.like_post, name='like-post'),
    path('dislike-post', views.dislike_post, name='dislike-post'),
    path("signup", views.SigninClient.as_view),
]

use JavaScript/jQuery to listen for the click event on the button and use the console.log() function to print the string to the browser's console.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
    <button id="my-button">Click me</button>
        <button id="my-button">Click me</button>
<div id="output"></div>

<script>
    $(document).ready(function(){
        $("#my-button").click(function(){
            $("#output").append(" Like <br>");
        });
    });
</script>
</body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM