Динамические Фоновые изображения совет

Question

Я создаю сайт, где пользователи могут загружать туда свои собственные фоновые изображения, после загрузки они видят каждый загруженный фон в меню, представленном числом, при нажатии на число теоретически загружается новый фон, однако я заметил это также вызывает вызов в представлении (представление уже загружено из другой функции, есть ли способы передать данные в представление без загрузки представления, могу ли я сделать это с помощью ajax? если да, то как?

Мой код сейчас

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

Моя модель:

public function get_background_by_id($background_id) {
    $this->db->select('background_name');
    $this->db->from('background');
    $this->db->where('background_id', $background_id);

    $query = $this->db->get();
    return $query->result_array();
}

My View

<div id="background-select">


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

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

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

                }
            }
        ?>
    </div>
    <div id="wrapper" style=<?php echo"background:url(/media/uploads/backgrounds/".$background.");";?>>

Вид загружается изначально здесь

public function index() {
    //  $this->output->enable_profiler(TRUE);
        $data = array();
        if($query = $this->category_model->get_all_online()) {
            $data['main_menu'] = $query;
        }
        $this->load->model('image_model');
        /*
        * Sort out the users backgrounds, basically do a check to see if there is a 'special' background
        * if there is not a 'special' background then IF the user is logged in and has a background of there
        * own show that one, if not show a generic one, if they are not logged in show a bang one
        */
        $image = array();
        if ($query = $this->image_model->get_special_backgrounds()) {
            $image['special'] = $query;
        } elseif(!isset($image['special']) && !isset($this->session->userdata['user_id'])) {
            if($query = $this->image_model->get_bang_background()) {
                $image['generic'] = $query;
            }
        } 

        if(isset($this->session->userdata['user_id'])) {
            if($query = $this->image_model->get_user_backgrounds($this->session->userdata['user_id'])) {
                $image['user_background'] = $query;
            }
        }
        $data = array_merge($data, $image);
        $this->load->view('home/main_page.php', array_merge($data, $image));
    }

Надеюсь, что некоторые могут помочь, спасибо

Answer 1

Это может быть слишком много «из коробки» и недостаточно точным для вашего кода, чтобы быть полезным, но здесь идет речь:

Учитывая описание того, что код должен делать, вы всегда можетеваш PHP выведет список фоновых изображений в фрагмент JavaScript на представлении (очень грубо псевдокод: <script><?php echo phpArrayToJavaScriptArray($images, $varName); ?></script>), затем javascript динамически создаст список ссылок для изменения фона на стороне клиента и каждыйщелкните, просто измените фоновое изображение с помощью JavaScript (<a href="javascript:changeBackgroundImage('url')">, установив фоновое изображение document.getElementById('wrapper')).

Нет необходимости в Ajax.

С учетом этой концепции простейшая настройка вашего кодаЯ могу спешить с конкотами:

Вместо того, чтобы передавать идентификаторы в представление, передайте URL-адреса в представление (вам, конечно, придется соответствующим образом настроить запросы) и изменить:

"<a
   class='background_btn'
   href='index.php/home/set_background/" . $row['background_id'] . "'>"
   . $count
. "</a>"

что-то вроде

"<a
   class='background_btn'
   href=\"javascript:changeBackgroundImage('"
   . htmlspecialchars($row['background_url'], ENT_QUOTES, 'utf-8')
   . "')\">"
   . $count
. "</a>"

Функция JavaScript будет выглядеть примерно так:

<script language="javascript">
function changeBackgroundImage(url) {
    var wrapper = document.getElementById('wrapper');
    wrapper.style = "background-image:url(" + url + ")";
}
</script>

Имейте в виду, что все еще псевдокод, ясомневаюсь, что он выйдет из коробки, мой JS очень ржавый, и это должно делиться идеями, а не просто исправлять.:) Но я надеюсь, что это поможет вам решить вашу проблему!

Возможен ли такой подход для вас?