使用 colorbox ajax 通过提交发送数据答案

【问题标题】：sending data through submit using colorbox ajax使用 colorbox ajax 通过提交发送数据
【发布时间】：2013-01-14 15:50:41
【问题描述】：

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>

控制器

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

当您手动转到 URI 时，此控制器会正确生成我想要的结果。在尝试使用 jquery ui 对话框时稍作修改。但是，此时我更愿意使用 colorbox 或 fancybox。

查找型号：

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

colobox ajax JS 应该是：$('ajax').colorbox()

我有 2 个区域的 ajax 类...一个直接的链接，没有问题，还有上面提到的提交按钮。我要做的是将输入值发送到 find() 控制器，加载页面，然后通过颜色框窗口打开它。我最终会对 pushstate 进行更改，以便可以抓取和共享新的 URL/页面。

我运气不好。谢谢您的帮助！将添加您可能需要的任何代码。

【问题讨论】：

你能不能 var_dump($_GET);在您的查找控制器中？它有什么价值吗？需要明确的是：原始表单是在标准页面还是颜色框中打开？
原始表格在我的主页上。作为参考，www.usatoday.com/news 正在做我想做的事。我的查找控制器正在获取 GET。如果我去 www.mypage.com/welcome/find/?q=hello 值被正确读取。
这是一个利用 pushstate 和 ajax 加载的好网站：html5.gingerhost.com

标签： php jquery ajax codeigniter colorbox

【解决方案1】：

我以前没有使用过彩盒，所以我不是 100% 的。我认为您需要做的是序列化表单中的数据并自己处理 ajax 请求。所以是这样的：

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>

查询：

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

【讨论】：