CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Suganya Rajasekar
Suganya Rajasekar

Reputation: 684

How to load only a specified div after ajax in codeigniter

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

Upvotes: 1

Views: 569

Answers (2)

David
David

Reputation: 1889

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/

Upvotes: 1

Michiel Pater
Michiel Pater

Reputation: 23043

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

Upvotes: 1

Related Questions