PHP and jquery, help passing PHP variable to javascript

Question

Hello, I am trying to allow the users of my website, to upload images and then select one to be a back image, the uploading works fine, but I have a problem in my controller or view I think, i would appreciate it some could help me out,

VIEW:

<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">

CONTROLLER:

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

The problem is that I can only set the background to the first returned value for example if the first loop return $background to = red.png then I cannot get anything but red.png to load in.

Can any one suggest a solution?

Answer 1

You appear to load a background using AJAX. However, you set the value of $background in the initial request, and the 'success' method of your AJAX call never uses the returned HTML. Only the background that was originally set when the page was first loaded. You should make sure your AJAX call returns the background, so you can use that in your javascript. Don't try to set the background in your 'success' method using PHP.

Also, not sure about this though, but your controller seems to set a single property $data['background'], overwriting it every iteration of the foreach instead of creating an array or hashmap.

Answer 2

I think you should keep separate PHP and JS. After completed upload process you can redirect (or show dynamically by using AJAX) uploaded images page. After user clicked an uploaded image just change background attribute maybe like this:

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