Question posted in
You can find the official documentation here.

Jquery ajax – Trying to get value of <button> which is generated by php script called by ajax

I am trying to made a tool for evidence of testcases and now I don’t know, how to resolve one problem.

In my testcase overview page is 3 column layout. In left column is "tree nav" when you click on lowest category, then in the middle column are shown testcases from DB for that specific category. This is getting by ajax. Script which getting these data also generate a <tr><th> and <td> tags into table, which is empty on site.

Script also generates button with detail inside the table, which should be "detail" button. If I click it, i want to detail of testcase to be shown in the last right column. But I am failing on getting value of this button, which is dynamic and every button has got different value based on keywords for testcase.
It seems like the script cannot find that button. I tried to find it by id, by name etc. But testing alert never works and console is clear.

This is html table in the middle of screen.

<div class="column_testcase_overview center_testcase_overview">
    <table id="scenare"></table>
</div>

This is ajax calling script which will fill the table:

<script type="text/javascript">
    $(document).ready(function () {

    $("#get_id ul li").click(function () {
        var id = $(this).text();
        var parent_id = $(this).parent().attr("id");
        //alert(id + " " + parent_id);
        $.ajax({
            url: "/service/table_testcase.php",
            type: "POST",
            data: {
                "treasure map": 1,
                "low": id,
                "sub": parent_id
            },
            success : function(data)
            {
                $("#scenare").html(data);
            }

        });
    });

    });
</script>

This is script which filling the table and also generates that buttons.

<?php
include ('db.php');
if(isset($_POST["treasure_map"])){
    try{
        $low = $_POST["low"];
        $sub = $_POST["sub"];
        $low_id = $pdo->prepare("SELECT `low_kategory_id` FROM low_kategory WHERE `low_kategory_name` = :low");
        $low_id->bindValue(':low', $low);
        $low_id->execute();
        $data = $pdo->prepare("SELECT `key_words`,`name`,`description`, `type_id` FROM scenar WHERE `low_kategory_id` = :low_kategory_id AND 
                                `sub_kategory_id` = :sub_kategory_id");
        $lowkat_id = $low_id->fetch(PDO::FETCH_ASSOC);
        $lowkat = $lowkat_id['low_kategory_id'];

        $data->bindValue(':low_kategory_id', $lowkat);
        $data->bindValue(':sub_kategory_id', $sub);
        $data->execute();
        echo '<tr class="popisek_middle">' . '<th>Name of testcase</th>' . '<th>Description</th>' . '<th>type_id</th>' . '<th></th>' . '</tr>';
        while ($row = $data->fetch(PDO::FETCH_BOTH)){
            echo '<tr>' .  '<td>' . $row['name'] . '</td>' . '<td>' . $row['description'] . '</td>' .
                '<td>' . $row['type_id'] . '</td>' . '<td class="detailbtn" id="sloupec_buttons">' . '<button type="button" class="detail" name="scenare-detail" 
                value="' . $row['key_words'] . '">Detail</button>' . '</td>' . '</tr>';
        }
     //   echo $lowkat . " " . $sub;
    }
    catch (PDOException $e){
        echo "Error: " . $e->getMessage();
    }
}

$pdo = null;

and these are scripts which I am trying for getting the value of button.

$("button[name='scenare-detail']").on('click',function (event) {
   alert($(this).attr('value'))
  })
    
$("#sloupec_buttons button").click(function () {
   var value = $(this).val();
}

and more others :/
Tags:

3

Answers


  1. 0

    Dynamic loaded content will applicable to use script code and other methods which already declared previously. So, if we wish to execute for global functioning code for both (static & dynamic), following code will be used:

    $(document).on("click",".detail",function (event) {
    alert($(this).val());
});
    Login or Signup to reply.
  2. 0

    Try this. Create the listener on the container element then use your targeted id or tag to perform the event action.

    $('#scenare').on('click', "button[name='scenare-detail']", function(){
    alert($(this).attr('value'));
});

$('#scenare').on('click', "#sloupec_buttons button", function(){
    alert($(this).attr('value'));
});
    Login or Signup to reply.
  3. 0

    Change your script to this. Use document if you are having a dynamic content like what you have now.

    $(document).on('click','button[name='scenare-detail']', function (event) {
   alert($(this).attr('value'))
  })

$(document).on('click', '#sloupec_buttons button', function () {
   var value = $(this).val();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search