Dynamic Background images advice - php

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?