sending data through submit using colorbox ajax

Question

HTML

<div class="cus_input">
    <form id="category_form" method="GET" action="<?php echo base_url(); ?>welcome/find/" >
        <input type="text" id="category_input" name="q" placeholder=" Find Category"/>
        <a type="submit" class="ajax cboxElement" id="category_submit" src="<?php echo base_url() ?>img/board/icons/add.jpg" value="" />
    </form>
</div>

Controller

    function find()
{
        $this->pageload_model->load_page();
        $getquery = $this->input->get("q");
        $data['find'] = $this->find_model->get_find_view($getquery);
        $page['content'] = $this->load->view("template/findtemplate.php", $data);
        echo json_encode($page);
}

This controller correctly generates my desired results when you manually go to the URI. It was slightly modified in the attempt to use jquery ui dialog. However, i'd much rather use colorbox or fancybox at this point.

find model:

    public function get_find_view($q)
    {
        if (!$q) {
        $html = "Search disrupted: <a href='". base_url()."'>Go back to main page </a>";
        return $html;
        } else {
        $accountdata['found'] = $this->find_model->get_found_view($q);
        $accountdata['create_category'] = $this->find_model->get_create_category_view($q);
        return $this->load->view('find/find_view', $accountdata , TRUE);
        }
    }

the colobox ajax JS should be: $('ajax').colorbox()

I have the ajax class in 2 areas...a straight up link, which works with no problems, and the above mentioned submit button. What I am looking to do is send the input value to the find() controller, load the page, and open it via the colorbox window. I eventually would add a change to pushstate, so that the new URL / page can be crawled and shared.

I am having no luck. Thanks for the help! Will add any code you might need.

Answer 1

I haven't used colorbox before so I'm not 100% on this. I think what you need to do is serialize the data from your form and handle the ajax request yourself. So something like this:

HTML:

<div class="cus_input">
    <form id="category_form" method="GET" action="<?php echo base_url(); ?>welcome/find/" onsubmit="return category_form_submit();" >
    <input type="text" id="category_input" name="q" placeholder=" Find Category"/>
    <a type="submit" id="category_submit" src="<?php echo base_url() ?>img/board/icons/add.jpg" value=""/>
    </form>
</div>

JQUERY:

function category_form_submit() {  
    $.get('/welcome/find?' + $('#category_form').serialize(), function(response){
        $.fn.colorbox({html:response});
        //here is where you could put your pushstate code
    });
    return false;
}