Как передать множество параметров через Ajax

Question

Не смог побороть, обращаюсь к сообществу. Есть шаблон в который вставляю необходимые параметры через str_replace()

$output = "<div class='row'><KEYONE></div>"; //шаблон
$one_key = '<div class="card text-bg-secondary" style="width: 10rem;margin: 10px;padding: 0">'
  .'<div class="card-header form_radio_btn" style="padding: 0;height: 40px;display: block"><span class="form_radio_btn" title="<KEYTITLE>" style="">'
  .'<input id="radio-<KEYNUM>" type="radio" name="radio" value="<HEXKEY>"><label for="radio-<KEYNUM>"><KEY></label></span></div>'
  .'<div class="card-body" style="display: table-row;margin: 0;padding: 0">'
  .'<div id="key-<KEYNUM>" style="width: 90px;height: 50px;float:left;text-align: center;margin: 2px 0 0 0;color: #cbcbcb"><i class="fa fa-key fa-3x"></i></div>'
  .'<button id="btnGroupVerticalDrop-<KEYNUM>" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" style="float: right"></button>'
  .'<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop-<KEYNUM>" >'
  .'<li><a class="dropdown-item ajax-inc" data-global=\'{"ajroute":"task_info_key","key":"<KEYNUM>"}\'  href="#" >Информация по ключу</a></li>'
  .'<li><a class="dropdown-item ajax-inc" href="#">Сброс ключа</a></li>'
  .'</ul></div></div>';
$one_key = str_replace("<KEY>","123456",$one_key);
$one_key = str_replace("<KEYNUM>","123456",$one_key);
$one_key = str_replace("<HEXKEY>","abcdef",$one_key);
$output = str_replace("<KEYONE>",$one_key,$output);
echo $output;

Все срабатывает корректно, меню разворачивается. Мне нужно через Ajax обновить список ключей, для этого этот блок "размножается" отображая отдельный элементs по кол-ву ключей. Не могу через Ajax "протолкнуть" сложную конструкцию data-global (если ее удалить то все ОК). Акцентирую внимание - через замену этот блок отображается. Пробовал кавычки менять, экранировать - не помогает.

Ошибка- Uncaught SyntaxError: missing ) after argument list Сам Ajax:

"$('#keylist').html('<div class=\"card text-bg-secondary\" style=\"width: 10rem;margin: 10px;padding: 0\"><div class=\"card-header form_radio_btn\" style=\"padding: 0;height: 40px;display: block\"><span class=\"form_radio_btn\" title=\"версия микропрограммы: 16778249\" style=\"\"><input id=\"radio-1065509103\" type=\"radio\" name=\"radio\" value=\"3f8260ef\"><label for=\"radio-1065509103\"><b>3f8260ef</b></label></span></div><div class=\"card-body\" style=\"display: table-row;margin: 0;padding: 0\"><div id=\"key-1065509103\" style=\"width: 90px;height: 50px;float:left;text-align: center;margin: 2px 0 0 0;color: #cbcbcb\"><i class=\"fa fa-key fa-3x\"></i></div><button id=\"btnGroupVerticalDrop-1065509103\" type=\"button\" class=\"btn dropdown-toggle\" data-bs-toggle=\"dropdown\" style=\"float: right\"></button><ul class=\"dropdown-menu\" aria-labelledby=\"btnGroupVerticalDrop-1065509103\" ><li><a class=\"dropdown-item ajax-inc\" data-global='{\"ajroute\":\"task_info_key\",\"key\":\"1065509103\"}'  href=\"#\" >Информация по ключу</a></li><li><a class=\"dropdown-item ajax-inc\" href=\"#\">Сброс ключа</a></li></ul></div></div><div class=\"card text-bg-secondary\" style=\"width: 10rem;margin: 10px;padding: 0\"><div class=\"card-header form_radio_btn\" style=\"padding: 0;height: 40px;display: block\"><span class=\"form_radio_btn\" title=\"версия микропрограммы: 16778245\" style=\"\"><input id=\"radio-1065510441\" type=\"radio\" name=\"radio\" value=\"3f826629\"><label for=\"radio-1065510441\"><b>3f826629</b></label></span></div><div class=\"card-body\" style=\"display: table-row;margin: 0;padding: 0\"><div id=\"key-1065510441\" style=\"width: 90px;height: 50px;float:left;text-align: center;margin: 2px 0 0 0;color: #cbcbcb\"><i class=\"fa fa-key fa-3x\"></i></div><button id=\"btnGroupVerticalDrop-1065510441\" type=\"button\" class=\"btn dropdown-toggle\" data-bs-toggle=\"dropdown\" style=\"float: right\"></button><ul class=\"dropdown-menu\" aria-labelledby=\"btnGroupVerticalDrop-1065510441\" ><li><a class=\"dropdown-item ajax-inc\" data-global='{\"ajroute\":\"task_info_key\",\"key\":\"1065510441\"}'  href=\"#\" >Информация по ключу</a></li><li><a class=\"dropdown-item ajax-inc\" href=\"#\">Сброс ключа</a></li></ul></div></div>')"

Answer 1

У вас в Javascript строка с HTML-кодом обернута в одинарные кавычки и при этом атрибут data-global тоже использует одинарные кавычки, которые не экранированы, поэтому они ломают Javascript-код. Чтобы было проще предлагаю использовать буфферизацию в PHP, например так:

<?php

...

ob_start();
?>
<script>
$('#keylist').html('<div class="card text-bg-secondary" style="width: 10rem;margin: 10px;padding: 0">\
    <div class="card-header form_radio_btn" style="padding: 0;height: 40px;display: block">\
        <span class="form_radio_btn" title="версия микропрограммы: 16778249" style="">\
            <input id="radio-1065509103" type="radio" name="radio" value="3f8260ef">\
            <label for="radio-1065509103"><b>3f8260ef</b></label>\
        </span>\
    </div>\
    <div class="card-body" style="display: table-row;margin: 0;padding: 0">\
        <div id="key-1065509103" style="width: 90px;height: 50px;float:left;text-align: center;margin: 2px 0 0 0;color: #cbcbcb">\
            <i class="fa fa-key fa-3x"></i>\
        </div>\
        <button id="btnGroupVerticalDrop-1065509103" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" style="float: right"></button>\
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop-1065509103" >\
            <li><a class="dropdown-item ajax-inc" data-global=\'{"ajroute":"task_info_key","key":"1065509103"}\' href="#" >Информация по ключу</a></li>\
            <li><a class="dropdown-item ajax-inc" href="#">Сброс ключа</a></li>\
        </ul>\
    </div>\
</div>\
<div class="card text-bg-secondary" style="width: 10rem;margin: 10px;padding: 0">\
<div class="card-header form_radio_btn" style="padding: 0;height: 40px;display: block">\
    <span class="form_radio_btn" title="версия микропрограммы: 16778245" style="">\
        <input id="radio-1065510441" type="radio" name="radio" value="3f826629">\
        <label for="radio-1065510441"><b>3f826629</b></label>\
    </span>\
</div>\
<div class="card-body" style="display: table-row;margin: 0;padding: 0">\
    <div id="key-1065510441" style="width: 90px;height: 50px;float:left;text-align: center;margin: 2px 0 0 0;color: #cbcbcb">\
        <i class="fa fa-key fa-3x"></i>\
    </div>\
    <button id="btnGroupVerticalDrop-1065510441" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" style="float: right"></button>\
    <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop-1065510441" >\
        <li><a class="dropdown-item ajax-inc" data-global=\'{"ajroute":"task_info_key","key":"1065510441"}\'  href="#" >Информация по ключу</a></li>\
        <li><a class="dropdown-item ajax-inc" href="#">Сброс ключа</a></li>\
    </ul>\
</div>');
</script>
<?php

$strHtml = ob_get_clean();

Так будет проще отлаживать и сразу увидите, где ошибка.

БЛОГ НА HUSL

Как передать множество параметров через Ajax

Ответы (1 шт):