在jquery ui模式中加载ajax数据（提交后）

Question

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

Answer 1

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