Как заставить скрипт скрипт работать внутри div?

Question

Я создаю функцию редактирования поста на веб-сайте, поэтому я использую jquery ajax и php в качестве файла сценария, который выполняет редактирование внутри базы данных.Проблема в возвращаемом скрипте, у меня есть тег script, который содержит некоторый jquery, а затем я помещаю возвращенные данные в div, но тег script печатается так, как если бы это был текст.Может кто-нибудь помочь мне, пожалуйста, чтобы тег сценария действовал как реальный сценарий, а не печатался как текст?

вот мой html div:

<div class="board_post_span" id="<?php echo $board_id."-".$board_user_id;?>-spanBoardEdit"><?php echo $board_post;?></div>

, а вот мой php-скрипт:

<?php 
require_once '../includes/session.php';
require_once '../includes/functions.php';
require_once '../includes/validation_functions.php';
require_once '../includes/create_thumbnail.php';

// this to prevent from accessing this file by pasting a link to it
if(!is_ajax_request()) {
    exit;
}

if(isset($_POST['board_id'], $_POST['board_textarea'])) {
    $board_id = (int)$_POST['board_id'];
    $board_textarea = mysql_prep($_POST['board_textarea']);

    // UPDATE table
    $query  = "UPDATE board_table ";
    $query .= "SET board_post = '$board_textarea' ";
    $query .= "WHERE board_id = $board_id";
    $result = mysqli_query($connection, $query);

    // now we select the updated board post
    $query2 = "SELECT * FROM board_table ";
    $query2 .= "WHERE board_id = $board_id ";
    $result2 = mysqli_query($connection, $query2);
    confirm_query($result2);
    $result_array = mysqli_fetch_assoc($result2);


}
    ?>

    <?php
        echo $result_array['board_post'];
    ?>


    <script>
        // This takes care of the board Continue Reading feature ---------------------------------------------------------
        $(".board_post_span").each(function(){
            var boardPostText = $(this).text();
            var boardPostLength = boardPostText.length;
            var boardIdAttribute1 = $(this).attr("id");
            var boardIdAttributeArray1 = boardIdAttribute1.split("-");
            var boardPostId = boardIdAttributeArray1[0];
            var boardPostUserId = boardIdAttributeArray1[1];

            if(boardPostLength > 250) {
                var boardPostTextCut = boardPostText.substr(0, 250);
                $(this).text(boardPostTextCut+"...");
                $("#"+boardPostId+"-continueReading").remove();
                $(this).after('<a href="board_comment.php?user_id='+boardPostUserId+'&board_id='+boardPostId+'" class="board_continue_reading" target="_blank" id="'+boardPostId+'-continueReading">Continue Reading</a>');

            } else {
                $(this).text(boardPostText);
            }

        });
    </script>

а вот мой jquery и ajax:

$.ajax({
    url: url_edit_board, 
    method: "POST",
    data: {
        board_id: saveBoardButtonId,
        board_textarea: editBoardTextareaVal
    },
    beforeSend: function() {
        CustomSending("Sending...");
    },
    success: function(data){
        $("#sending_box").fadeOut("Slow");
        $("#dialogoverlay").fadeOut("Slow");

        // this makes the scroll feature comes back
        $("body").css("overflow", "scroll");

        console.log(data);
        $("#"+saveBoardButtonId+"-"+editBoardButtonUserId+"-spanBoardEdit").html(data);
        $("#"+saveBoardButtonId+"-formBoardEdit").hide();
        $("#"+saveBoardButtonId+"-"+editBoardButtonUserId+"-spanBoardEdit").show();
    }
});

Answer 1

Прежде всего, кажется, вам не нужна else part:

 else {
     $(this).text(boardPostText);
 }

Затем, прежде чем что-то делать, убедитесь, что ваши возвращаемые данные из файла PHP, текст не зашифрованкаким-то образом.если < становится <, то текст никогда не будет рассматриваться как код JS.

Вы можете создать тег сценария, затем поместить в него свой сценарий JS как функцию, а затем вызвать его непосредственно после инъекции.

замените ваш скрипт в PHP-файле следующим:

<script>
var scriptText = `function editPost() {
    $(".board_post_span").each(function(){
        var boardPostText = $(this).text();
        var boardPostLength = boardPostText.length;
        var boardIdAttribute1 = $(this).attr("id");
        var boardIdAttributeArray1 = boardIdAttribute1.split("-");
        var boardPostId = boardIdAttributeArray1[0];
        var boardPostUserId = boardIdAttributeArray1[1];

        if (boardPostLength > 250) {
            var boardPostTextCut = boardPostText.substr(0, 250);
            $(this).text(boardPostTextCut+"...");
            $("#"+boardPostId+"-continueReading").remove();
            $(this).after('<a href="board_comment.php? 
 user_id='+boardPostUserId+'&board_id='+boardPostId+'" class="board_continue_reading" target="_blank" id="'+boardPostId+'-continueReading">Continue Reading</a>');
        }
    });
}`
</script>

, затем измените свой js-файл на:

$.ajax({
    // ...
    success: function(data) {
        // ...

        var container = $("#"+saveBoardButtonId+"-"+editBoardButtonUserId+"-spanBoardEdit")
        container.html(data)
        var scriptEl = $('<script></script>').html(scriptText).appendTo(container)

        // now call the editPost function
        editPost()

        $("#"+saveBoardButtonId+"-formBoardEdit").hide();
        container.show();
    }
});

Answer 2

Причина в том, что вы устанавливаете boardPostText для текста всего DIV, который включает тег <script> внутри DIV.Вы должны поместить текст, который вы хотите сократить, в другой промежуток, и обработать только это.

Поэтому измените:

echo $result_array["board_post"];

на:

echo "<span class='board_post_text'>" . $result_array["board_post"] . "</span>";

Затем вJavaScript, который вы возвращаете, вы можете сделать:

    $(".board_post_text").each(function(){
        var boardPostText = $(this).text();
        var boardPostLength = boardPostText.length;
        var boardIdAttribute1 = $(this).attr("id");
        var boardIdAttributeArray1 = boardIdAttribute1.split("-");
        var boardPostId = boardIdAttributeArray1[0];
        var boardPostUserId = boardIdAttributeArray1[1];

        if(boardPostLength > 250) {
            var boardPostTextCut = boardPostText.substr(0, 250);
            $(this).text(boardPostTextCut+"...");
            $("#"+boardPostId+"-continueReading").remove();
            $(this).after('<a href="board_comment.php?user_id='+boardPostUserId+'&board_id='+boardPostId+'" class="board_continue_reading" target="_blank" id="'+boardPostId+'-continueReading">Continue Reading</a>');

        } else {
            $(this).text(boardPostText);
        }

    });