Как правильно кодировать JavaScript в PHP для добавления на страницу? - PullRequest
Новая
       2

Как правильно кодировать JavaScript в PHP для добавления на страницу?

0 голосов
/ 28 января 2019

Я построил немного JavaScript в PHP динамически.Передача обратно через AJAX-вызов и добавление на страницу.Это вызывает ошибку SyntaxError.Однако я пытаюсь найти эту ошибку в своем коде.

В настоящее время я использую функцию обрезки PHP на выходе буфера PHP и использую JSON.parse для анализа ответа.

Этокод, который я должен проанализировать и добавить возвращаемый код JS: 

var managers_adjustment = jQuery.ajax({
    url: window.location.protocol + '//' + window.location.hostname + '/api_url&args[module]=Managers_adjustment&args[id]=' + id,
    xhrFields: {
    withCredentials: true
    },
});
managers_adjustment.done(function(r){
    console.log(r);
    jQuery(local_el).find('.dopbsp-data-body:first').append(JSON.parse(r.data));
});

Это PHP, где я собираю и возвращаю динамический JS: 

ob_start();
global $wpdb;
$current_total = $wpdb->get_results( "SELECT `price_total` FROM `wp_dopbsp_reservations` WHERE `id` = " . $args['id'] );
$current_total = (int)$current_total[0]->price_total;
//$managers_adjustment_reason = get_post_meta($args['id'], 'sww_dopbsp_managers_adjustment_reason');
$managers_adjustment_reason = ( $managers_adjustment_reason ? $managers_adjustment_reason : '' );
?>
<diV id="managers_adjustment_<?php echo $args['id']; ?>">
    <div class="dopbsp-data-field dopbsp-input-wrapper dopbsp-price-total sww" style="display:none;"> 
        <label for="adjusted_total">
            Managers adjusted total
        </label> 
        <div>
            <input 
                name="adjusted_total"
                type="number" 
                step="0.01" 
                value="<?php echo $current_total; ?>"
                v-model="adjusted_total"
                v-on:change="sync"
                style="max-width:75px;"
            >
        </div>
    </div>
    <div class="dopbsp-data-field dopbsp-input-wrapper dopbsp-price-adjustment sww" style="display:none;"> 
        <label for="managers_adjustment_reason">
            Manager's adjustment reason
        </label>
        <div>
            <textarea 
                style="width:126px;"
                name="managers_adjustment_reason"
                value="<?php echo $managers_adjustment_reason; ?>"
                v-model="managers_adjustment_reason"
                v-on:change="sync"
            ></textarea>
            <button style="float:right;" data-reservation-id="<?php echo $args['id']; ?>" v-on:click="submit" class="orange-button">Save</button>
        </div>
    </div>
</diV>
    <script>
        var managers_adjustment_<?php echo $args["id"]; ?> = new Vue({
            el: "#managers_adjustment_<?php echo $args['id']; ?>",
            data: {
                current_id: <?php echo $args["id"]; ?>,
                adjusted_total: <?php echo $current_total ?>,
                managers_adjustment_reason: <?php echo $managers_adjustment_reason; ?>
            },
            methods: {
                //sync: function(){},
                submit: function(){
                    console.log('submit');
                }
            }
        });
    </script>
<?php
$output = ob_get_clean();
$output = json_encode(trim($output));
return $output;

ЕслиЯ изменяю то, что находится внутри тегов, например.console.log ('test');Ошибка исчезает, но я изо всех сил пытаюсь выяснить, связана ли ошибка с синтаксисом внутри этого блока, или я просто неправильно ее анализирую / кодирую.

Я знаю, что возвращается вызов AJAX Manager_adjustment,как я вижу вывод console.log для r.data.Это ответ: 

{"status":"success","data":"\"<diV id=\\\"managers_adjustment_9\\\">\\r\\n\\t\\t\\t<div class=\\\"dopbsp-data-field dopbsp-input-wrapper dopbsp-price-total sww\\\" style=\\\"display:none;\\\"> \\r\\n\\t\\t\\t\\t<label for=\\\"adjusted_total\\\">\\r\\n\\t\\t\\t\\t\\tManagers adjusted total\\r\\n\\t\\t\\t\\t<\\\/label> \\r\\n\\t\\t\\t\\t<div>\\r\\n\\t\\t\\t\\t\\t<input \\r\\n\\t\\t\\t\\t\\t\\tname=\\\"adjusted_total\\\"\\r\\n\\t\\t\\t\\t\\t\\ttype=\\\"number\\\" \\r\\n\\t\\t\\t\\t\\t\\tstep=\\\"0.01\\\" \\r\\n\\t\\t\\t\\t\\t\\tvalue=\\\"105\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-model=\\\"adjusted_total\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-on:change=\\\"sync\\\"\\r\\n\\t\\t\\t\\t\\t\\tstyle=\\\"max-width:75px;\\\"\\r\\n\\t\\t\\t\\t\\t>\\r\\n\\t\\t\\t\\t<\\\/div>\\r\\n\\t\\t\\t<\\\/div>\\r\\n\\t\\t\\t<div class=\\\"dopbsp-data-field dopbsp-input-wrapper dopbsp-price-adjustment sww\\\" style=\\\"display:none;\\\"> \\r\\n\\t\\t\\t\\t<label for=\\\"managers_adjustment_reason\\\">\\r\\n\\t\\t\\t\\t\\tManager's adjustment reason\\r\\n\\t\\t\\t\\t<\\\/label>\\r\\n\\t\\t\\t\\t<div>\\r\\n\\t\\t\\t\\t\\t<textarea \\r\\n\\t\\t\\t\\t\\t\\tstyle=\\\"width:126px;\\\"\\r\\n\\t\\t\\t\\t\\t\\tname=\\\"managers_adjustment_reason\\\"\\r\\n\\t\\t\\t\\t\\t\\tvalue=\\\"\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-model=\\\"managers_adjustment_reason\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-on:change=\\\"sync\\\"\\r\\n\\t\\t\\t\\t\\t><\\\/textarea>\\r\\n\\t\\t\\t\\t\\t<button style=\\\"float:right;\\\" data-reservation-id=\\\"9\\\" v-on:click=\\\"submit\\\" class=\\\"orange-button\\\">Save<\\\/button>\\r\\n\\t\\t\\t\\t<\\\/div>\\r\\n\\t\\t\\t<\\\/div>\\r\\n\\t\\t<\\\/diV>\\r\\n\\t\\t\\t<script>\\r\\n\\t\\t\\t\\tvar managers_adjustment_9 = new Vue({\\r\\n\\t\\t\\t\\t\\tel: \\\"#managers_adjustment_9\\\",\\r\\n\\t\\t\\t\\t\\tdata: {\\r\\n\\t\\t\\t\\t\\t\\tcurrent_id: 9,\\r\\n\\t\\t\\t\\t\\t\\tadjusted_total: 105,\\r\\n\\t\\t\\t\\t\\t\\tmanagers_adjustment_reason: \\t\\t\\t\\t\\t},\\r\\n\\t\\t\\t\\t\\tmethods: {\\r\\n\\t\\t\\t\\t\\t\\t\\\/\\\/sync: function(){},\\r\\n\\t\\t\\t\\t\\t\\tsubmit: function(){\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button = jQuery(\\\"#managers_adjustment_9 button\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button.text(\\\"Saving\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button.addClass(\\\"sending\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button.attr(\\\"disabled\\\", \\\"disabled\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tvar update_total = jQuery.ajax({\\r\\n\\t\\t\\t\\t\\t\\t\\t   url: function() {\\r\\n\\t\\t\\t\\t\\t\\t\\t   \\treturn window.location.protocol + \\\"\\\/\\\/\\\" + window.location.hostname + \\\"\\\/~ten\\\/?sww-api=v1&args[module]=Update_dopbsp_total&args[id]=\\\"+ this.current_id +\\\"&args[new_total]=\\\" + this.adjusted_total; \\r\\n\\t\\t\\t\\t\\t\\t\\t   },\\r\\n\\t\\t\\t\\t\\t\\t\\t   xhrFields: {\\r\\n\\t\\t\\t\\t\\t\\t\\t      withCredentials: true\\r\\n\\t\\t\\t\\t\\t\\t\\t   }\\r\\n\\t\\t\\t\\t\\t\\t\\t});\\r\\n\\t\\t\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t\\t\\tupdate_total.done(function(r){\\r\\n\\t\\t\\t\\t\\t\\t\\t\\ttotal = managers_adjustment_9.adjusted_total;\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tjQuery(\\\"#managers_adjustment_9 input\\\").val(total);\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tvar total_original = jQuery(\\\"#managers_adjustment_9 input\\\").parent().closest(\\\".dopbsp-data-value\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tconsole.log(total_original);\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tjQuery(\\\"#managers_adjustment_9\\\").closest(\\\".dopbsp-data-body\\\").find(\\\".dopbsp-price-total:not(.sww) .dopbsp-data-value\\\").text(\\\"\\u00a3\\\" + total);\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tjQuery(\\\"#managers_adjustment_9.dopbsp-price-total.sww\\\").toggle();\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tsend_button.removeAttr(\\\"disabled\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tsend_button.removeClass(\\\"sending\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tsend_button.text(\\\"Save\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t});\\r\\n\\t\\t\\t\\t\\t\\t}\\r\\n\\t\\t\\t\\t\\t}\\r\\n\\t\\t\\t\\t});\\r\\n\\t\\t\\t<\\\/script>\""}

Я ожидаю, что код будет добавлен после завершения респона AJAX, который прикрепит событие к send_button +, что позволит мне добраться до console.log ('submit');

В настоящее время просто получаю сообщение об ошибке: "SyntaxError: ожидаемое выражение, получено'} '".

1 Ответ

0 голосов
/ 28 января 2019

Код из вашего ответа AJAX является проблемой.Кажется, проблема в этой части вашего скрипта: 

data: {
    current_id: <?php echo $args["id"]; ?>,
    adjusted_total: <?php echo $current_total ?>,
    managers_adjustment_reason: <?php echo $managers_adjustment_reason; ?>
},

В возвращенном json он отображается как 

data: {
    current_id: 9,
    adjusted_total: 105,
    managers_adjustment_reason:
},

Предполагается, что переменная $managers_adjustment_reason пуста и приводит кошибка форматирования.Я бы предложил изменить вывод переменной на что-то вроде 

<?= empty($managers_adjustment_reason) ? 0 : $managers_adjustment_reason; ?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...