dry9192
2013-01-10 18:45 阅读 27

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

I would like to pass data from a input form to my codeigniter controller, then return a view via JSON that will then be opened in a jquery ui dialog modal...phew!

It isn't working though. On submit, it refreshes the page, and no alerts work either (if I put it at the beginning of the findcat() function).

Here is my Javascript function:

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

And my 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>

my controller is just a mockup to try and send some sort of content back:

    public function findcategory()
    {
        $page['content'] = 'hello-testing';
        return json_encode($page);
    }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • 已采纳
    douqiao1997 douqiao1997 2013-01-10 18:55

    Assuming return false; is used to stop the form from submitting, its in the wrong place. It should be directly in findcat as you have it it is in the ajax success function.

    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;
    }
    
    点赞 评论 复制链接分享
  • dongyao2022 dongyao2022 2013-01-10 18:49

    Your form is likely doing a POST which is causing the refresh.

    Take

    onclick="return findcat();
    

    out of the form tag and just put it on an a tag.

    <a href="#" onclick="return findcat();">Click</a>
    
    点赞 评论 复制链接分享
  • drs7798 drs7798 2013-01-10 19:03

    what I am not understanding is that why you are not using submit button on your form, and the codeigniter controller should echo and not return. here's a solution for you, regardless to your form.

    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
        }
    
    点赞 评论 复制链接分享
  • douzaoqu4447 douzaoqu4447 2013-01-10 19:35

    For anyone who happens upon this question..here is my solution in thanks to the above comments.

    Regarding the page submission and reload.

    Jquery's .live will take care of it. In your JS, simply add the following,

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

    in front of your function. This will catch your submit, run the function, then reload the page. To prevent the reload, at the end of the function, add return false;

    Regarding the Modal and AJAX problem...In my original code, didn't, "prep" the dialog.

    I didn't realize it due to my novice programming ability, but you need to first set up your dialog div with the following code:

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

    After that, use $("#category_modal").dialog("open"); to "activate" it following the ajax request.

    $('#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;
    });
    

    Hope this helps!

    点赞 评论 复制链接分享

相关推荐