Help ajax method calls same function in controller but needs to load different results in different areas

Question

I am a bit stuck with my website, currently on the new section of my site(among others) the user rolls over a thumbnail and gets the articles abstract displayed below it, and then when they click on said thumbnail the article appears on the left of the page,

The ajax works by pulling the href from the link that surronds the thumbnail image and using that as the url for the method call, the problem is that the click version will also be using the same function call, I cannot work out how to show the different content depening on what even happends, currently I have this as my code,

    <?php
if(isset($content)) {
    foreach($category_name as $k => $v) {
        echo "<h2 class='$v[category_name]'><a href='#'>$v[category_name]</a></h2>";
        echo "<div class='$v[category_name]'>";
    }
    $replace = array(".", "png", "gif", "jpg");
    $count = 0;
    foreach($content as $k=>$v) {
    $count ++;
    $image_name = str_replace($replace, "", $v['image_name']);
    echo "<a class='contentlink' href='index.php/home/get_content_abstract/$v[content_id]'>";
    echo "<img src='/media/uploads/".strtolower($v['category_name'])."/".$image_name."_thumb.png' alt='This is the picture' />";
    echo "</a>";
    }
    echo "</div>";
//die(var_dump($content));
}
?>
<script>
    $("a.contentlink").mouseover(function(){
        var url = $(this).attr("href");
            $.ajax ({
                url: url,
                type: "POST",
                success : function (html) {
                    $('#abstract').html(html);
                }
            });
    });

    $("a.contentlink").click(function(ev) {
        ev.preventDefault();
        $('#main_menu').hide();
        var url = $(this).attr("href");
        $.ajax({
            url:url,
            type: "POST",
            success : function (html) {
            //  alert(html)
                $('#left-content').html(html);
            }
        })
    });

</script>

The method that gets called is,

    public function get_content_abstract() {
    $this->load->model('content_model');
    if($query = $this->content_model->get_content_by_id($this->uri->segment(3))) {
        $data['abstract'] = $query;
    }
    $this->load->view('template/abstract', $data);

}

This is called by the ajax following the link /get_content_abstract/3, where 3 or any other number is the articles ID.

How can I sort so that I can use this function again, but only show that body content of the article instead of the abstract if the link is clicked and mouseovered?

Answer 1

You can pass a call type variable and check for it in your php code. Notice I added data to your ajax calls.

$("a.contentlink").mouseover(function(){
        var url = $(this).attr("href");
            $.ajax ({
                url: url,
                type: "POST",
                data: "calltype=abstract",
                success : function (html) {
                    $('#abstract').html(html);
                }
            });
    });

    $("a.contentlink").click(function(ev) {
        ev.preventDefault();
        $('#main_menu').hide();
        var url = $(this).attr("href");
        $.ajax({
            url:url,
            type: "POST",
            data: "calltype=full",
            success : function (html) {
            //  alert(html)
                $('#left-content').html(html);
            }
        })

Answer 2

pass a GET variable in the url of the ajax call.

Answer 3

You just pass an variable to the handler via GET or POST that tells the handler which content to show. As your AJAX calls are simple, you can simplify the calls and use load(). If you can't use $_GET or $_POST, just append the data in the URL:

$("a.contentlink").mouseover(function() {
    // URL becomes index.php/home/get_content_abstract/3/abstract
    $('#abstract').load($(this).attr("href")+'/abstract');
});

$("a.contentlink").click(function(ev) {
    $('#main_menu').hide();
    // URL becomes index.php/home/get_content_abstract/3/full
    $('#left-content').load($(this).attr("href")+'/full');
    return false;
});

And in PHP, you can use something like this:

public function get_content_abstract() {
    $this->load->model('content_model');

    if($this->uri->segment(4) == 'full') {
        // Load full content
    } else {
        // Load abstract
    }
    $this->load->view('template/abstract', $data);
}