在jquery UI模式中加载ajax数据(提交后)


loading ajax data in jquery ui modal (after submit)

我想从输入表单传递数据到我的编码器控制器,然后通过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);
    }

我不明白的是,为什么你不在你的表单上使用提交按钮,和编码器控制器应该echo而不是return。这里有一个解决方案,无论你的形式。

Jquery:

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
}

for your controller:

public function findcategory()
    {
        $page['content'] = 'hello-testing';
        echo json_encode($page); // echo and not return for codeigniter
    }

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

对于碰巧遇到这个问题的人,这里是我的解决方案,感谢上面的评论。

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

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

希望这对你有帮助!

您的表单可能正在进行POST操作,导致刷新。

花> form标签中拿出来放到a标签中

<a href="#" onclick="return findcat();">Click</a>