How to correctly pass the value of a variable to an ajax request?

Question

PHP

Hello! Who is familiar with Ajax, tell me how to correctly pass the value of the variable to the request? You need to pass the path to the image in the request. Who can help. Code below.

<div class="filter-wrapper">
        <form action="" method="GET"
              enctype="multipart/form-data" name="interrior" id="interrior">
            <div class="clearfix"></div>
            <div class="grid js-isotope">
                <div class="grid-sizer"></div>
                <? foreach ($arResult['ITEMS'] as $key => $arItem) : ?>
                    <?
                    $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], $strElementEdit);
                    $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], $strElementDelete, $arElementDeleteParams);
                    $strMainID = $this->GetEditAreaId($arItem['ID']);

                    $image = $arItem['PREVIEW_PICTURE']['SRC'];
                    ?>
                    <div class="grid-item" id="<?= $strMainID; ?>">
                        <div class="item-box">
                            <button value="<?= $image; ?>"
                                    oncl ick="sendGet();" name="data_item" class="btn-selector">
                                <img src="<?= $image; ?>" class="image"/>
                            </button>
                            <p class="text-center">
                                <?= $arItem["NAME"]; ?>
                            </p>
                        </div>
                    </div>
                <? endforeach; ?>
                <?
                $data_item = $_GET["data_item"];
                ?>
            </div>
        </form>
        <div id="popup-box" class="popup-box">
            <div class="image-container">
                <img src="<?= $data_item ?>" class="img-thumbnail"/>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function sendGet() {
            $(".btn-selector").click(function () {
                $.ajax({
                    type: 'get',
                    url: 'ajax.php',
                    data: {
                        'data_item': '<?= $data_item ?>'
                    },
                    response: 'text',
                    success: function (data) {
                        $('#result').html(data);
                    }
                });
            });
        }
    </script>

Where did you do it wrong?

Answer 1

Well, first of all, you don't need to put the $(".btn-selector").click handler in the sendGet function. Choose either one or the other. I would advise you to remove the online sendGet function. And rewrite the script as follows

$(document).ready(function() {

        $(".btn-selector").click(function () {
                var imgsrc = $(this).attr('value');

                $.ajax({
                    type: 'get',
                    url: 'ajax.php',
                    data: {
                        'data_item': imgsrc 
                    },
                    dataType : 'html',
                    success: function (data) {
                        $('#result').html(data);
                    }
                });
            });

});

that is, the image must be selected from the attributes of the button, or from the underlying image. If I understand your condition correctly