Dynamic Background images advice

Question

I am creating a site where users can upload there own background images, after upload they see each background they uploaded in a menu represented by a number, clicking on the number will in theory load in the new background, however I have noticed that does this calls in the view again as well (the view is already loaded from another function, is there a ways I can pass the data to the view without loading the view, can I do it with ajax? if so how?

My code currently

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);
    }

My Model:

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.");";?>>

The view gets loaded in originally here

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));
    }

Hope some can help thanks

Answer 1

This may be too much 'out of the box' and not faithful enough to your code to be useful, but here goes:

Given the description of what the code is supposed to do, you could always have your PHP output the list of background images into a JavaScript snippet on the view (To pseudocode very roughly: <script><?php echo phpArrayToJavaScriptArray($images, $varName); ?></script>), then have javascript dynamically create your list of background-changing links client-side and each click just change the background image with JavaScript (<a href="javascript:changeBackgroundImage('url')"> setting document.getElementById('wrapper')'s background image).

No Ajax necessary.

With that concept in mind, the simplest adjustment to your code I can concot in a hurry is this:

Instead of passing the IDs to the view, pass the URLs to the view (you'd have to adjust your querying accordingly, of course), and change:

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

to something like

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

The JavaScript function would be something like this:

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

Mind, the lot of that is still pseudocode, I doubt it'll run out of the box, my JS is very rusty, and this is meant to be an idea-share more than an outright fix. :) But I hope that it'll help you tackle your issue!

Is that kind of approach feasible for you?