0

我想将输入表单中的数据传递给我的 codeigniter 控制器，然后通过 JSON 返回一个视图，该视图随后将在 jquery ui 对话框模式中打开......唷！

但它不起作用。提交时，它刷新页面，也没有任何警报工作（如果我把它放在 findcat() 函数的开头）。

这是我的 Javascript 函数：

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        return false;
        }
    });  
}

还有我的 HTML：

<div class="cus_input">
    <form id="category_form" onsubmit="return findcat();">
        <input type="text" id="category_input" name="category_input" placeholder=" Find Category"/>
        <input type="image" id="category_submit" src="<?php echo base_url() ?>img/board/icons/add.jpg" id="homeSubmit" value="X"/>
    </form>
</div>

我的控制器只是一个模型，用于尝试发回某种内容：

    public function findcategory()
    {
        $page['content'] = 'hello-testing';
        return json_encode($page);
    }
4

4 回答 4

2

我不明白的是，为什么您不在表单上使用提交按钮，而codeigniter控制器应该echo和不使用return。无论您的形式如何，这里都有适合您的解决方案。

查询：

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory', //you can use site_url here whic is better for you
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content.content);//not content['content'] 
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        }
    });  
    return false; //should be in your function scope and not the ajax scope
}

对于您的控制器：

public function findcategory()
    {
        $page['content'] = 'hello-testing';
        echo json_encode($page); // echo and not return for codeigniter
    }
于 2013-01-10T19:03:23.160 回答
1

假设return false;用于阻止表单提交，它在错误的位置。它应该直接在findcat你拥有它的 ajax 成功函数中。

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        }
    });  
    return false;
}
于 2013-01-10T18:55:01.237 回答
1

对于遇到此问题的任何人..感谢上述评论，这是我的解决方案。

关于页面提交和重新加载。

Jquery.live会处理它。在您的 JS 中，只需添加以下内容，

$('#category_form').live('submit', function(){

在你的功能前面。这将捕获您的提交，运行该功能，然后重新加载页面。为了防止重新加载，在函数末尾添加return false;

关于模态和 AJAX 问题...在我的原始代码中，没有“准备”对话框。

由于我的新手编程能力，我没有意识到这一点，但是您需要先使用以下代码设置对话框 div：

$('#category_modal').dialog({
    autoOpen: false,
    title: 'Hello',
    modal: true,
    height: 350,
    resizable: false
});

之后，$("#category_modal").dialog("open");在 ajax 请求之后使用它来“激活”它。

$('#category_form').live('submit', function(){
    var valinput = $('#category_input').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $("#category_modal").dialog("open");
        }
    });  
    return false;
});

希望这可以帮助！

于 2013-01-10T19:35:26.077 回答
0

您的表单可能正在执行导致刷新的 POST。

拿

onclick="return findcat();

从表单标签中取出，然后将其放在 a 标签上。

<a href="#" onclick="return findcat();">Click</a>
于 2013-01-10T18:49:14.780 回答