JQuery & PHP: How to pass appended button value to jquery? Is it possible?

Question

I am appending items (articles) to a content with some originally existing articles, each article has a button for its deleting, editing, opening. I use jquery & ajax. I want these appended articles' buttons to be able to pass each of their values to jquery click function, as well as produce all the logic there (same way as original articles' buttons do). Is it possible to do something that way?

<!DOCTYPE html>
<html>
<head>
    <title>Infinite Software Blog</title>
    <meta name="viewport" content="width=device-width, scale=1.0">
    <script type="text/javascript" src="/blog/jquery/jquery-3.2.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.del_btn').click(function () {
                var clickBtnValue = $(this).val();
                var ajaxurl = '/blog/helpers/delete_post.php',
                    data = {'action': clickBtnValue};
                $.post(ajaxurl, data, function () {
                    alert("Post was successfully deleted");
                });
            });
            $('.edit_btn').click(function () {
                var clickBtnValue = $(this).val();
                console.log(clickBtnValue);
                var ajaxurl = '/blog/edit_post.php',
                    data = {'action': clickBtnValue};
                $.post(ajaxurl, data, function () {
                    window.location.assign("/blog/helpers/updatePost.php");
                });
            });
            $('.post_content_btn').click(function () {
                var clickBtnValue = $(this).val();
                var ajaxurl = '/blog/view/post.php',
                    data = {'action': clickBtnValue};
                $.post(ajaxurl, data, function () {
                    window.location.assign("/blog/post.php");
                });
            });
            $('.more_posts_btn').click(function () {
                var clickBtnValue = $(this).val();
                var ajaxurl = '/blog/helpers/show_more_posts.php',
                    data = {'action': clickBtnValue};
                $.post(ajaxurl, data, function (output) {
                    $(".content").append(output);
                });
            });
        });
    </script>
    <link rel="stylesheet" href="/blog/styles/style.css" type="text/css"/>
</head>

show_more_post.php
<?php
if (isset($_POST['action'])) {
    include($_SERVER['DOCUMENT_ROOT'] . "/blog/model/classes.php");
    $post = new posts();
    $postsToDisplay = $post->getPostsQty($_POST['action']);
    $newRecordsIndex = $_POST['action'];
    for ($i = 1; $i <= $postsToDisplay; $i++) {
        $record = $post->getPost($newRecordsIndex);
        $newRecordsIndex++;
        $elementToAdd = '<article class="topContent"><header><h2><a href="#" title="' . $record[1] . '">' .
            $record[1] . '</a></h2></header><footer><p class="post-author">Author: ' . $record[2] . '</p>' .
            '</footer><content>' . $record[6] . '</content><footer><p class="post-date">Publish date: ' .
            $record[3] . '</p>' . '<p class="post-time">Publish time: ' . $record[4] . '</p><form><button type="submit" 
            title="Delete post"' . ' value="' . $record[0] . '" class="del_btn">Delete post</button><button type="submit" 
            title="Edit post"' . ' value="' . $record[0] . '" class="edit_btn">Edit post</button><button type="submit" 
            title="Open post in a new tab" value="' . $record[0] . '" class="post_content_btn">Open Post</button>
            </form></footer></article>';
        echo($elementToAdd);
    }
}

Vikash Mishra · Accepted Answer · 2017-03-30 18:31:03Z

I will suggest you to go in a simple way, You can use live table update strategy where you can simply update the data directly from the UI and delete or add as well. Find the below code

    $(document).ready(function(){
    function load(){
    $.ajax({
        url:'db.php',
        method: 'POST',
        success:function(data){
            $("#load").html(data);
        }
    });

    };
    load();
    $(document).on('click', '.bton', function(){
        var name= $(this).data("id");
        if(confirm("Do you want to delete this row"))
        {
            $.ajax({
                url: 'delete.php',
                method: 'POST',
                data:{id:name},
                success: function(data){
                    alert(data);
                    load();
                }
            });
        }
    });

    $(document).on('click','#add', function(){
        var addName= $("#name").text();
        var addComp= $("#company").text();
        $.ajax({
            url:'insert.php',
            method:'POST',
            data: {name:addName, company:addComp},
            success:function(data){
                alert(data);
                load();
            }
        });
    });


    $(document).on('blur','.type', function(){
        var editID=$(this).data('id1');
        var editName= $(this).text();
        alert(editName);    
    })
   });

for reference click here, download file and use to understand better.

zen · Accepted Answer · 2017-05-07 14:51:07Z

0

Use $(document).on('<event>', '<selector>', function() {}); to make available events on dom elements, that creates after script init.

edited May 7, 2017 at 14:51

answered Mar 30, 2017 at 18:30

zen

1,0028 silver badges20 bronze badges

1 Comment

Pavel Vasiluk Over a year ago

This is what I was looking for! Did not get it at first, but change click to on and it worked! Thank you!

Collectives™ on Stack Overflow

JQuery & PHP: How to pass appended button value to jquery? Is it possible?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related