如何在Codeigniter中的Ajax之后仅加载指定的div

Question

I'm having a certain categories list according to my click the query has been changed and also I have to change the div according to my click

I tried something it retrieve correct results but instead it display whole page inside the div..

landing Controller :

public function index()
    {   
        .
        .
        .

        if(isset($_POST['cat']))
        {
            $this->load->model('product_model'); 
            $condition=" WHERE p.status='Publish' AND u.group='Seller' AND u.status='Active' AND p.category_id IN (4) OR p.status='Publish' AND p.user_id=0 AND a.pricing IS NOT NULL AND p.category_id IN (4) GROUP BY p.id ORDER BY p.created DESC";
            $products_list_s = $this->product_model->view_product_details($condition);
            #echo "If";print_r($this->data['productDetails']);exit;
        }
        else
        {
            $condition = " WHERE p.status='Publish' AND u.group='Seller' AND u.status='Active' OR p.status='Publish' AND p.user_id=0 AND a.pricing IS NOT NULL GROUP BY p.id ORDER BY p.created DESC";
            $products_list_s = $this->product_model->view_product_details($condition);
        }
        $this->data['productDetails']         = $this->product_model->get_sorted_array($products_list_s,$products_list_u,'created','desc');
        .
        .
        .

        #echo $this->load->view('site/landing/landing',$data, TRUE);
        $this->load->view('site/landing/landing',$this->data);
    }

Jquery

$('.all_category_li a').on('click', function(e) {
    var cat = 'cat';
    $.ajax({
        type:'post',
        url:'<?php echo base_url();?>site/landing',
        data:{cat:cat},
        dataType:'html',
        success:function(data)
        {
            $('.product_listing').html(data);
        }
    });
});

View

<div>
<ul class="product_listing" id="product_listing">
.
.
.
</ul>
</div>

How should I do this..

Can someone help me..

Answer 1

Inside jQuery you could strip down the result to only show the results inside an element. For example:

success:function(data)
{
    // Search Element (replace the element or ID with your element)
    var startPos = data.indexOf("<div id='divId'>");

    // Div element is found?
    if(startPos != -1)
    {
        // Add tag length to position
        startPos += 16;

        // Search Div closing tag starting from start position
        var endPos = data.indexOf("</div>", startPos);

        // Add data inside the Div element to the product listing Div
        $('.product-listing').html(data.substr(startPos, endPos - startPos));
    }
}

Answer 2

maybe you need something like this

$( "#result" ).load( "ajax/test.html #container" );

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

http://api.jquery.com/load/