Undefined Variable when calling method with AJAX

[eluser]sico87[/eluser]
Hello,

I am currently working on a system that allows the user to upload their own background images, they do this by clicking on a textual link and the link calls a method via some jQuery ajax, the method searches the database for the image id that matches the ID that was sent in the URI, and then returns an image name. However when I try and alert the results in the success function of my ajax I can an undefined warning, below is my code

The view:

Code:

<div id="background-select">
    &lt;?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['>$count</a>";
                print '</div>';    
            }
        }
        if(isset($generic)) {
            foreach ($generic as $row) {
                $count ++;    
                print '<div class="select">';
                    print "<a class='background_btn' href='index.php/home/set_background/".$row['>$count</a>";
                print '</div>';

                }
                
            }
        
        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['>$count</a>";
                print '</div>';
                }            
            }
    ?&gt;
    
</div>


<div id="wrapper">

The method that is called is the "set_background", which is this code,

Code:

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

the ajax,

Code:

$("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 ?>)
        }
    })
});

and finally the code the controller calls in the model,

Code:

public function get_background_by_id($background_id) {
        $this->db->select('background_name');
        $this->db->from('background');
        $this->db->where('background_id', $background_id);
        $this->db->limit(1);
        
        $query = $this->db->get();
        return $query->result_array();
    }

Can anyone tell me why the $background variable that is being sent to the view via the $data array is being returned as undefined am I so confused.

Thanks

[eluser]Sbioko[/eluser]
You need to echo your $background var in the view and in JavaScript in your success callback do this:

Code:

alert(html);

[eluser]sico87[/eluser]
Can I not do it in the javascript I was hoping I could do something like this in my success,

Code:

$('#wrapper').css('background', 'url(/media/uploads/backgrounds/<?php echo $background' ?>)');

[eluser]Sbioko[/eluser]
Read docs about jQuery.ajax. There are no direct acess to $(jQuery) in your success callback. So does it work?

[eluser]Dyllon[/eluser]
You're returning a view (HTML) in your set_background method and trying to alert a php variable in your jquery, that's not going to work.

Your method is returning HTML which you'll see if you alert the html

Code:

$("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(html)
        }
    })
});

But that's a really frustrating and inefficient way to debug JS, if you don't already have it get firefox and install the firebug add-on it will make your life alot easier.