PHP и jquery, помогите передать переменную PHP в JavaScript

Question

Я пытаюсь разрешить пользователям моего веб-сайта загружать изображения, а затем выбрать одно из них в качестве заднего изображения, загрузка работает нормально, но у меня есть проблема в контроллере или представлении, я думаю, я был бы признателен за этоможет помочь мне,

ПРОСМОТР:

<div id="background-select">
<?php
$count = 0;
    if(isset($special)) {
        foreach ($special as $row) {
            print '<div class="select">';
                print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>";
            print '</div>';

                $background = $row['background_name'];
                echo $background;

        }
    }
    if(isset($generic)) {
        foreach ($generic as $row) {    
            print '<div class="select">';
                print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>";
            print '</div>';
                $background = $row['background_name'];
                echo $background;

            }

        }

    if(isset($user_background)) {
        foreach ($user_background as $row) {
            print '<div class="select">';
                print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>";
            print '</div>';
                $background = $row['background_name'];
                echo $background;
            }

        }
?>
</div>
<script type="text/javascript">
$("a.background_btn").click(function(ev){
ev.preventDefault();
alert("hello");
var url = $(this).attr("href");
alert(url);
$.ajax ({
    url : url, 
    type: "POST",
    success : function (html) {
        alert("<?php echo $background; ?>")
        $('#wrapper').css('background', 'url(/media/uploads/backgrounds/<?php echo $background; ?>)');
    }
})
});
</script>
<div id="wrapper">

КОНТРОЛЛЕР:

public function set_background() {
        $this->load->model('image_model');
        if($query = $this->image_model->get_background_by_id($this->uri->segments[3])) {
            //die(var_dump($query));
            foreach ($query as $row) {
                $data['background'] = $row['background_name'];
            }
        }
        $this->load->view('template/background-select', $data);
    }

Проблема в том, что я могу установить фон только для первого возвращаемого значения, напримересли первый цикл возвращает $ background to = red.png, тогда я не могу получить ничего, кроме red.png для загрузки.

Может кто-нибудь предложить решение?

Answer 1

Вы, кажется, загружаете фон, используя AJAX. Однако вы устанавливаете значение $ background в начальном запросе, и метод 'success' вашего AJAX-вызова никогда не использует возвращенный HTML. Только фон, который был изначально установлен при первой загрузке страницы. Вы должны убедиться, что ваш вызов AJAX возвращает фон, чтобы вы могли использовать это в своем JavaScript. Не пытайтесь установить фон в вашем методе успеха, используя PHP.

Также не уверен насчет этого, но ваш контроллер, похоже, устанавливает одно свойство $ data ['background'], перезаписывая его при каждой итерации foreach вместо создания массива или хэш-карты.

Answer 2

Я думаю, что вы должны держать отдельно PHP и JS. После завершения процесса загрузки вы можете перенаправить (или показать динамически с помощью AJAX) страницу загруженных изображений. После того, как пользователь нажал на загруженное изображение, просто измените атрибут фона, например, так:

<div id="back">
    <img src="foo.jpg" alt="..." />
    <img src="bar.jpg" alt="..." />
    ...
</div>

$(function(){
    $("#back img").bind("click", function(e){
        var src = $(this).attr("src");
        $("#back").css({"background-image": "url(/images/" + src + ")"});
    });
});